Atribut colspan

Atribut colspan ovládá slučování sloupců HTML tabulky. Aplikuje se na tagy th a td.

Přijímaná hodnota: celé číslo počínaje 1.

Jak používat: přidáme tento atribut k libovolné buňce td nebo th. Pokud, kupříkladu, nastavíme colspan na hodnotu 2 - pak buňka, které jsme to nastavili, zabere dva sloupce tabulky. Přitom sousední buňky vpravo nikam nezmizí, naše rozšířená buňka je vytlačí a tabulka se rozpadne. Aby k tomu nedošlo, je třeba odstranit jednu z buněk vpravo. Podívejte se na příklady pro lepší pochopení.

Příklad . Tabulka bez slučování

Podívejme se na tabulku bez slučování, se kterou budeme dále pracovat:

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

Příklad . Rozšíříme buňku na dva sloupce

Zkusme rozšířit buňku 1 na dva sloupce, nastavením atributu colspan na hodnotu 2. Přitom vytlačí buňky vpravo a tabulka se rozpadne:

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

Příklad . Rozšíříme buňku bez rozpadnutí tabulky

A nyní zkusme opravit problém s rozpadnutím tabulky z předchozího příkladu, odstraníme jednu z buněk vpravo od naší (je to buňka 2 nebo 3 - nezáleží na tom):

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

Příklad . Rozšíříme buňku na tři sloupce

Rozšiřme buňku 1 na 3 sloupce a nastavme jí atribut colspan na hodnotu 3. Přitom odstraníme ještě jednu buňku vpravo, aby se tabulka nerozpadla:

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

Příklad . Současně colspan a rowspan

Zkusme sloučit buňky s číslem 4, 5, 7 a 8, s využitím atributů colspan a rowspan (předchozí sloučení z tabulky odstraníme):

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

Viz také

atribut rowspan,
který slučuje řádky tabulky