Atrybut colspan

Atrybut colspan kontroluje scalanie kolumn 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 colspan na wartość 2 - to komórka, której to ustawiliśmy, zajmie dwie kolumny tabeli. Jednak sąsiednie komórki po prawej stronie nie znikną, nasza rozszerzona komórka je wypchnie i tabela się rozpadnie. Aby do tego nie doszło, należy usunąć jedną z komórek po prawej stronie. 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 dwie kolumny

Spróbujmy rozszerzyć komórkę 1 na dwie kolumny, ustawiając jej atrybut colspan na wartość 2. Spowoduje to wypchnięcie komórek po prawej stronie i tabela się rozpadnie:

<table>
	<tr>
		<td colspan="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

A teraz spróbujmy naprawić problem z rozpadem tabeli z poprzedniego przykładu, usuwając jedną z komórek po prawej stronie od naszej (to komórka 2 lub 3 - bez różnicy):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</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 trzy kolumny

Rozszerzmy komórkę 1 na 3 kolumny i ustawmy jej atrybut colspan na wartość 3. Usuńmy przy tym jeszcze jedną komórkę po prawej stronie, aby tabela się nie rozpadła:

<table>
	<tr>
		<td colspan="3">cell1</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 . Jednocześnie colspan i rowspan

Spróbujmy połączyć komórki o numerach 4, 5, 7 i 8, korzystając z atrybutów colspan i rowspan (poprzednie scalenia usuniemy z tabeli):

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

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

Zobacz też

atrybut rowspan,
który scala wiersze tabeli