HTML ja CSS algajatele (Osa 07): Tabelid (01)

Tabelid on üsna keerulised struktuurid, mis koosnevad ridadest ja veergudest. Tabelite välise põhiraami moodustab alati table-element.

<table>
…
</table>

Selle elemendi sees toimub tegelik tabeli definitsioon. Soovitatav on tabeli loomise ajal HTML-is määrata sellele raam. Nii saate paremini aru, kuidas read ja veerud täpselt kulgevad. Selleks määrake avavale <table> atribuudi-väärtus-kombinatsioon border="1". (Märkus, et HTML-is border atribuuti ei tohiks kasutada. Selle asemel tuleks kasutada vastavaid CSS omadusi. Sellest siiski hiljem rohkem).

<table border="1">
…
</table>

Järgmine samm on tabeliridade määratlemine. Seda tehakse tr elemendi abil.

<table border="1">
   <tr></tr>
</table>

Kuid see pole veel soovitud väljundini viinud. Järgmisena peate määratlema veerud. Seda tehakse veel kord td elemendi abil.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Nüüd saate määratleda esimese tabelisisu. Selle määratlete <td> ja </td> vahel.

<table border="1">
   <tr>
      <td&gt>Sisu 1</td>
   </tr>
</table>

Nüüd tasub vaadata tulemust veebibrauseris.

Vaatamata sellele pole see eriti muljetavaldav, kuna tabel koosneb hetkel ainult ühest lahtrist. Võite nüüd lisada veel ühe veeru. Selleks kasutage taas td elementi. Veenduge, et määratlete selle tr elemendi sees.

<table border="1">
   <tr>
      <td>Sisu 1</td>
      <td>Sisu 2</td>
   </tr>
</table>

Siin on taas pilk tulemusele.

Lisaridade lisamiseks tabelisse tuleb luua lihtsalt uus tr element, kus seejärel määratlevad soovitud td elemendid.

Siin on sellele näide:

<table border="1">
   <tr>
      <td>Sisu 1</td>
      <td>Sisu 2</td>
   </tr>
   <tr>
      <td>Sisu 3</td>
      <td>Sisu 4</td>
   </tr>
</table>

Veebibrauseris tulemuse vaatamine annab järgmise tulemuse:





Nii saate luua ka ulatuslikke tabeleid.

Päise, Keha ja Jala määratlemine

Tabeleid saab jagada loogilistesse osadesse. See tähendab päise, ühe või mitme andmeala ning jala osa. Järgmine näide näitab, kuidas see võiks välja näha:

<table border="1">
  <thead>
    <tr>
      <th&gt>Väljumine</th>
      <th&gt>Saabumine</th>
      <th&gt>Perroon</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>München</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Ja siin on tulemus veebibrauseris:





Jaotus mainitud valdkondadeks ei paku ilmselgelt visuaalset efekti. Tekib muidugi küsimus: miks siis peaks vaeva nägema nende valdkondade määratlemisega? Selleks on kaks head põhjust:

• CSS abil saab soovi korral erinevalt vormindada erinevaid valdkondi.

• Trükised pikkadest tabelitest võivad brauserid korduvalt kopeerida tabeli päist ja jalga iga lehe jaoks.

Tabelipäist määratletakse <thead> abil. Sellele järgnevad tabeli read, mis kuuluvad päise valdkonda. Ärge unustage sulgeda päise osa </thead>.

<tfoot>. Sellele võivad järgneda uuesti üks või mitu rida, mis kuuluvad jala valdkonda. Tabeli jalga sulgeme </tfoot> abil.

Tabelikeha ise määratakse tbody elemendi sees. See tbody võib esineda mitu korda. Iga tabelikeha lõpetatakse vastava </tbody> abil.

Miks peaks näiteks tabelis kasutama mitut tbody elementi? Hea näide sellest võiks olla Bundesligi tabel. Sellises tabelis on tavaliselt mitu valdkonda.

• Meister

• Meistrite liiga osalejad

• Meistrite liiga kvalifitseeruja

• Euroopa liiga osalejad

• Hall keskmine

• Relegationi koht

• Langijad

Iga neist valdkondadest võiks panna eraldi tbody elemendi sisse ja siis neid CSS abil erinevalt kujundada.

Veergude eeldefineerimine

Kuidas tabel brauserites kuvatakse, sõltub loomulikult ennekõike olemasolevast ridade ja veergude arvust. Tabeli kuvamine brauseris pole siiski sugugi lihtne. Tegelikult peab brauser kogu tabeli kõigepealt sisse lugema, enne kui ta seda kuvada saab. Eriti väga mahukate tabelite puhul võib see muidugi võtta teatud aja. Sellest probleemist saab mööda minna, teatades brauserile otse, mitmest veerust tabel tegelikult koosneb.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Pealkiri</th>
     <th>Hind</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Peaaegu kõigest lühike lugu</td>
     <td>29,95 eurot</td>
   </tr>
 </table>

colgroup abil algab veergude eeldefineerimine. Pidage meeles, et enamik varem HTML-versioonides saadaval olnud colgroup atribuutidest pole HTML5-s enam lubatud. Neist lubatud on nüüd ainult span atribuut. Selle väärtusena oodatakse spanilt tabelis sisalduvate veergude arvu.

colgroup element paikneb otse sissejuhatava <table> järel. Veerud ise määratletakse üksikute col elementidega.

colgroup kasutamisel on põhimõtteliselt kaks võimalust:

• Koos span atribuudiga

• Ilma span atribuudita

Kui te ei kasuta span atribuuti, tuleb iga veeru jaoks, millele veergude grupp peaks laienema, määratleda eraldi col element. Olge teadlik, et col on iseseisev element.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Pealkiri</th>
     <th>Hind</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Peaaegu kõigest lühike lugu</td>
     <td>29,95 eurot</td>
   </tr>
 </table>

Olemas on ka segavorm.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

See on alati kasulik, kui eraldi tuleb määratleda üks veerg, kuid soovitakse teisi rühmitada.