Как объединить строки
Кроме атрибута 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>
Расширим Ячейку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 на 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>
Расширим еще и Ячейку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>