Таблицы

Элемент HTML <table> позволяет отображать табличные данные (например, текст, изображения, ссылки, другие таблицы и т. д.) в ячейках двумерной таблицы со строками и столбцами.

<table>
    <tr>
        <th>Заголовок 1/Столбец 1</th>
        <th>Заголовок 2/Столбец 2</th>
    </tr>
    <tr>
        <td>Данные в строке 1 столбце 1</td>
        <td>Данные в строке 1 столбце 2</td>
    </tr>
    <tr>
        <td>Данные в строке 2 столбце 1</td>
        <td>Данные в строке 2 столбце 2</td>
    </tr>
</table>

Это приведет к тому, что таблица (<table>) состоит из трех полных строк (<tr>): одна строка содержит ячейки с заголовками (<th>), и две строки содержат ячейки с данными (<td>). Вы можете поместить все, что хотите, внутри <td> или <th>.

Заголовок 1/Столбец 1 Заголовок 2/Столбец 2
Данные в строке 1 столбце 1 Данные в строке 1 столбце 2
Данные в строке 2 столбце 1 Данные в строке 2 столбце 2

Ячейки таблицы могут объединять несколько столбцов или строк с помощью атрибутов colspan и rowspan. Эти атрибуты могут быть применены к элементам <th> и <td>.

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">Вторая строка занимает три столбца</td>
    </tr>
    <tr>
        <td rowspan="2">Эта ячейка занимает две строки</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>
</table>
row 1 col 1 row 1 col 2 row 1 col 3
Вторая строка занимает три столбца
Эта ячейка занимает две строки row 3 col 2 row 3 col 3
row 4 col 2 row 4 col 3

Обратите внимание, что вам не следует создавать таблицу, в которой как строки или столбцы перекрываются, поскольку это недопустимый код HTML, и результат обрабатывается по-разному различными веб-браузерами.

rowspan - это неотрицательное целое число, определяющее количество строк, объединенных в ячейке. Значение по умолчанию этого атрибута равно 1. Значение 0 означает, что ячейка будет занимать место от текущей строки до последней строки таблицы (или заголовка <thead>, или тела <tbody>или низа таблицы <tfoot>).
colspan это неотрицательное целое число, определяющее количество столбцов, объединенных в ячейке. Значение по умолчанию этого атрибута равно 1 . Значение 0 означает, что ячейка будет занимать место от текущего до последнего столбца группы столбцов <colgroup>, в которой определена ячейка.

Иногда требуется применить стиль к столбцу или группе столбцов, либо сгруппировать столбцы вместе. Для этого используйте элементы <colgroup> и <col>.
Дополнительный тег <colgroup> позволяет группировать столбцы вместе. Элементы <colgroup> должны быть дочерними элементами таблицы <table>, появляться после элемента <caption> и перед любым содержимым таблицы (например, <tr>, <thead>, <tbody> и т. д.).

В стандарте HTML тег <colgroup> поддерживает только атрибут span, который определяет число колонок, к которым будут применяться заданные характеристики. 

<table>
    <colgroup style="background: #AAC"></colgroup>
    <colgroup span="2" style="background: #CAA"></colgroup>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
1 2 3
1 2 3

Дополнительный тег <col> определяет столбец в таблице и используется для определения общей семантики на всех ячейках без применения логической группировки. Обычно данный элемент находится в элементе <colgroup>. 

<table>
    <colgroup>
        <col id="MySpecialColumn">
        <col>
    </colgroup>
    <colgroup>
        <col class="CoolColumn">
        <col class="NeatColumn" span="2">
     </colgroup>
 ...
</table>

К элементам <colgroup> и <col> могут применяться следующие стили CSS:

  • border
  • background
  • width
  • visibility
  • display (например, display: none)

Для получения дополнительной информации см. Табличные данные HTML5.

HTML предоставляет таблицам дополнительные элементы <thead>, <tbody>, <tfoot> и <caption>. Эти элементы полезны для добавления семантического значения в ваши таблицы и для создания отдельных стилей CSS в определенном месте.
При распечатке таблицы, которая не помещается на одну бумажную страницу, большинство браузеров повторяют содержимое <thead> на каждой странице.
Есть определенный порядок размещения элементов в коде HTML, которого нужно придерживаться, при этом нужно знать, что не каждый элемент встает на свои места, как можно было бы ожидать. Следующий пример демонстрирует, как должны быть размещены наши 4 элемента: 

<table>
    <caption>Заголовок таблицы</caption> <!--| caption - это первый дочерний элемент таблицы |-->
    <thead> <!--======================| thead размещается после caption |-->
        <tr>
            <th>Заголовок 1 столбца</th>
            <th>Заголовок 2 столбца</th>
        </tr>
    </thead>
    <tbody> <!--======================| tbody размещается после thead |-->
        <tr>
            <td>Содержимое 1</td>
            <td>Содержимое 2</td>
        </tr>
    </tbody>
    <tfoot><!--| tfoot можно разместить до или после tbody, но не в группе tbody |-->
    <!--| Независимо от того, где tfoot находится в разметке, она отображается внизу.  |-->
        <tr>
            <td>Нижний колонтитул 1</td>
            <td>Нижний колонтитул 2</td>
        </tr>
    </tfoot>
</table>

Результаты следующего примера демонстрируются дважды: в первой таблице отсутствуют стили, вторая таблица имеет несколько примененных свойств CSS: background-color, color и border. Стили представлены в виде визуального руководства и не являются существенным аспектом данной темы.

Заголовок таблицы
Заголовок 1 столбца Заголовок 2 столбца
Содержимое 1 Содержимое 2
Нижний колонтитул 1 Нижний колонтитул 2
Заголовок таблицы
Заголовок 1 столбца Заголовок 2 столбца
Содержимое 1 Содержимое 2
Нижний колонтитул 1 Нижний колонтитул 2
Элемент Используемые стили
<caption> Желтый текст на черном фоне
<thead> Жирный текст на пурпурном фоне
<tbody> Синий фон
<tfoot> Зеленый фон
<th> Оранжевая рамка
<td> Красная рамка

Элемент th обычно используются для обозначения заголовков строк и столбцов таблицы, например:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Заголовок столбца 1</th>
            <th>Заголовок столбца 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Заголовок строки 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Заголовок строки 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки. Атрибут предназначен для речевых браузеров, в обычных браузерах результат добавления scope никак не заметен. В приведенном выше примере будут внесены следующие изменения:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Заголовок столбца 1</th>
            <th scope="col">Заголовок столбца 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Заголовок строки 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Заголовок строки 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Атрибут scope является перечислимым, что означает, что он может иметь значение из определенного набора возможных значений. Этот набор включает:

  • col
  • row
  • colgroup
  • rowgroup

Ссылки:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope https://www.w3.org/TR/WCAG20-TECHS/H63.html