HTML-dokumenttiin voidaan laittaa erilaisia taulukoita. Tekemällä semantiikaltaan oikeaoppiset sivut, voidaan taulukoitten sisältö siirtää muihin medioihin oikein. Tästä johtuen esimerkiksi sivuston rakennetta ei pidä toteuttaa taulukkotaitolla.

Mitä taulukko sisältää
Mitä taulukko sisältää ja kuinka taulukoita tehdään.
Cellpadding
Taulukon reunuksien ja sisällön väliin saadaan tyhjää tilaa cellpadding-attribuutilla.
Cellspacing
Taulukon solujen väliin saadaan tyhjää tilaa cellspacing-attribuutilla.
Reunukset
Taulukkoon voidaan tehdä reunukset border-attribuutilla.
Rowspan
Rowspan-attribuutilla voidaan tehdä taulukon solusta esimerkiksi kahden solun korkuinen.
Colspan
Colspan-attribuutilla voidaan tehdä taulukon solsuta esimerkiksi kahden solun levyinen.

Mitä taulukko sisältää

Taulukko sisältää rivejä (tr) ja soluja (td). Taulukko aloitetaan TABLE-tagilla. Kaikki tagit tulee myös sulkea. TABLE-tagiin tulisi laittaa myös summary-attribuutti, joka kertoo kuvauksen taulukon sisällöstä.

Esimerkki 1
<table summary="esimerkki taulukko 1">
	<tr>
		<td>Solun 1 sisältö.</td>
	</tr>
	<tr>
		<td>Solun 2 sisältö.</td>
	</tr>
</table>

Ensimmäisessä esimerkissä taulukossa on kaksi riviä ja kummassakin yksi solu. Lisäsin esimerkkiin myös reunukset.

Solun 1 sisältö.
Solun 2 sisältö.
Esimerkki 2
<table summary="esimerkki taulukko 2">
	<tr>
		<td>Solun 1 sisältö.</td>
		<td>Solun 2 sisältö.</td>
	</tr>
</table>

Toisessa esimerkissä taulukossa on yksi rivi ja siinä kaksi solua. Lisäsin esimerkkiin myös reunukset.

Solun 1 sisältö. Solun 2 sisältö.

Cellpadding

Taulukon reunuksien ja sisällön väliin saadaan tyhjää tilaa cellpadding-attribuutilla. Attribuutin arvoksi annetaan luku pikseleinä. Parempi tapa on kuitenkin käyttää CSS:n padding-attribuuttia.

<table summary="esimerkki taulukko 3" cellpadding="10">
	<tr>
		<td>Solun 1 sisältö.</td>
		<td>Solun 2 sisältö.</td>
	</tr>
	<tr>
		<td>Solun 3 sisältö.</td>
		<td>Solun 4 sisältö.</td>
	</tr>
</table>
Esimerkki näyttää tältä
Solun 1 sisältö. Solun 2 sisältö.
Solun 3 sisältö. Solun 4 sisältö.

Cellspacing

Taulukon solujen väliin saadaan tyhjää tilaa cellspacing-attribuutilla. Attribuutin arvoksi annetaan luku pikseleinä.

<table summary="esimerkki taulukko 4" cellspacing="10">
	<tr>
		<td>Solun 1 sisältö.</td>
		<td>Solun 2 sisältö.</td>
	</tr>
	<tr>
		<td>Solun 3 sisältö.</td>
		<td>Solun 4 sisältö.</td>
	</tr>
</table>
Esimerkki näyttää tältä
Solun 1 sisältö. Solun 2 sisältö.
Solun 3 sisältö. Solun 4 sisältö.

Reunukset (border)

Taulukkoon voidaan tehdä reunukset border-attribuutilla. Tämä on kuitenkin vanha ja huono tapa. Arvo annetaan numeroina. Parempi tapa olisi käyttää CSS:ää, CSS -reunuksen tyylit.

<table summary="taulukko esimerkki 5" border="arvo">
	<tr>
		<td>Solun 1 sisältö</td>
	</tr>
</table>

Alla on esimerkki taulukosta, jossa reunukset on määritelty CSS:llä mustaksi. Reunuksen paksuudeksi on määritelty 3 pikseliä ja tyyliksi "viiva".

Solun 1 sisältö

Rowspan

Rowspan-attribuutilla voidaan tehdä taulukon solusta esimerkiksi kahden solun korkuinen.

<table border="1" summary="taulukko esimerkki 6">
	<tr>
		<td>Ensimmäinen solu</td>
		<td rowspan="2">Toinen solu. Tämä solu on ensimmäisen ja kolmannen solun korkuinen.</td>
	</tr>
	<tr>
		<td>Kolmas solu.</td>
	</tr>
</table>
Ensimmäinen solu Toinen solu. Tämä solu on ensimmäisen ja kolmannen solun korkuinen.
Kolmas solu.

Colspan

Colspan-attribuutilla voidaan tehdä taulukon solusta esimerkiksi kahden solun levyinen.

<table border="1" summary="taulukko esimerkki 7">
	<tr>
		<td colspan="2">Ensimmäinen solu. Tämä solu on kahden solun levyinen.</td>
	</tr>
	<tr>
		<td>Toinen solu</td>
		<td>Kolmas solu</td>
	</tr>
</table>
Ensimmäinen solu. Tämä solu on kahden solun levyinen.
Toinen solu Kolmas solu