Таблица HTML

Таблица используется, когда данные нужно оформить в виде строк и столбцов. Ячейки таблицы могут содержать любую информацию: текст, изображения, мультимедийные объекты.

<table></table>: c данного элемента начинается и заканчивается таблица, все остальные элементы таблицы являются его содержимым.
<caption></caption>: данным элементом обозначается название таблицы. По умолчанию располагает текст по центру.
<tr></tr>: (table row - строка таблицы) элемент обозначающий строку таблицы, в нем размещают элементы заголовков th или элементы данных td.
<th></th>: (table headers - заголовоки таблицы) элемент заголовка таблицы, применяется для обозначения названий столбцов или строк. Текстовое содержимое данного элемента по умолчанию будет выделено жирным и размещено по центру.
<td></td>: (table data - данные таблицы) элемент в котором размещают различные данные.

Пример простой таблицы HTML <table> <caption>Статистика выпуска танков Т-34 некоторыми заводами НКТП</caption> <tr> <th>Завод</th> <th>1941</th> <th>1942</th> <th>1943</th> <th>1944</th> <th>Всего</th> </tr> <tr> <td>№ 183 (Нижний тагил)</td> <td>25</td> <td>5684</td> <td>7466</td> <td>1838</td> <td>15013</td> </tr> <tr> <td>№ 112 "Красное Сормово" (Горький)</td> <td>173</td> <td>2584</td> <td>2962</td> <td>557</td> <td>6276</td> </tr> <tr> <td>Всего</td> <td>198</td> <td>8268</td> <td>10428</td> <td>2395</td> <td>21289</td> </tr> </table>

Статистика выпуска танков Т-34 некоторыми заводами НКТП
Завод	1941	1942	1943	1944	Всего
№ 183 (Нижний тагил)	25	5684	7466	1838	15013
№ 112 "Красное Сормово" (Горький)	173	2584	2962	557	6276
Всего	198	8268	10428	2395	21289

По умолчанию ячейка растягивается по ее содержимому.

Объединение ячеек

Для образования более сложных таблиц можно объединять ячейки заголовков th или данных td .

colspan="количество ячеек": объединение ячеек по горизонтали.
rowspan="количество ячеек": объединение ячеек по вертикали.

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


<table>
    <tr><th colspan="2">Объединение по горизонтали</th></tr>
    <tr><td>первая</td><td>вторая</td></tr>
    <tr><td>третья</td><td>четвертая</td></tr>
</table>

Горизонтальное объединение
первая	вторая
третья	четвертая

В вышеприведенном примере ячейка заголовка th таблицы шириной в 2 столбца была растянута на ширину этих двух столбцов, путем присваивания значения 2 атрибуту rowspan . При этом в строке заголовка таблицы присутствует только один элемент th .


<table>
    <tr><th rowspan="2">Вертикальное объединение</th><td>первая</td><td>вторая</td>
    </tr>
    <tr><td>третья</td><td>четвертая</td>
    </tr>
</table>

Вертикальное объединение	первая	вторая
Вертикальное объединение	третья	четвертая

Ячейка заголовка th таблицы высотой в 2 строки была растянута на высоту этих двух строк, путем присваивания значения 2 атрибуту colspan . Ячейка заголовка th присутствует только в первой строке первого столбца.

про подпись таблиц с помощью figure и figcaption

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

<thead></thead>: применяется для объединения заголовков таблицы - элементов th.
<tbody></tbody>: применяется для объединения тела таблицы - элементы td.
<tfoot></tfoot>: применяется для объединения нижнего колонтитула таблицы.