Atrybut rowspan

Atrybut rowspan kontroluje scalanie wierszy w tabeli HTML. Stosowany do tagów th i td.

Akceptowana wartość: liczba całkowita zaczynając od 1.

Jak używać: dodajemy ten atrybut do dowolnej komórki td lub th. Jeśli, na przykład, ustawimy rowspan na wartość 2 - to komórka, której to ustawiliśmy, zajmie dwa wiersze wysokości tabeli. Przy tym komórki z wiersza poniżej nie znikną, nasza rozszerzona komórka je wypchnie i tabela się rozpadnie. Aby do tego nie doszło, trzeba usunąć jedną z komórek z wiersza poniżej. Spójrz na przykłady dla lepszego zrozumienia.

Przykład . Tabela bez scalania

Spójrzmy na tabelę bez scalania, z którą będziemy pracować dalej:

<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;
}

Przykład . Rozszerzmy komórkę na dwa wiersze

A teraz rozszerzmy komórkę 1 na dwa wiersze, ustawiając jej atrybut rowspan na wartości 2. Zobaczymy, że wypycha ona komórki z wiersza pod nią i tabela się rozpada:

<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;
}

Przykład . Rozszerzmy komórkę bez rozpadania tabeli

Aby naprawić problem z rozpadem tabeli z poprzedniego przykładu, spróbujmy usunąć jedną z komórek z drugiego wiersza (i to nie koniecznie komórkę 4, która znajduje się bezpośrednio pod naszą komórką 1, można usuwać dowolną, usuniemy komórkę z numerem 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;
}

Przykład . Rozszerzmy komórkę na `3` wiersze

A tutaj rozszerzmy naszą komórkę nie na dwa wiersze, a na 3, ustawmy jej rowspan na wartości 3. Przy tym usuwamy jedną z komórek z trzeciego wiersza (komórkę 7, 8 lub 9 - bez różnicy), aby tabela się nie rozpadła:

<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;
}

Przykład . Rozszerzmy jeszcze na `2` kolumny

Rozszerzmy jeszcze i komórkę 2 na 2 kolumny w dodatku do pierwszej komórki. Dla tego komórce 2 dodajemy colspan w wartości 2. Przy tym usuwamy komórkę 3, aby tabela się nie rozpadła:

<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;
}

Zobacz też

atrybut colspan,
który scala kolumny tabeli