Элемент 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:
Для получения дополнительной информации см. Табличные данные 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
является перечислимым, что означает, что он может иметь значение из определенного набора возможных значений.
Этот набор включает:
Ссылки:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
https://www.w3.org/TR/WCAG20-TECHS/H63.html