Atribuut colspan

Atribuut colspan kontrollib HTML tabeli veergude ühendamist. Rakendub siltidele th ja td.

Võetav väärtus: täisarv alates 1.

Kuidas kasutada: lisame selle atribuudi mingile lahtrile td või th. Kui näiteks määrata colspan väärtuseks 2 - siis lahtrile, millele see määrati, hõivab kaks tabeli veergu. Samal ajal naabrelahkrid paremal ei kao kuhugi, meie laienenud lahter tõrjub need välja ja tabel laguneb. Selle vältimiseks tuleb kustutada üks parempoolsetest lahtritest. Vaadake näiteid paremaks mõistmiseks.

Näide . Tabel ilma ühendusteta

Vaatame tabelit ilma ühendusteta, millega me edaspidi töötame:

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

Näide . Laiendame lahtrit kahe veeru võrra

Proovime laiendada lahtrit 1 kahe veeru võrra, määrates sellele atribuudi colspan väärtusega 2. Samal ajal see tõrjub välja parempoolsed lahtrid ja tabel laguneb:

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

Näide . Laiendame lahtrit ilma tabeli lagunemiseta

Nüüd proovime parandada eelmise näite tabeli lagunemise probleemi, kustutades ühe parempoolsetest lahtritest (see on lahtri 2 või 3 - vahet pole):

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

Näide . Laiendame lahtrit kolme veeru võrra

Laiendame lahtrit 1 3 veeru võrra ja määrame sellele atribuudi colspan väärtusega 3. Samal ajal kustutame veel ühe lahtri paremal, et tabel ei laguneks:

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

Näide . Samaaegselt colspan ja rowspan

Proovime ühendada lahtrid numbriga 4, 5, 7 ja 8, kasutades atribuute colspan ja rowspan (eelmised ühendused eemaldame tabelist):

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

Vaata ka

atribuut rowspan,
mis ühendab tabeli ridu