A colspan attribútum

A colspan attribútum a HTML táblázat oszlopainak egyesítését vezérli. A th és a td címkékre alkalmazható.

Megengedett érték: egész szám, kezdve 1-től.

Használata: hozzáadjuk ezt az attribútumot bármely td vagy th cellához. Ha például a colspan értékét 2-re állítjuk, akkor az a cella, amelyikre ezt alkalmaztuk, két oszlopot fog elfoglalni a táblázatban. Eközben a jobb oldali szomszédos cellák nem fognak eltűnni, hanem a kitágult cella kiszorítja őket, és a táblázat szerkezeti integritása megsérül. Ennek elkerülése érdekében el kell távolítani egy a jobb oldali cellák közül. A jobb megértésért tekintse meg a példákat.

Példa . Táblázat egyesítések nélkül

Nézzünk meg egy táblázatot egyesítések nélkül, amelyen tovább fogunk dolgozni:

<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élda . Bővítsük ki a cellát két oszlopra

Próbáljuk meg kibővíteni az 1 számú cellát két oszlopra, beállítva a colspan attribútumot 2 értékre. Eközben kiszorítja a jobb oldali cellákat, és a táblázat szerkezete megsérül:

<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élda . Bővítsük ki a cellát a táblázat szerkezetének megtartásával

Most próbáljuk meg kijavítani az előző példából származó, a táblázat szerkezetének megsérülésével járó problémát, távolítsunk el egyet a kibővített cellánktól jobbra lévő cellák közül (ez az 2 vagy 3 számú cella - mindegy, melyik):

<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élda . Bővítsük ki a cellát három oszlopra

Bővítsük ki az 1 számú cellát 3 oszlopra és állítsuk be a colspan attribútumát 3 értékre. Eközben távolítsunk el még egy cellát a jobb oldalon, hogy a táblázat szerkezete ne sérüljön meg:

<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élda . Egyszerre colspan és rowspan

Próbáljuk meg egyesíteni az 4, 5, 7 és 8 számú cellákat, felhasználva a colspan és a rowspan attribútumokat (az előző egyesítéseket távolítsuk el a táblázatból):

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

Lásd még

a rowspan attribútum,
amely a táblázat sorait egyesíti