HTML/Tabelid

Tabelite kasutusvõimalus on HTMLis olemas juba pikka aega. Lisaks oma algsele otstarbele - esitada tabelikujul infot - said tabelimärgendid endale peagi ka teise otstarbe, millest samuti allpool juttu tuleb.

Üldpõhimõtted

Tabelimärgendite esmaseks kasutusalaks oli muidugi mõista tabelkujul info kuvamine. Samas on HTMLi üks peamisi puudusi olnud ekraanielementide paigutusvõimaluste piiratus - nii leidsidki kavalad veebisepad lahenduse tabelielementide kasutamises. Kogu ekraanipilt kujundati nähtamatu tabelina ning kõik lehe elemendid paigutati selle lahtritesse. Ehkki see ei ole kaugeltki parim lahendus, ei ole isegi CSSi kasutuselevõtt suutnud tabelite kasutamist kujundusvõttena lõplikult kõrvale tõrjuda. Pikka aega oli probleemiks ka puuetega veebikasutajate raske ligipääs tabelikujul infole, tänased ekraanilugejad on seda küll lugema õppinud, kuid ikkagi ei ole tabelipõhine lehekülg kuigi hea variant - kui on võimalik seda vältida, siis tulekski nii teha.

Lihtsal kujul luuakse tabel nii:

<table>
  <caption>Tabeli pealkiri</caption> (pealkiri tabeli ülaservas)
  <tr>                               (rea algus)
    <th>1. veeru pealkiri</th>       (veergude pealkirjad)
    <th>2. veeru pealkiri</th>
    ...
  </tr>
  <tr>
    <td> Lahter </td>                 (lahter)
    ...                                                
  </tr>                               (rea lõpp)
  <tr>                                (uus rida)
    ...
  </tr>
</table>

Tähelepanuks: ehkki tabeli (caption) ja veergude (th) pealkirjad ei ole rangelt kohustuslikud, oleks neid reaalsete tabelite puhul (mitte tabeli kasutamisel lehe kujundamiseks nagu eespool mainitud) alati mõistlik kasutada - see suurendab muuhulgas ka lehe ligipääsetavust puuetega kasutajatele, samuti mitmesuguste alternatiivseadmete pruukijatele.

Märkus: nagu eespool nimistute juures, tasub ka tabelite HTML-i kirjutamisel kasutada treppimist - see hõlbustab märgatavalt tabeli koodis orienteerumist.

Seega sisestatakse tabeli väärtused üldiselt ridupidi:

Näiteks osa korvpallimeeskonna andmeid sisaldavast tabelist (allpool on toodud ka tulemus):

<table border="1">
  <caption>Kükametsa Kalevi meeskond</caption>
  <tr>
    <th>Nimi</th>
    <th>Pikkus</th>
    <th>Kaal </th>
    <th>Jalanumber</th>
  </tr>
  <tr>
    <td>Ants</td>
    <td>185</td>
    <td>88</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Kalle</td>
    <td>194</td>
    <td>94</td>
    <td>44</td>
  </tr>
  <tr> 
    <td>Mikk</td>
    <td>177</td>
    <td>78</td>
    <td>42</td>
  </tr>
</table>

Pealkirjadena võib defineerida ka ridade alguslahtreid. Näiteks nii:

<table border="1">
  <tr>
    <th>Nimi:</th>
    <td>Jüri Jurakas</td>
  </tr>
  <tr>
    <th>Telefon:</th>
    <td>610 2030</td>
  </tr>
  <tr>
    <th>Mobiil:</th>
    <td>050 12 345</td>
  </tr>
</table>

Veel üks märkus: tühja lahtri jätmiseks tabelisse ei piisa reeglina konstruktsioonist <td></td> - kui tabelis kasutatakse vahejooni, jääb ära ka lahtri piirjoon ning tulemus ei näe ilus välja (v.a. erijuhud, mil see võib olla taotluslik). Piirjoonega tühi lahter saavutatakse spetsiaalse tühikumärgi kasutamisega (vt. ka erisümbolite teemat eespool): <td> </td>

Eri suurusega lahtrid

Vahel on vaja tabelisse paigutada ka infot, mis võtab enda alla mitu lahtrit. Selleks kasutatakse lahtrimärgendis rowspan- ja colspan-parameetreid. Näiteks võime eelmise näite baasil saada sellised kujud:

<table border="1">
  <tr>
    <th rowspan="2">Jüri Jurakas</th>
    <td>610 2030</td>
  </tr>
  <tr>
    <td>050 12 345</td>
  </tr>
</table>

<table border="1">
  <tr>
  <th colspan="2">Jüri Jurakas</th>
  </tr>
  <tr>
    <td>610 2030</td>
    <td>050 12 345</td>
  </tr>
</table>

Tabel kui konteiner - muud märgendid tabeli sees

Selles alapunktis toodud põhimõtted ongi muuhulgas aluseks ka tabelimärgendite kasutamisele lehekülgede kujundamisel - praktika, mis CSS-i arenguga loodetavasti pikapeale taandub. Vahel aga on vaja ka "päris" tabelisse muud lisada, seepärast vaatleme neid tehnikaid ka siin (lõppude lõpuks on tegemist standardiga tunnustatud võtetega). Üldiselt on tabeli lahtrites lubatud kasutada kõiki standardseid märgendeid, kaasa arvatud tabelid (tabel tabelis). Järgmises näites on toodud suur tabel, mille lahtrid sisaldavad kõiki seniõpitud tähtsamaid märgendeid:

<table border="1">
<caption>üks suur ja segane tabel</caption>
<tr>
  <td>
      <p>Tekstilõik</p>
      <p>Teine tekstilõik</p>
  </td>
  <td>
    <p><a href="http://www.neti.ee" title="Neti">Viide 
neti.ee'le</a></p>
  </td>
 </tr>
 <tr>
  <td>
      <p>Siin on pilt:</p>
      <p><img src="julla.png" alt="" longdesc="" width="60" 
height="40"></p>
  </td>
  <td>Siin on teine tabel:
   <table border="1">
   <tr>
     <td>1</td>
     <td>2</td>
   </tr>
   <tr>
     <td>3</td>
     <td>4</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>Siin on järjestamata nimekiri:
   <ul>
    <li>luik</li>
    <li>haug</li>
    <li>vähk</li>
   </ul>
  </td>
  <td>Siin on järjestatud nimekiri:
   <ol>
    <li>luik</li>
    <li>haug</li>
    <li>vähk</li>
   </ol>
  </td>
</tr>
</table>

Tulemus näeb välja nii:

Teeme ruumi

Tabel on oma tavakujul üsna tihedalt kokkusurutud, vahel on aga tarvis jätta "hingamisruumi" nii lahtrite sisse kui ka nende vahele. Selleks kasutatakse cellpadding- ja cellspacing-parameetreid.

Järgnev näide illustreerib võimalust jätta vaba ruumi lahtri sisu ja serva vahele:

<p>Tavaline tabel:</p>
<table border="1">
<tr>
  <td>Esimene</td>
  <td>rida</td>
</tr>
<tr>
  <td>Teine</td>
  <td>rida</td>
</tr>
</table>
<p><em>cellpadding=15</em>-parameetriga:</p>
<table border="1" cellpadding="15">
<tr>
  <td>Esimene</td>
  <td>rida</td>
</tr>
<tr>
  <td>Teine</td>
  <td>rida</td>
</tr>
</table>

Tulemus näeb välja nii:

PILT

Samalaadne on võimalus jätta vahesid lahtrite vahele:

<p>Tavaline tabel:</p>
<table border="1">
<tr>
  <td>Esimene</td>
  <td>rida</td>
</tr>
<tr>
  <td>Teine</td>
  <td>rida</td>
</tr>
</table>
<p><em>cellspacing=15</em>-parameetriga:</p>
<table border="1" cellspacing="10">
<tr>
  <td>Esimene</td>
  <td>rida</td>
</tr>
<tr>
  <td>Teine</td>
  <td>rida</td>
</tr>
</table>

Tulemus on selline:

PILT

Veel...

Siin peatükis tuleb kirjeldada veel järgnevaid elemente:

thead
tfoot
tbody
col
colgroup

Ja järgmisi atribuute:

<table summary=""
<col span=""
<col width=""
<td headers=""
<td scope=""
<td abbr=""
<td axis=""