Ячейки-заголовки

Для выделения названий столбцов и строк предусмотрен тег <th>, который обозначает ячейку-заголовок.

По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Заголовок таблицы

Заголовок таблицы выделяется при помощи тега <caption>. Он должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

<table>
  <caption>Текст</caption>
  ...
</table>

С помощью CSS можно переместить заголовок таблицы в любое место. По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно. По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

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

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.

Если задать ячейке атрибут colspan со значением 2, то она как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Для объединения более двух ячеек точно так же используется атрибут colspan.

Объединение ячеек по вертикали осуществляется с помощью атрибута rowspan у тега <td> или <th>.

Если задать ячейке атрибут rowspan со значением 2, то она как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan. Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек.