HTML Taulukot

HTML-taulukko (table) koostuu riveistä (rows) ja sarakkeista (columns), joita voidaan käyttää tietojen esittämiseen järjestetyssä muodossa. Taulukko koostuu** <table>** -tagista (taulukkotagi), joka sisältää yhden tai useamman <tr> -tagin (rivitagi) ja jokainen rivi sisältää yhden tai useamman <td> -tagin (saraketagi), jotka sisältävät itse tietoja. Tässä on esimerkki taulukon luomisesta HTML:ssä:

1<table>
2  <tr>
3    <th>Nimi</th>
4    <th>Osoite</th>
5    <th>Puhelin</th>
6  </tr>
7  <tr>
8    <td>Jukka Virtanen</td>
9    <td>Katu 1, 00100 Helsinki</td>
10    <td>010 123 4567</td>
11  </tr>
12  <tr>
13    <td>Maija Meikäläinen</td>
14    <td>Katu 2, 00100 Helsinki</td>
15    <td>010 234 5678</td>
16  </tr>
17</table>
18

Tässä esimerkissä taulukko sisältää kolme saraketta, jotka ovat "Nimi", "Osoite" ja "Puhelin". Ensimmäinen rivi on taulukon otsikkorivi ja se sisältää <th> -tagit (otsikkotagit), joita käytetään otsikon esittämiseen. Seuraavat rivit ovat taulukon tietorivejä ja ne sisältävät** <td>** -tagit (sisältötagit), jotka esittävät tietoja.

thead, tbody ja kumppanit

On myös muita tagien yhdistelmiä, joita voidaan käyttää taulukon luomiseen, kuten <thead>, <tbody>,** <tfoot>** ja <caption> -tagit. Näitä käytetään yleensä taulukon rakenteen määrittämiseen ja otsikon sekä alaotsikon lisäämiseen. Tässä on esimerkki käyttämällä <thead> -tagia:

1<table>
2  <thead>
3    <tr>
4      <th>Nimi</th>
5      <th>Osoite</th>
6      <th>Puhelin</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr>
11      <td>Jukka Virtanen</td>
12      <td>Katu 1, 00100 Helsinki</td>
13      <td>010 123 4567</td>
14    </tr>
15    <tr>
16      <td>Maija Meikäläinen</td>
17      <td>Katu 2, 00100 Helsinki</td>
18      <td>010 234 5678</td>
19    </tr>
20  </tbody>
21</table>
22

Tässä esimerkissä <thead> -tagi sisältää otsikkorivin ja <tbody> -tagi sisältää tietorivit. Tämä rakenteen määrittäminen auttaa sivun lukijaa (erityisesti ruudunlukijoita) ymmärtämään taulukon rakenteen paremmin.