Kompleksnejše HTML tabele

Poleg osnovnih oznak za tabele lahko v HTML uporabimo tudi dodatne oznake, s katerimi tabelo opišemo natančneje in pregledneje. Takšne oznake so <caption>, <colgroup>, <col>, <thead>, <tbody> in <tfoot>.

Z njimi določimo naslov tabele, skupine stolpcev ter razdelitev tabele na glavo, telo in nogo. Takšna zgradba izboljša preglednost kode, pomaga pri oblikovanju in pripomore k pomensko jasnejši tabeli.

Pomni: V tabeli je priporočljivo uporabiti oznako <caption>, kadar želimo tabeli dodati jasen naslov ali kratek opis.

Opis tabele z oznako `<caption>`

Oznaka <caption> določa naslov oziroma opis tabele. Zapišemo jo neposredno znotraj oznake <table>, običajno na začetku tabele. Naslov pomaga bralcu razumeti, kaj tabela prikazuje.

<table>
  <caption>Rezultati izpita</caption>
</table>

Pozor: Oznaka <caption> opisuje celotno tabelo. Ne nadomešča naslovnih celic <th>, ki pojasnjujejo posamezne stolpce ali vrstice.

Skupine stolpcev: `<colgroup>` in `<col>`

Z oznakama <colgroup> in <col> lahko določimo skupine stolpcev oziroma posamezne stolpce. Pogosto ju uporabimo, kadar želimo več stolpcev obravnavati skupaj, na primer pri oblikovanju ali logični razdelitvi tabele.

Oznaka <colgroup> določa skupino stolpcev, oznaka <col> pa posamezen stolpec oziroma več stolpcev, če uporabimo atribut span.

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

V tem primeru prvi <col> predstavlja en stolpec, drugi pa z atributom span="2" predstavlja dva zaporedna stolpca.

Glava, telo in noga tabele

Pri zahtevnejših tabelah lahko vrstice razdelimo na tri večje sklope:

<thead> – glava tabele,
<tbody> – telo tabele,
<tfoot> – noga tabele.

Takšna razdelitev izboljša preglednost kode in olajša oblikovanje tabele s CSS. Glava navadno vsebuje naslovne vrstice, telo glavne podatke, noga pa povzetke, rezultate ali dodatne zaključne podatke.

Pri zapisu tabele je priporočljivo upoštevati tudi pravilen vrstni red teh oznak: najprej <caption>, nato po potrebi <colgroup>, za njim <thead>, nato <tbody> in na koncu <tfoot>.

Celoten primer zahtevnejše tabele

<table border="1">
  <caption><em>Rezultati izpita</em></caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <colgroup span="4"></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>

  <thead>
    <tr>
      <th colspan="3">Dijak</th>
      <th colspan="4">Test</th>
      <th rowspan="2">Točke</th>
      <th rowspan="2">Ocena</th>
    </tr>
    <tr>
      <th>EMŠO</th>
      <th>Priimek</th>
      <th>Ime</th>
      <th>1.</th>
      <th>2.</th>
      <th>3.</th>
      <th>4.</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>0712998500123</td>
      <td>Novak</td>
      <td>Janez</td>
      <td>56</td>
      <td>73</td>
      <td>49</td>
      <td>82</td>
      <td>260</td>
      <td><b>3</b></td>
    </tr>
    <tr>
      <td>1206999505354</td>
      <td>Petrnel</td>
      <td>Maja</td>
      <td>83</td>
      <td>95</td>
      <td>92</td>
      <td>87</td>
      <td>357</td>
      <td><b>4</b></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>Max.</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
      <td>400</td>
      <td><b>5</b></td>
    </tr>
  </tfoot>
</table>

*Rezultati izpita*
Dijak			Test				Točke	Ocena
EMŠO	Priimek	Ime	1.	2.	3.	4.	Točke	Ocena
0712998500123	Novak	Janez	56	73	49	82	260	3
1206999505354	Petrnel	Maja	83	95	92	87	357	4
		Max.	100	100	100	100	400	5

Oznake <thead>, <tbody> in <tfoot> niso vedno nujne, so pa zelo uporabne pri večjih in preglednejših tabelah.

Priporočila

Pri večjih tabelah uporabi <caption>, da je namen tabele jasen.
Za preglednejšo razdelitev podatkov uporabi <thead>, <tbody> in <tfoot>.
Oznaki <colgroup> in <col> uporabi takrat, ko želiš smiselno razdeliti stolpce ali jih skupno oblikovati.
Pri zapisovanju tabele upoštevaj pravilen vrstni red dodatnih oznak.

Pogoste napake

Oznaka <caption> je zamenjana z naslovno vrstico tabele.
Razdelitev na <thead>, <tbody> in <tfoot> ni smiselna ali ni dosledna.
Oznaki <colgroup> in <col> sta uporabljeni brez jasnega namena.
Vrstni red dodatnih oznak v tabeli ni pravilen.

Nazaj

Naprej