Rowspan-attribuutti

Attribuutti rowspan hallitsee rivien yhdistämistä HTML-taulukossa. Käytetään tageihin th ja td.

Hyväksytty arvo: kokonaisluku alkaen 1.

Kuinka käyttää: lisäämme tämän attribuutin mihin tahansa soluun td tai th. Jos esimerkiksi asetamme rowspan arvoksi 2 - solu, jolle se asetettiin, vie kaksi riviä taulukon korkeudessa. Samalla alla olevan rivin solut eivät katoa minnekään, laajentunut solumme työntää ne sivuun ja taulukko hajoaa. Tämän estämiseksi on poistettava yksi allekkaisen rivin soluista. Katso esimerkkejä parhaan ymmärryksen saamiseksi.

Esimerkki . Taulukko ilman yhdistämistä

Katsotaan taulukkoa ilman yhdistämistä, jolla aiomme työskennellä myöhemmin:

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

Esimerkki . Laajennetaan solua kahdella rivillä

Laajennetaan nyt solua 1 kahdella rivillä asettamalla sille attribuutti rowspan arvoksi 2. Näemme, että se työntää solut alta pois ja taulukko hajoaa:

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

Esimerkki . Laajennetaan solua ilman taulukon hajoamista

Korjataksemme edellisen esimerkin taulukon hajoamisongelman, yritetään poistaa yksi solu toisesta rivistä (eikä sen tarvitse olla solua 4, joka sijaitsee suoraan solumme 1 alla, voimme poistaa minkä tahansa, poistamme solun numerolla 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;
}

Esimerkki . Laajennetaan solua `3` riville

Laajennetaan nyt soluumme ei kahdella rivillä, vaan 3:lla, asetetaan sille rowspan arvoksi 3. Samalla poistetaan yksi kolmannen rivin soluista (solu 7, 8 tai 9 - ei väliä), jotta taulukko ei hajoa:

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

Esimerkki . Laajennetaan vielä `2` saraketta

Laajennetaan vielä solua 2 2 sarakkeella ensimmäisen solun lisäksi. Tätä varten solulle 2 lisätään colspan arvoksi 2. Samalla poistetaan solu 3, jotta taulukko ei hajoa:

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

Katso myös

attribuutti colspan,
joka yhdistää taulukon sarakkeita