Atribut colspan

Atribut colspan upravlja z združevanjem stolpcev HTML tabele. Uporablja se za oznake th in td.

Sprejeta vrednost: celo število začenši z 1.

Kako uporabljati: dodamo ta atribut katerikoli celici td ali th. Če na primer nastavimo colspan na vrednost 2 - bo celica, ki ji je to nastavljeno, zasedla dva stolpca tabele. Pri tem sosednje celice desno ne bodo nikamor izginile, naša razširjena celica jih bo izrinila in tabela se bo razpadla. Da se to ne zgodi, je treba odstraniti eno od celic desno. Oglejte si primere za boljše razumevanje.

Primer . Tabela brez združevanj

Poglejmo si tabelo brez združevanj, s katero bomo delali naprej:

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

Primer . Razširimo celico na dva stolpca

Poskusimo razširiti celico 1 na dva stolpca z nastavitvijo atributa colspan na vrednost 2. Pri tem bo izrinila celice desno in tabela se bo razpadla:

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

Primer . Razširimo celico brez razpadanja tabele

Zdaj pa poskusimo popraviti težavo z razpadanjem tabele iz prejšnjega primera, odstranimo eno od celic desno od naše (to je celica 2 ali 3 - ni pomembno):

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

Primer . Razširimo celico na tri stolpce

Razširimo celico 1 na 3 stolpce in ji nastavimo atribut colspan na vrednost 3. Pri tem odstranimo še eno celico desno, da se tabela ne razpade:

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

Primer . Hkrati colspan in rowspan

Poskusimo združiti celice s številkami 4, 5, 7 in 8, z uporabo atributov colspan in rowspan (prejšnja združevanja odstranimo iz tabele):

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

Glejte tudi

atribut rowspan,
ki združuje vrstice tabele