Nämä elementit ovat aina pakollisia taulukkoja luotaessa, ellei muuta erikseen mainita.
Taulukko aloitetaan ja päätellään table-tagilla.
<table> </table>
Taulukkoon luodaan vaakarivi tagilla tr. Tagi tulee myös päättää!
<table>
<tr>
</tr>
</table>
Taulukkoon luodaan solu eli lokero tagilla td. Solut ovat aina rivin (tr) sisällä. Solujen määrää ei ole rajoitettu. Otsikkosolun luomiseen käytetään tagia th. Otsikkosolun teksti on keskitettyä ja lihavoitua, muuten se ei poikkea tavallisesta solusta.
Taulukossa ei tarvitse olla sekä tavallisia soluja että otsikkosoluja. Riittää, että toista esiintyy.
<table>
<tr>
<td>Solu 1</td>
<td>Solu 2</td>
<td>Solu 3</td>
<th>Otsikkosolu</th>
</tr>
</table>
Tämä attribuutti on suositeltavaa korvata CSS:n text-align -muotoilulla.
Align määrittää solun tekstin ja muun sisällön vaakasuuntaisen tasauksen.
Alignin arvoja voivat olla left (vasen), right (oikea), center (keskelle), justify (kumpaankin reunaan) ja char (merkin ympärille).
... <td align="top"> ...
Tämä attribuutti on suositeltavaa korvata CSS:n vertical-align -muotoilulla.
Valignin avulla määritetään solun sisällön sijainti pystysuunnassa. Arvoja voivat olla top (ylös), middle (keskelle), bottom (alas) ja baseline.
... <td valign="center"> ...
Tämä attribuutti on suositeltavaa korvata CSS:n border-spacing -muotoilulla.
Cellspacing on table-tagiin upotettava attribuutti, jonka avulla määritellään pikseleissä, kuinka paljon tyhjää tilaa solujen väliin jää.
<table cellspacing="4">
...
Tämä attribuutti on suositeltavaa korvata CSS:n padding-muotoilulla.
Cellpadding on table-tagiin upotettava attribuutti, jonka avulla määritetään pikseleissä, kuinka paljon tyhjää tilaa jätetään solun reunan ja solun sisällön (esim. teksti) väliin.
<table cellspacing="4" cellpadding="15">
...
Colspan on soluun upotettava attribuutti, jonka arvo kertoo, kuinka monen muun solun levyinen kyseinen solu on. Jos colspanin arvo on siis 2, kyseinen solu on sen kahden ala- tai yläpuolella olevan solun levyinen.
Mikäli colspanin arvo on 0, se yhdistää rivin kaikki solut.
<table>
<tr>
<td>Solu 4</td>
<td colspan="2">colspanin testausta</td>
</tr>
</table>
Rowspan-attribuutti kertoo, kuinka monen muun solun korkuinen kyseinen solu on. Jos rowspanin arvo on 2, kyseinen solu on kahden "kerroksen" korkuinen.
<table>
<tr>
<td>Solu 1</td>
<td>Solu 2</td>
<th>Otsikkosolu</th>
<td rowspan="2">rowspanin testausta</td>
</tr>
<tr>
<td>Solu 3</td>
<td colspan="2">colspanin testausta</td>
</tr>
</table>
Colgroup-elementillä voi määrittää rivien soluista pystysuuntaisia sarakkeita. Näin voidaan helposti liittää taulukon pystyriveille esimerkiksi CSS-muotoiluja.
Sarake-elementti colgroup tulee sijoittaa taulukkoon ennen varsinaista sisältöä mutta mahdollisen otsikon jälkeen. Colgroupin sisälle puolestaan merkitään col-elementillä sarakkeiden määrä. Jokainen col edustaa yhtä saraketta: ensimmäinen col taulukon rivien ensimmäistä saraketta, toinen taulukon rivin toista ja niin edelleen.
Alla olevassa esimerkissä sarakkeille on määritetty taustavärejä CSS:llä.
<table>
<colgroup>
<col style="background:yellow;" />
<col style="background:gray;" />
<col style="background:green;" />
<col style="background:blue;" />
</colgroup>
<tr>
<td>Solu 1</td>
<td>Solu 2</td>
<th>Otsikkosolu</th>
<td>Solu 4</td>
</tr>
<tr>
<td>Solu 1</td>
<td>Solu 2</td>
<td>Solu 3</td>
<td>Solu 4</td>
</tr>
<tr>
<td>Solu 3</td>
<td colspan="2">colspanin testausta</td>
<td>Solu 4</td>
</tr>
</table>
Yllä esitelty taulukko näyttää käytännössä tältä:
| Solu 1 | Solu 2 | Otsikkosolu | Solu 4 |
|---|---|---|---|
| Solu 1 | Solu 2 | Solu 3 | Solu 4 |
| Solu 3 | colspanin testausta | Solu 4 | |
Col-ryhmiin voi lisätä myös id:t, jolloin mahdolliset CSS-muotoilut voi tehdä vaikkapa ulkoisesta CSS-tiedostosta käsin.
... <colgroup> <col id="sarake_1" /> <col id="sarake_2" /> <col id="sarake_3" /> <col id="sarake_4" /> </colgroup> ...
Koko taulukolle saa halutessaan otsikon tagilla caption. Captionin sisältö sijoittuu selaimella katsottaessa koko taulukon ylle, ei sen sisään.
<table>
<caption>Kokeilemme taulukoiden tekoa</caption>
<tr>
<td>Solu 1</td>
<td>Solu 2</td>
<th>Otsikkosolu</th>
<td rowspan="2">rowspanin testausta</td>
</tr>
...
Thead-tagin avulla voidaan määrittää jokin rivi taulukon ylätunnisteeksi. Tfootilla voidaan merkitä jokin rivi taulukon alatunnisteeksi. Tfoot sijoitetaan theadin jälkeen.
<table> <caption>Kokeilemme taulukoiden tekoa</caption> <thead> <tr> <td>Ylätunniste 1</td> <td>Ylätunniste 2</td> <th>Ylätunniste 3</th> <td>Ylätunniste 4</td> </tr> </thead> <tfoot> <tr> <td colspan="0">Alatunniste</td> </tr> </tfoot> ...
Tbody-elementin avulla taulukon sisältö voidaan jakaa sopiviin osiin. Elementin sisällä voi olla useampia taulukkorivejä. Itse tbody sijoittuu aina ylä-ja alatunnisteen jälkeen.
...
<thead>
<tr>
<td>Ylätunniste 1</td>
<td>Ylätunniste 2</td>
<th>Ylätunniste 3</th>
<td>Ylätunniste 4</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="0">Alatunniste</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ensimmäinen osio</td>
<td>Ensimmäinen osio</td>
<td>Ensimmäinen osio</td>
<td>Ensimmäinen osio</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="3">Toinen osio</td>
<td>Toinen osio</td>
</tr>
<tr>
<td>Toinen osio</td>
<td colspan="3">Toinen osio</td>
</tr>
</tbody>
...
Taulukkoon voi määrittää reunuksen attribuutilla border. Reunuksen suuruus ilmoitetaan pikseleinä. Suositeltavampaa on kuitenkin määrittää reunus CSS:llä.
<table cellspacing="4" cellpadding="15" border="4">
...
| Menthal27:n kävijämäärät | |||
| Tiedot otettu Google Analyticsistä 28.4.2007. | |||
| Päiväys | Viikonpäivä | Kävijöitä | Latauksia |
|---|---|---|---|
| 26.2 | Maanantai | 269 | 1543 |
| 27.2 | Tiistai | 282 | 1444 |
| 28.2 | Keskiviikko | 289 | 1770 |
| 1.3 | Torstai | 256 | 1475 |
| 2.3 | Perjantai | 309 | 1748 |
| 3.3 | Lauantai | 303 | 2057 |
| 4.3 | Sunnuntai | 354 | |
Esimerkkitaulukon koodi:
<table border="3" cellpadding="3" cellspacing="3"> <caption>Tilastoja</caption> <colgroup> <col id="sarake1" style="#eee" /> <col id="sarake2" style="#ddd" /> <col id="sarake3" style="#ccc" /> <col id="sarake4" style="#bbb" /> </colgroup> <thead> <tr><td colspan="0">Menthal27:n kävijämäärät</td></tr> </thead> <tfoot> <tr><td colspan="0">Tiedot otettu Google Analyticsistä 28.4.2007.</td></tr> </tfoot> <tbody> <tr> <th>Päiväys</th> <th>Viikonpäivä</th> <th>Kävijöitä</th> <th>Latauksia</th> </tr> <tr> <td>26.2</td> <td>Maanantai</td> <td>269</td> <td>1543</td> </tr> <tr> <td>27.2</td> <td>Tiistai</td> <td>282</td> <td>1444</td> </tr> <tr> <td>28.2</td> <td>Keskiviikko</td> <td>289</td> <td>1770</td> </tr> <tr> <td>1.3</td> <td>Torstai</td> <td>256</td> <td>1475</td> </tr> <tr> <td>2.3</td> <td>Perjantai</td> <td>309</td> <td>1748</td> </tr> <tr> <td>3.3</td> <td>Lauantai</td> <td>303</td> <td rowspan="2">2057</td> </tr> <tr> <td>4.3</td> <td>Sunnuntai</td> <td>354</td> </tr> </tbody> </table>
Ainakin Internet Explorer 6 näyttää automaattisesti taulukon sisällä olevan tekstin huomattavasti tavallista suurempana. Muut yleiset selaimet, kuten Opera ja Mozilla Frefox, näyttävät tekstin normaalin kokoisena. Taulukon sisällä oleva teksti on siis oletuksena IE 6:lla eri kokoista kuin muilla selaimilla.
Ongelman voi ratkaista määrittämällä CSS:n avulla taulukoiden solujen (<td>) fontin kooksi esimerkiksi 1 em tai 100 %. Tällöin teksti on samankokoista kuin muulla sivulla.