Back to top

Всем привет!

Меня зовут Александр Мартынов. Я — программист и увлеченный разработчик сайтов. Много времени уделяю вопросам самообразования и саморазвития. С 1998 года систематически изучаю веб-программирование на языках PHP и JavaScript. В последнее время мой интерес прикован к фреймворкам Laravel, Vue и TailwindCss. Я основательно изучаю перечисленные технологии в теории и на практике и по мере возможностей делюсь полученными знаниями на этом сайте.

Таблицы

Для создания таблиц в языке HTML применяются следующие основные теги:

  • <table> — определяет границы таблицы
    • <tr> — ряд данных
      • <th> — ячейка таблицы с заголовком
      • <td> — простая ячейка таблицы

Таблица состоит из рядов, колонок и составляющих их ячеек. Ряды и колонки формируют сетку, а ячейки таблицы полностью ее заполняют без перекрытий.

HTML таблицы должны использоваться только для представления табличных данных, но не для позиционирования материалов на странице.

Заголовок и разделы таблицы

  • <table>
    • <caption> — заголовок таблицы
    • <thead> — вступительная часть таблицы
    • <tbody> — основная часть таблицы
    • <tfoot> — заключительная часть таблицы

Объединение ячеек таблицы

Для объединения соседних ячеек таблицы используются атрибуты colspan и rowspan для тегов <th> и <td>.

  • colspan — объединение ячеек из соседних колонок таблицы
  • rowspan — объединение ячеек из соседних рядов таблицы

Размещение таблицы в теге figure

Зачастую таблицы представляют собой некий самодостаточный завершенный материал на странице, и поэтому для их размещения используется тег <figure>. В этом случае возникает вопрос оформления заголовка таблицы.

  • caption vs figcaption

Если таблица является единственным содержимым тега <figure> то для заголовка таблицы лучше использовать тег <figcaption>, а не <caption>.

Оформление таблицы с помощью CSS

  • Ширина таблицы
  • Внутренние отступы
  • Рамки и слияние рамок (border-collapse)
  • Выравнивание содержимого ячеек (text-align)
27 октября 2015

Блоковая модель (box model)

Блоковая модель — это одна из важнейших концепций каскадных таблиц стилей (CSS), которая позволяет задавать границы элементов на экране и расстояния между ними.

6 октября 2015

Свойство background

Каскадные таблицы стилей позволяют устанавливать самые разнообразные фоны практически для любых элементов веб-страниц. Для этого используются следующие CSS-свойства семейства background:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
2 октября 2015

Синтаксис CSS

Каскадные таблицы стилей (от англ. Cascading Style Sheets, CSS) — это язык, определяющий стиль или визуальное оформление веб-страниц, в т.ч. расположение HTML-элементов на экране, цвета текста и фона, шрифты и многое другое.

2 октября 2015

Структурирование и группирование материалов веб-страниц

Структурирование и группирование материалов на странице осуществляется с помощью тегов <article> (статья), <section> (секция), <nav> (навигация), <aside> (побочный материал), <header> ("шапка"), <footer> ("подвал"), <p> (абзац), <hr> (разрыв), <pre> (форматированный текст), <blockquote> (длинные цитаты), <ol> (нумерованный список), <ul> (ненумерованный список), <figure> (иллюстрации и диаграммы), <div> (разделы), <main> (основной материал).

22 сентября 2015

Введение в HTML

HTML - это компьютерный язык для создания сайтов в Интернете. Сокращение HTML происходит от английского «HyperText Markup Language», что дословно переводится как «язык гипертекстовой разметки». Гипертекстом называются страницы в Интернете, по которым посредством гиперссылок могут перемещаться пользователи. Таким образом, язык гипертекстовой разметки - это язык разметки страниц в Интернете.

8 сентября 2015

Карты изображений

Карты изображений (от англ. image map) или как их еще называют карты ссылок, позволяют привязать гиперссылки к различным частям одного изображения, созданного с помощью тега img.

2 сентября 2015

Изображения

Для размещения картинок в веб-страницы в языке гипертекстовой разметки используется тег img (от англ. image — изображение).

2 сентября 2015

Pages