colspan-attribuutti

Attribuutti colspan hallitsee HTML-taulukon sarakkeiden yhdistämistä. Käytetään th- ja td-tägeihin.

Hyväksytty arvo: kokonaisluku alkaen 1.

Kuinka käyttää: lisäämme tämän attribuutin mihin tahansa td- tai th-soluun. Jos esimerkiksi asetamme colspan arvoon 2 - solu, jolle se asetettiin, vie kaksi taulukon saraketta. Tällöin oikealla olevat vierekkäiset solut eivät katoa mihinkään, vaan laajentunut solumme työntää ne pois ja taulukko hajoaa. Tämän estämiseksi yksi oikealla olevista soluista on poistettava. Katso esimerkkejä paremman ymmärryksen saamiseksi.

Esimerkki . Taulukko ilman yhdistämistä

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

<table>
	<tr>
		<td>solu1</td>
		<td>solu2</td>
		<td>solu3</td>
	</tr>
	<tr>
		<td>solu4</td>
		<td>solu5</td>
		<td>solu6</td>
	</tr>
	<tr>
		<td>solu7</td>
		<td>solu8</td>
		<td>solu9</td>
	</tr>
</table>

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

Esimerkki . Laajennetaan solua kahdella sarakkeella

Yritetään laajentaa solua 1 kahdella sarakkeella asettamalla sille attribuutti colspan arvoksi 2. Tällöin se työntää pois oikealla olevat solut ja taulukko hajoaa:

<table>
	<tr>
		<td colspan="2">solu1</td>
		<td>solu2</td>
		<td>solu3</td>
	</tr>
	<tr>
		<td>solu4</td>
		<td>solu5</td>
		<td>solu6</td>
	</tr>
	<tr>
		<td>solu7</td>
		<td>solu8</td>
		<td>solu9</td>
	</tr>
</table>

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

Esimerkki . Laajennetaan solua ilman taulukon hajoamista

Yritetään nyt korjata edellisen esimerkin taulukon hajoamisongelma poistamalla yksi soluista oikealta laajentuneesta solustamme (tämä on solu 2 tai 3 - ei väliä):

<table>
	<tr>
		<td colspan="2">solu1</td>
		<td>solu2</td>
	</tr>
	<tr>
		<td>solu4</td>
		<td>solu5</td>
		<td>solu6</td>
	</tr>
	<tr>
		<td>solu7</td>
		<td>solu8</td>
		<td>solu9</td>
	</tr>
</table>

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

Esimerkki . Laajennetaan solua kolmella sarakkeella

Laajennetaan solua 1 3 sarakkeella ja asetetaan sille attribuutti colspan arvoksi 3. Poistetaan tämän vuoksi vielä yksi solu oikealta, jotta taulukko ei hajoa:

<table>
	<tr>
		<td colspan="3">solu1</td>
	</tr>
	<tr>
		<td>solu4</td>
		<td>solu5</td>
		<td>solu6</td>
	</tr>
	<tr>
		<td>solu7</td>
		<td>solu8</td>
		<td>solu9</td>
	</tr>
</table>

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

Esimerkki . Samanaikaisesti colspan ja rowspan

Yritetään yhdistää solut numerolla 4, 5, 7 ja 8 hyödyntämällä attribuutteja colspan ja rowspan (edelliset yhdistämiset poistetaan taulukosta):

<table>
	<tr>
		<td colspan="3">solu1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">solu4</td>
		<td>solu6</td>
	</tr>
	<tr>
		<td>solu9</td>
	</tr>
</table>

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

Katso myös

attribuutti rowspan,
joka yhdistää taulukon rivejä