Атрыбут rowspan

Атрыбут rowspan кіруе аб'яднаннем радоў ў HTML табліцы. Ужываецца да тэгаў th і td.

Прымаемае значэнне: цэлы лік, пачынаючы з 1.

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

Прыклад . Табліца без аб'яднанняў

Давайце паглядзім табліцу без аб'яднанняў, з якой мы будзем працаваць далей:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

Прыклад . Пашырым ячэйку на два рады

А цяпер давайце пашырым ячэйку 1 на два рады, задаўшы ёй атрыбут rowspan у значэнні 2. Мы ўбачым, што яна выціскае ячэйкі з раду пад ёй і табліца развальваецца:

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

Прыклад . Пашырым ячэйку без развальвання табліцы

Каб паправіць праблему з развальваннем табліцы з папярэдняга прыкладу, давайце паспрабуем выдаліць адну з ячаек з другога раду (і гэта не абавязкова ячэйку 4, якая знаходзіцца непасрэдна пад нашай ячэйкай 1, можна выдаляць любую, мы выдалім ячэйку з нумарам 5):

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

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

Прыклад . Пашырым ячэйку на `3` рады

А тут давайце пашырым нашу ячэйку не на два рады, а на 3, зададзім ёй rowspan у значэнні 3. Пры гэтым выдалім адну з ячаек з трэцяга раду (ячэйку 7, 8 або 9 - без розніцы), каб табліца не развалілася:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

Прыклад . Пашырым яшчэ на `2` слупкі

Давайце пашырым яшчэ і ячэйку 2 на 2 слупкі ў дадатак да першай ячэйкі. Для гэтага ячэйцы 2 дадаем colspan у значэнні 2. Пры гэтым выдалім ячэйку 3, каб табліца не развалілася:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td colspan="2">cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

Глядзіце таксама

атрыбут colspan,
які аб'ядноўвае слупкі табліцы