HTML5. Правильная таблица
HTML5-таблица – структурированный набор веб-данных, состоящий из строк и столбцов табличных значений указанных величин. Веб-таблицы быстро просматриваются, легко выявляя определяющую взаимосвязь табличных параметров. Таблица жёстка! Строки и ячейки веб-таблицы всегда неподвижны. Полученная из таблицы информация интерпретируется визуально, сопоставляя заголовки строк и столбцов.
- HTML5. Теги табличные.
- Атрибуты тега <table>
- Заголовки строк и столбцов html-таблицы
- Слияние ячеек html-таблицы
- Стилизация html-таблицы, строк и ячеек
- Стилизация столбцов html-таблицы
- Адаптивная таблица
HTML5. Теги табличные.
- <table></table>
- Главные теги таблицы, определяющие на веб-странице html-элемент «Таблица».
- Термин 2
- Определение 2
- Термин 2
- Определение 2
<table></table> | html-таблица | table |
<caption></caption> | Подпись к таблице | table-caption |
<colgroup></colgroup> | Контейнер для одного или нескольких <col> | table-column-group |
<col> | Выбирает для форматирования столбцы | table-column |
<thead></thead> | Заголовок таблицы | table-header-group |
<tbody></tbody> | Тело таблицы | table-row-group |
<tfoot></tfoot> | Нижний колонтитул таблицы | table-footer-group |
<tr></tr> | Строка таблицы | table-row |
<th></th> | Заголовок столбца таблицы | table-cell |
<td></td> | Ячейка таблицы | table-cell |
HTML5. Теги таблицы
Содержимое таблицы находится между двумя парными тегами <table></table>, определяющими на странице html-элемент «Таблица».
HTML-элемент «Строка таблицы» образуется тегами <tr></tr> («table row») и содержит ячейки таблицы.
HTML-элемент «Ячейка таблицы» образован парой тегов <td></td> («table data»). Ячейка таблицы – минимальный контейнер табличного содержимого. В ячейке таблицы расположен логически завершенный контент (текст, ссылка, картинка …).
Столбцы таблицы расположены вертикально и образованы ячейками разных строк.
Атрибуты тега <table>
Атрибуты тега <table>:
align – выравнивание таблицы по краю окна браузера. Допустимые значения: left – по левому краю, center – по центру и right – по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.
bgcolor – цвет фона таблицы.
border – толщина границы таблицы в пикселах (+ отображаются границы ячеек).
cellpadding – внутреннее расстояние от границы ячейки до ее содержимого (padding). Атрибут cellpadding добавляет пространство внутри ячейки, увеличивая тем самым ее размеры. Без cellpadding текст в таблице просто «налипает» на рамку (border).
cellspacing – наружное расстояние, зазор от внешней границы ячйки (margin) до соседней. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.
cols – указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению и ускоряет отображение содержимого таблицы.
width – ширина таблицы.
Атрибуты прописываются в открывающем теге <table>, их действие распространяется на всю таблицу: все строки и ячейки. Пример использования атрибутов – в окончании статьи «ссылка на якорь !!!».
Заголовки строк и столбцов html-таблицы
Заголовки строк и столбцов html-таблицы – особые ячейки, идущие вначале каждой строки или столбца. Заголовки строк и столбцов выделяются визуально и семантически.
HTML-элементы «Заголовок строки» и «Заголовок столбца» образуются тегами <th></th> («table header»), определяющие тип содержания ячейки, как «Заголовок». Тег <th> работает в точности как <td>, за исключением того, что обозначает заголовок, а не обычную ячейку. По умолчанию, в браузере, к заголовкам таблицы применяется определённый стиль – выделение полужирным шрифтом и выравнивание по центру.
Слияние ячеек html-таблицы
Ячейки таблицы и табличные заголовки имеют атрибуты colspan и rowspan, позволяющие объединять смежные ячейки по вертикали или горизонтали. Оба атрибута принимают безразмерное числовое значение, равное количеству объединяемых ячеек. Например, <th colspan="2"> или <td rowspan="3">.
colspan Действие атрибута colspan распространяется на рядом стоящие столбцы и охватывает горизонтальные соседствующие ячейки, расположенные в прилегающих столбцах (англ. col – колонка, span – охватывать).
rowspan Действие атрибута rowspan распространяется на рядом расположенные строки и охватывает вертикально соседствующие ячейки, расположенные в рядом расположенные строках (англ. rows – строка, span – охватывать).
Важно. Браузер отрисовывает количество ячеек таблицы по вертикали и горизонтали, исходя из наличия максимально возможного. Простое вписывание кода объединения ячеек в таблицу приводит к добавлению строк или столбцов в количестве объединенных ячеек. (Сколько объединили – сколько и добавилось). В результате такого объединения – html-таблица «съезжает». Чтобы исправить «съезжание», код объединения записывается только в первой из объединяемых ячеек, а код остальных объединяемых ячеек – нужно удалить. Учитывая муторность этого процесса объединение (слияние) ячеек лучше всего производить в любом визуальном html-редакторе.
Стилизация html-таблицы, строк и ячеек
Стилизация внешнего вида html-таблицы, ее строк и ячеек производится стандартно: указанием стилевого правила, применяемого к соответствующему html-элементу. Как обычно, стилевое правило прописывается, либо в атрибуте style открывающего тега требуемого элемента, либо посредством таблиц CSS, встроенных и внешних, с указанием правила и его селектора к требуемому открывающему тегу.
Стилизация столбцов html-таблицы
Стилизация столбцов html-таблицы – отдельная тема. HTML-таблица имеет табличный элемент без тега. Это – столбец. Стилизация столбцов html-таблицы производится посредством html-элементов <colgroup> и <col> (англ. – группа колонок и колонка).
Элемент <colgroup> располагается (при необходимости), сразу после тега <table> и содержит элементы <col> – контейнеры стилей столбцов html-таблицы. Элемент <col> поддерживает любой удобный способ стилизации: атрибут style, с прописанным в нем стилевым правилом, либо селекторы CSS (обычно id или class) таблиц CSS с указанием стилевых правил уже в там. В любом случае, прописанное в элементе <col> стилевое правило относится ко всему столбцу html-таблицы.
Элемент <col> имеет дополнительный атрибут span, указывающий, на сколько именно столбцов подряд распространяется указанный стиль. Например, span="3" обозначает, что указанный стиль применим ко трем столбцам подряд (span="0" или span="1" – не указывается). Отсчет ведется слева направо. Для указания столбцов без стилизации обязательно записывается пустой <col>, чтобы не сбивать браузер с толку. Если общее количество упоминаемых в <colgroup> форматированных столбцов превысит количество реальных табличных, таблица «поплывет» и справа появятся пустые колонки. Элементы <colgroup> и <col> сложно использовать в таблицах с объединенными по горизонтали ячейками.
Адаптивная таблица
Таблицы не реагируют автоматически на тип устройства. Размер таблиц по умолчанию подстраивается под их содержимое, «выпирающее» за пределы страницы у больших и широких таблиц. Скролл страницы (изменение масштаба) заставляет браузер изменять ширину колонок таблицы за счет форматирования контента, втискиваясь в заданную ширину страницы. По достижению некоего логического предела, сжатие ширины таблицы прекращатся и становится невозможным, и наша тебличка – «вылезает» через край страницы.
Очень нехорошо – присутствие на веб-странице более широкого веб-контента. Исправить сию досаду поможет создание адаптивных свойств у «выпирающих» элементов за счет добавления к ним полос прокрутки, в нашем случае – к таблице.
<table style="overflow-x:auto;">
или добавив в CSS код стилевого правила:
table {overflow-x:auto;}
Адаптивная таблица отображает горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого (контента). Неплохой вариант – добавить полосы прокрутки родителям таблицы: элементам body, main или article.