Интернетчик » site » HTML5. Правильная таблица

HTML5. Правильная таблица

HTML5-таблица – структурированный набор веб-данных, состоящий из строк и столбцов табличных значений указанных величин. Веб-таблицы быстро просматриваются, легко выявляя определяющую взаимосвязь табличных параметров. Таблица жёстка! Строки и ячейки веб-таблицы всегда неподвижны. Полученная из таблицы информация интерпретируется визуально, сопоставляя заголовки строк и столбцов.

  1. HTML5. Теги табличные.
    1. <table> (таблица)
  2. Атрибуты тега <table>
  3. Заголовки строк и столбцов html-таблицы
  4. Слияние ячеек html-таблицы
  5. Стилизация html-таблицы, строк и ячеек
  6. Стилизация столбцов html-таблицы
  7. Адаптивная таблица

HTML5. Теги табличные.

<table></table>
Главные теги таблицы, определяющие на веб-странице html-элемент «Таблица».
Термин 2
Определение 2
Термин 2
Определение 2
Табличные теги HTML5
<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.