Смежные ячейки таблицы могут объединяться. Например, в таблице из нескольких столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области.
Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут rowspan
тега <th>
или <td>
, например,
<td rowspan="2">
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут colspan
тех же тегов, например,
<td colspan="2">
Пример
В следующей таблице используется объединение столбцов и строк.
<html>
<body>
<table border=1 align="center">
<tr><th colspan="3">Заголовок на 3 столбца</th></tr>
<tr>
<th>Заголовок на 1 строку</th>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<th rowspan="3">Заголовок на 3 строки</th>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr><td>Ячейка 5</td><td>Ячейка 6</td></tr>
<tr><td>Ячейка 7</td><td>Ячейка 8</td></tr>
</table>
</body>
</html>
Заголовок на 3 столбца | ||
---|---|---|
Заголовок на 1 строку | Ячейка 1 | Ячейка 2 |
Заголовок на 3 строки | Ячейка 3 | Ячейка 4 |
Ячейка 5 | Ячейка 6 | |
Ячейка 7 | Ячейка 8 |
Таблица будет иметь следующий вид.
Если вы хотите создать таблицу с объединениями столбцов и в то же время точно контролировать ширину каждого столбца, необходимо задать ширину по крайней мере одной ячейки в каждом столбце. Для полной уверенности найдите время и задайте ширину каждой ячейки в таблице. Когда объединения столбцов пересекаются, очень легко получить непредсказуемый результат