Атрибут rowspan

Атрибут rowspan управляет объединением рядов в HTML таблице. Применяется к тегам th и td.

Принимаемое значение: целое число начиная с 1.

Как пользоваться: добавляем данный атрибут к любой ячейке td или th. Если, к примеру, задать rowspan в значение 2 - то ячейка, которой это задали, займет два ряда по высоте таблицы. При этом ячейки из ряда ниже никуда не денутся, наша расширившаяся ячейка их вытеснит и таблица развалится. Чтобы этого не произошло, нужно удалить одну из ячеек из ряда ниже. Смотрите примеры для лучшего понимания.

Пример . Таблица без объединений

Давайте посмотрим таблицу без объединений, с которой мы будем работать дальше:

<table>
	<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>

table, td, th {
	border: 1px solid black;
}

Пример . Расширим Ячейку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>

table, td, th {
	border: 1px solid black;
}

Пример . Расширим Ячейку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>

table, td, th {
	border: 1px solid black;
}

Пример . Расширим Ячейку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>

table, td, th {
	border: 1px solid black;
}

Пример . Расширим еще и Ячейку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>

table, td, th {
	border: 1px solid black;
}

Смотрите также

атрибут colspan,
который объединяет столбцы таблицы