Atribuut rowspan

Atribuut rowspan kontrollib ridade ühendamist HTML tabelis. 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 rowspan väärtuseks 2 - siis lahtrile, millele see määrati, hõivab kaks rida tabeli kõrguses. Sel juhul lahtrid altpoolt reast ei kao kuhugi, meie laienenud lahter tõrjub need välja ja tabel laguneb. Selle vältimiseks tuleb allolevast reast üks lahter eemaldada. Vaadake parema mõistmise huvides näiteid.

Näide . Tabel ilma ühendamiseta

Vaatame tabelit ilma ühendamiseta, 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 rea võrra

Nüüd aga laiendame lahtrit 1 kahe rea võrra, määrates sellele atribuudi rowspan väärtuseks 2. Me näeme, et see tõrjub lahtrid altpoolt olevast reast ja tabel laguneb:

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

Et parandada eelmise näite tabeli lagunemise probleemi, proovime eemaldada ühe lahtri teisest reast (ja see ei pea olema lahtrit 4, mis asetseb otse meie lahtri 1 all, saab eemaldada ükskõik millise, me eemaldame lahtri numbriga 5):

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</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 `3` rea võrra

Siin aga laiendame oma lahtrit mitte kahe rea, vaid 3 rea võrra, määrame sellele rowspan väärtuseks 3. Sel juhul eemaldame ühe lahtri kolmandast reast (lahtri 7, 8 või 9 - vahet pole), et tabel ei laguneks:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

Näide . Laiendame veel `2` veergu võrra

Laiendame veel ka lahtrit 2 2 veeru võrra esimese lahtri kõrvale. Selleks lisame lahtrile 2 colspan väärtusega 2. Sel juhul eemaldame lahtri 3, et tabel ei laguneks:

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

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

Vaata ka

atribuut colspan,
mis ühendab tabeli veerge