HTMLi kursuse 4.2 osa konspekt - Tabelid

Postiuse enda võid leida siit.

Lihtsamad tabelid

<table> element

<table> defineerib tabeli. Tabeli kohustslikud lapselemendid on <tr> ning <th> ja/või <td> (ilma nendeta ei ole tabelil suurt mõtet).

Rohelisega ja paksuga märgitud tähendab praegust käsitlevat elementi

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

<caption> element

<caption> defineerib tabeli üldpealkirja. <caption> peab tulema kohe pärast <table> algusmärgendit ning tabelis tohib olla ainult üks <caption> element.

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

<tr> element

<tr> (tr - table row) tähistab tabeli rida. <tr> peab tulema pärast <caption> või <colgroup> elementi. Kui sektsioonielemendid on defineeritud, peab <tr> nende sees olema.

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

<td> element

<td> (td - table data) tähistab ühte tabeli lahtrit. Selle sisse käib tavaliselt tekst. <td> elementi kujutatakse kui regulaarse tekstina, mis asetseb tabeli lahtri vasakus pooles

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

<th> element

<th> (th - table cell header) tähistab ühte tabeli pealkirja lahtrit. Kujutatakse tavaliselt boldina ja tabeli lahtri keskel asetseva tekstina.

Parameetrid:
<th> elemendile on kolm iseloomuliku parameetrit:

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

Keerulisemad tabelid

<th> ja <td> on kaks ühist atribuuti, mis aitavad keerulisemaid tabeleid luua.

Need atribuudid on rowspan="number" ja colspan="number"

rowspan ja colspan "sulatavad" kokku read (rowspan) või tulbad (colspan).

Et sulatamine oleks edukas eeldavad rowspan ja colspan, et neist järgnevad lahtrid oleks tühjad. See tähendab, et lahtrid ei tohiks HTMLis olla defineeritud.

rowspan sulatab ridu kokku ülevalt alla ja colspan vasakult paremale. Atribuutide väärtusest sõltub mitu rida/tulpa nad kokku sulatavad ja väärtus ei tohiks olla suurem kui tabeli tulpade/reade arv.

Kasutus:
<table>
  <tr>
    <td>Minul pole ühtegi span atribuuti</td>
    <td rowspan="2">Minul on rowspan. Mina sulatan alumise "tühja lahtri".</td>
  </tr>
  <tr>
    <td>Minul pole ühtegi span atribuuti. Mina tekitan enda kõrvale "tühja lahtri".</td>
  </tr>
  <tr>
    <td>Minul on colspan atribuut. Ma ka tekitan endale kõrvale "tühja lahtri", mille ma ära sulatan.</td>
  </tr>
</table>

Näide:

Minul pole ühtegi span atribuuti Minul on rowspan. Mina sulatan alumise "tühja lahtri".
Minul pole ühtegi span atribuuti. Mina tekitan enda kõrvale "tühja lahtri".
Minul on colspan atribuut. Ma ka tekitan endale kõrvale "tühja lahtri", mille ma ära sulatan.

Tabeli sektsioonielemendid

Tabeli sektsioonielemendid on <thead>, <tbody> ja <tfoot>. Need aitavad jaotada tabeli sektsioonideks, millel igalühel on teatud ülesanne.

Kõik sektsioonielemendid peavad tulema pärast <caption> ja/või <colgroup> elementi. Sektsioonielementide sees peavad käima <tr>.

<thead> element

<thead> (thead - table head) tähistab tabeli päise osa. Siia sisse käivad tavaliselt tabeli pealkirja lahtrid (ehk tulpi seletavad pealkirjad) ning muud olulist, mis annavad edasi infot tabeli kohta.

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <thead>
    <tr>
      <th>Söögikord</th>
      <th>Söök</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hommikusöök</td>
      <td>Whiskas pakitoit</td>
    </tr>
    <tr>
      <td>Lõunasöök</td>
      <td>Kanasüdamed</td>
    </tr>
    <tr>
      <td>Õhtusöök</td>
      <td>Kuivtoit</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Kokkuvõte</strong></td>
      <td>Minu kass nälga ei jää</td>
    </tr>
  </tfoot>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit
Kokkuvõtvalt Minu kass nälga ei jää

<tbody> element

<tbody> (tbody - table body) tähistab tabeli keha osa ehk põhisisu. Siia sisse käivad tavaliselt realsed tabeli andmed ja muud, mis soenduvad kõik sisuga.

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <thead>
    <tr>
      <th>Söögikord</th>
      <th>Söök</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hommikusöök</td>
      <td>Whiskas pakitoit</td>
    </tr>
    <tr>
      <td>Lõunasöök</td>
      <td>Kanasüdamed</td>
    </tr>
    <tr>
      <td>Õhtusöök</td>
      <td>Kuivtoit</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Kokkuvõte</strong></td>
      <td>Minu kass nälga ei jää</td>
    </tr>
  </tfoot>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit
Kokkuvõtvalt Minu kass nälga ei jää

<tfoot> element

<tfoot> (tfoot - table footer) tähistab tabeli alumist osa ehk kokkuvõtvat sisu. Siia sisse käivad tavaliselt kokkuvõtvad ja ka üldistavad andmed.

Kasutus:
<table>
  <caption>Minu kassimenüü</caption>
  <thead>
    <tr>
      <th>Söögikord</th>
      <th>Söök</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hommikusöök</td>
      <td>Whiskas pakitoit</td>
    </tr>
    <tr>
      <td>Lõunasöök</td>
      <td>Kanasüdamed</td>
    </tr>
    <tr>
      <td>Õhtusöök</td>
      <td>Kuivtoit</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Kokkuvõte</strong></td>
      <td>Minu kass nälga ei jää</td>
    </tr>
  </tfoot>
</table>

Näide (koos piirjoontega):

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit
Kokkuvõtvalt Minu kass nälga ei jää

Tabelite kujundamine

Et tabeleid disainida tuleb kasutada CSSi.

Siin konspektis sellest ma nii pikalt ei räägi kui postituses. Täpsemalt teada saamiseks vaadake postitust.

<colgroup> element

<colgroup> (colgroup - column group) defineerib ära, et järgmisena tuleb kujundamisselement. Kohustuslik lapselement (ehk kujundamiselement) on sellel <col>.

Kasutus:

<table>
  <caption>Minu kassimenüü</caption>
  <colgroup>
    <col style="background-color: #e57373;" />
  </colgroup>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide:

Minu kassimenüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

NB! Punaseks muudab ühe tabeli poole <col> element, mitte <colgroup>. <colgroup> lihtsalt ütleb brauserile, et järgneb disainielement.


<col> element

<col> (col - column) kujundab tervet tulpa.

Parameetrid:
<col> on üks atribuut, mis vajab mainimist. See on style="CSSi stiil" atribuut (mis tegelikult on globaalne ehk kõikidel elementidel on see olemas).

Tavaliselt kujundab style elementi ise, aga <col> elemendis, muudab see hoopis tabeli tulpade kujundust

Kasutus:

<table>
  <caption>Minu kassimenüü</caption>
  <colgroup>
    <col style="background-color: #e57373;" />
  </colgroup>
  <tr>
    <th>Söögikord</th>
    <th>Söök</th>
  </tr>
  <tr>
    <td>Hommikusöök</td>
    <td>Whiskas pakitoit</td>
  </tr>
  <tr>
    <td>Lõunasöök</td>
    <td>Kanasüdamed</td>
  </tr>
  <tr>
    <td>Õhtusöök</td>
    <td>Kuivtoit</td>
  </tr>
</table>

Näide:

Minu kassimenüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

Mõlemal elemendil <colgroup> ja ka <col> on üks ühine atribuut ja see on span="number", mis valib mitu tulpa (töötab nagu colspan, aga ainult stiilidega) ja kujundab neid.

Tabelitele äärte lisamine

Originaalselt ei ole tabelitel ühtegi stiili, vaid tabel on lihtsalt korrapäraselt paika pandud tekst.

Ilma stiilita (originaalne) tabel

Minu kassimenüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

Nüüd et tabelile tuleks natukene stiili ja ka ääred, siis tuleb kasutada CSSi.

Kastutus:
<style>
  table, tr, th, td{
    border: 1px solid black;
    padding: 10px;
  }
  table{
    border-collapse: collapse;
    width: 100%;
  }
</style>

Näide:

Minu kassi menüü
Söögikord Söök
Hommikusöök Whiskas pakitoit
Lõunasöök Kanasüdamed
Õhtusöök Kuivtoit

Et ka sina saaksid enda veebilehele äärtega tabeli, siis lihtsalt kopeeri "Kasutus" tekst ja sisesta oma veebilehe lähtekoodi enne <body> elementi.