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