Таблица в HTML 5

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

Полная структура таблицы в HTML 5

<table>
    <caption>Заголовок таблицы</caption>
    <colgroup>
        <col />
    </colgroup>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
        </tr>
    </tfoot>
</table>

Теги таблицы

• table - тег определяющий что элемент является таблицей. Является обязательным тегом.
• caption - заголовок таблицы, описывающий её содержимое.
• colgroup - определяет группу столбцов в таблице. В нём можно назначить стили для столбцов таблицы через тег <col />.
  • col - определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек. Определение происходит через атрибуты span, class, style и др.
• thead - верхний колонтитул таблицы.
• tbody - основной раздел таблицы.
• tfoot - нижний колонтитул таблицы.
  • tr - строка таблицы. Сокращение от английского table row.
    • th - ячейка заголовка таблицы. Сокращение от английского table header.
    • td - ячейка таблицы, означает данные таблицы. Сокращение от английского table data.

Все вышеперечисленные теги кроме тега <col /> являются парными, то есть у них должен быть открывающий и закрывающий тег. Как пример <table> ... </table>.

Простейшая таблица

Минимальная структура таблицы без семантических разделов выглядит следующим образом:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

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

Увеличить ячейки таблицы можно при помощи атрибутов colspan и rowspan.

Атрибут colspan задает размер ячейки по горизонтали, а rowspan — по вертикали. При этом размер указывается в количестве ячеек.

В следующей таблице ячейки Вес и Итого увеличены по горизонтали, а ячейки №, Наименование и Цена в шапке таблицы увеличены по вертикали:

HTML таблицы:

<table>
    <thead>
        <tr>
            <th rowspan="2">№</th>
            <th rowspan="2">Наименование</th>
            <th colspan="2">Вес</th>
            <th rowspan="2">Цена</th>
        </tr>
        <tr>
            <th>Брутто</th>
            <th>Нетто</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Сахар</td>
            <td>25</td>
            <td>21</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Соль</td>
            <td>20</td>
            <td>17</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="4">Итого:</th>
            <th>150</th>
        </tr>
    </tfoot>
</table>

Атрибуты

HTML-теги относящиеся к таблице поддерживают все глобальные атрибуты (атрибуты общие для всех элементов HTML), а так же ряд следующих специфических атрибутов:

abbr - Краткое, сокращённое описание содержимого ячейки заголовка, предоставляемое в качестве альтернативной метки для использования ячейки заголовка при ссылке на ячейку в других контекстах. Некоторые пользовательские агенты, такие как программы чтения речи, могут представлять это описание перед самим содержимым.

colspan - Неотрицательное целое число, указывающее, сколько столбцов охватывает или расширяет ячейка заголовка. Значение по умолчанию — 1. Агенты пользователей отклоняют значения выше 1000 как неверные, по умолчанию устанавливая такие значения равными 1.

headers - Список разделенных пробелами строк, соответствующих id атрибутам элементов <th>, которые предоставляют заголовки для этой ячейки заголовка.

rowspan - Неотрицательное целое число, указывающее сколько строк охватывает или расширяет ячейка заголовка. Значение по умолчанию — 1; если его значение равно 0, то ячейка заголовка будет расширяться до конца раздела группировки таблицы (<thead>, <tbody>, <tfoot>, даже если неявно определено) к которому <th> принадлежит. Значения выше 65534 обрезаются до 65534.

scope - <th> Определяет ячейки к которым относится заголовок (определенный в элементе). Возможные перечисляемые значения:

• row: заголовок относится ко всем ячейкам строки к которой он принадлежит;
• col: заголовок относится ко всем ячейкам столбца к которому он принадлежит;
• rowgroup: заголовок принадлежит группе строк и относится ко всем её ячейкам;
• colgroup: заголовок принадлежит к colgroup и относится ко всем её ячейкам.

Если scope атрибут не указан или его значение не равно row, col, rowgroup или colgroup, то браузеры автоматически выбирают набор ячеек к которым применяется ячейка заголовка.

colgroup - Группы столбцов таблицы

Для стилизации столбцов таблицы применяется тег <colgroup>, внутри которого можно определить группу или группы столбцов таблицы.

Тег <colgroup> должен располагаться внутри тега <table>, после любого <caption> элемента (если он используется), но перед элементами <thead>, <tbody>, <tfoot> и <tr>.

Атрибуты

Элемент colgroup включает в себя глобальные атрибуты. Из специфических атрибутов поддерживается только атрибут span:

• span - указывает количество последовательных столбцов, <colgroup> которые охватывает элемент. Значение должно быть положительным целым числом больше нуля. Если отсутствует, его значение по умолчанию — 1.

CSS-свойства

<colgroup> влияет только ограниченное количество CSS-свойств:

• background: Различные background-свойства задают фон для ячеек в группе столбцов. Поскольку цвет фона группы столбцов рисуется поверх таблицы, но за фоновыми цветами, применяемыми к столбцам ( <col>), группам строк ( <thead>, <tbody> и <tfoot>), строкам (<tr>) и отдельным ячейкам (<th> и <td>), фоны, применяемые к группам столбцов таблицы, видны только в том случае, если каждый слой, рисуемый поверх них, имеет прозрачный фон.
• border: Различные border-свойства применяются, но только если <table> установлено border-collapse: collapse.
• visibility: Значение collapse для группы столбцов приводит к тому, что все ячейки столбцов в этой группе столбцов не отображаются, а ячейки, охватывающие другие столбцы, обрезаются. Пространство, которое занимали бы эти столбцы в группе столбцов, удаляется. Однако размер других столбцов по-прежнему рассчитывается так, как если бы ячейки в свернутом столбце(ах) в группе столбцов присутствовали. Другие значения не оказывают никакого visibility эффекта.
• width: Свойство width определяет минимальную ширину столбцов в группе столбцов, как если бы она min-width была установлена.

Пример:

<table>
    <colgroup>
        <col span="2" style="background-color: #fff8dc">
        <col style="background-color: #e0ffff">
    </colgroup>
    <tr>
        <th>ID</th>
        <th>Наименование</th>
        <th>Цена, руб.</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Сахар</td>
        <td>40,00</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Соль</td>
        <td>15,00</td>
    </tr>
</table>