Taulukoiden käsittely HTML:ssä

Nyt opimme tekemään taulukoita HTML:ssä. Luulen, että tiedät mitä taulukko on tavallisessa elämässä - se on joukko rivejä ja sarakkeita, joiden leikkauskohdassa sijaitsevat solut.

HTML:ssä taulukot luodaan samankaltaisella periaatteella. Siellä on myös sarakkeita ja rivejä soluineen, kuitenkin HTML-taulukoiden koodi voi ensi silmäyksellä vaikuttaa epätavalliselta: taulukot luodaan riveittäin - ensin ensimmäinen rivi, sitten toinen ja niin edelleen.

Taulukon koodilla on jäykkä rakenne: pääasiallinen on table -tagi, jonka sisällä täytyy olla tr -tagit, jotka luovat taulukon rivit, ja niiden sisällä - td -tagit, joita luovat solut. table -tagi voi sisältää border -attribuutin, joka asettaa reunuksen taulukolle ja sen soluille.

Tehdään esimerkkinä taulukko, jossa on kolme riviä ja kolme solua kussakin rivissä:

<table border="1">
	<tr>
		<td>sol 1</td>
		<td>sol 2</td>
		<td>sol 3</td>
	</tr>
	<tr>
		<td>sol 4</td>
		<td>sol 5</td>
		<td>sol 6</td>
	</tr>
	<tr>
		<td>sol 7</td>
		<td>sol 8</td>
		<td>sol 9</td>
	</tr>
</table>

Toista alla oleva esimerkki: