XHTML: Taulukko 2008-01-31 23:36

Taulukon rakenne on XHTML-elementeistä monimutkaisin. Elementin sisään merkitään vähintäänkin taulukon otsikko, taulukon rivit, sekä solut rivien sisälle.

Taulukko <table>...</table>

Taulukon rakenne saattaa aluksi olla vaikeampi hahmottaa.

<table>
  <caption>Nelikenttä</caption>
  <tr> <td></td>   <th>A</th>  <th>B</th>   </tr>
  <tr> <th>A</th>  <td>AA</td> <td>AB</td>  </tr>
  <tr> <th>B</th>  <td>BA</td> <td>BB</td>  </tr>
</table>

• Koko taulukko merkitään table-elementiksi.
• Taulukon otsikko annetaan caption-elementissä.
• Taulukon jokainen rivi merkataan tr-elementiksi (table row) (vrt. li-elementti listoissa).
• Rivien sisälle merkitään erikseen otsikot ja arvosolut:
  • otsikkosolut th-elementeiksi (table heading).
  • arvoja sisältävä solut td-elementeiksi (table data).

Attribuutit

Taulukkoon voidaan liittää useita attribuutteja, joista alla muutamia:

table-elementtiin liitettäviä attribuutteja:

summary

Tekstitiivistelmä taulukosta

th- ja td-elementteihin liitettäviä attribuutteja:

colspan

td-elementin kattama alue sarakkeina (yhdistää soluja oikealta)

rowspan

td-elementin korkeus riveinä (yhdistää soluja alhaalta)

Taulukon sarakkeiden ryhmittely <colgroup>...</colgroup>

Mikäli sarakkeille halutaan antaa erilaisia ulkoasumuotoiluja, esimerkiksi vasen sarake lihavoituna, se toteutetaan caption-elementin jälkeen sijoitettavassa colgroup-elementissä. caption-elementin sisälle sijoitetaan tyhjiä col-elementtejä sarakkeiden määrän verran, ja col-elementeille annetaan id tai class -attribuutit.

  <caption>Ostokset</caption>
  <colgroup>
    <col id="sarake1" />
    <col id="sarake2" />
    <col id="sarake3" />
    <col id="sarake4" />
  </colgroup>
  <tr><th>Tuote</th>   <th>Paino (kg)</th><th>Hinta (€/kg)</th><th>Hinta (€)</th></tr>
  <tr><th>Omena</th>   <td>0,500</td>     <td>4,00</td>         <td>2,00</td></tr>
  <tr><th>Banaani</th> <td>0,400</td>     <td>2,00</td>         <td>0,80</td></tr>
  <tr><th>Päärynä</th> <td>0,200</td>     <td>6,00</td>         <td>1,20</td></tr>
  <tr><th>Peruna</th>  <td>1,000</td>     <td>0,80</td>         <td>0,80</td></tr>
  <tr><th>Yhteensä</th><td colspan="2"></td>                     <td>4,80</td></tr>
</table>

Taulukkoa käytettiin aiemmin myös koko sivun asettelun toteuttamiseksi. Käytä kuitenkin table-elementtiä vain sellaisten elementtien merkkaamiseksi jotka aidosti ovat rakenteeltaan taulukoita. Koko sivun laajuisissa asetteluissa käytetään div-elementeille tehtäviä CSS-määrittelyjä.