Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Tabele v HTML

Tabele v HTML uporabimo takrat, ko želimo podatke prikazati v obliki vrstic in stolpcev. Primerne so za urnike, cenike, rezultate, primerjave in druge preglednice s podatki. Tabel ne uporabljamo za razporejanje celotne postavitve spletne strani, saj je za to namenjen CSS.

Pomni: Tabela v HTML je namenjena prikazu podatkov v vrsticah in stolpcih. Za razporeditev celotne strani uporabljamo druge elemente in CSS.

Osnovna pravila

  • Tabelo določimo z elementom <table>.
  • Vrstice tabele zapisujemo z elementom <tr>.
  • Podatkovne celice zapisujemo z elementom <td>.
  • Naslovne celice zapisujemo z elementom <th>.
  • Pri večjih tabelah lahko uporabimo tudi <caption>, <thead>, <tbody> in <tfoot>.

Primerjave

Osnovna zgradba tabele

Tabelo določimo z elementom <table>. Znotraj nje vrstice označimo z elementom <tr>. Posamezne celice podatkov označimo z elementom <td>, naslovne celice pa z elementom <th>.

Naslovne celice običajno uporabimo v prvi vrstici ali v prvem stolpcu, ker pojasnjujejo pomen podatkov v tabeli.

Primer preproste tabele z dvema stolpcema:

<table>
  <tr>
    <th>Mesec</th>
    <th>Prihranek</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>50 &euro;</td>
  </tr>
</table>
Mesec Prihranek
Januar 50 €

Pozor: Naslovne celice <th> niso isto kot navadne podatkovne celice <td>. Uporabimo jih tam, kjer celica pojasnjuje pomen drugih celic v vrstici ali stolpcu.

Napis tabele

Če želimo tabeli dodati naslov oziroma opis, lahko uporabimo element <caption>. Ta bralcem pove, kaj tabela prikazuje, in izboljša razumljivost tabele.

<table>
  <caption>Mesečni prihranki</caption>
  <tr>
    <th>Mesec</th>
    <th>Prihranek</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>50 &euro;</td>
  </tr>
</table>
Mesečni prihranki
Mesec Prihranek
Januar 50 €

Skupine vrstic

Pri večjih tabelah lahko vrstice razdelimo v logične skupine z elementi <thead>, <tbody> in <tfoot>. Tako je zgradba tabele preglednejša in bolj pomenska. Element <thead> označuje glavo tabele, <tbody> glavni del podatkov, <tfoot> pa nogo tabele.

<table>
  <caption>Prodaja</caption>
  <thead>
    <tr>
      <th>Izdelek</th>
      <th>Količina</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zvezek</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Svinčnik</td>
      <td>8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Skupaj</td>
      <td>20</td>
    </tr>
  </tfoot>
</table>

Pri sodobnem HTML za videz tabel ne uporabljamo zastarelih atributov, kot so border, cellpadding, cellspacing, width ali bgcolor. Videz tabele, robove, odmike, širino in barve določamo s CSS. V učnih primerih pa lahko atribut border vseeno uporabimo, da je zgradba tabele bolj razvidna.

Združevanje celic

Združevanje celic po stolpcih

Več sosednjih celic lahko združimo v eno večjo celico. Če želimo, da se celica razteza čez več stolpcev, uporabimo atribut colspan.

Pri tem moramo v isti vrstici zapisati ustrezno manjše število celic, saj združena celica že zasede prostor več stolpcev.

Primer združevanja celic po stolpcih:

<table>
  <tr>
    <th colspan="3">Naslovna vrstica</th>
  </tr>
  <tr>
    <td>1. celica</td>
    <td>2. celica</td>
    <td>3. celica</td>
  </tr>
</table>
Naslovna vrstica
1. celica 2. celica 3. celica

Združevanje celic po vrsticah

Če želimo, da se celica razteza čez več vrstic, uporabimo atribut rowspan. Taka celica zasede prostor tudi v naslednjih vrsticah, zato moramo tam zapisati manj celic. Atributa colspan in rowspan uporabljamo na celicah <td> ali <th>.

Pri pisanju naslednjih vrstic preskočimo mesto, ki ga že zaseda združena celica iz prejšnje vrstice.

Primer združevanja celic po vrsticah:

<table>
  <tr>
    <td>1. celica, 1. vrstica</td>
    <td>2. celica, 1. vrstica</td>
    <td>3. celica, 1. vrstica</td>
  </tr>
  <tr>
    <td rowspan="2">1. celica, 2. vrstica</td>
    <td>2. celica, 2. vrstica</td>
    <td>3. celica, 2. vrstica</td>
  </tr>
  <tr>
    <td>1. celica, 3. vrstica</td>
    <td>2. celica, 3. vrstica</td>
  </tr>
</table>
1. celica, 1. vrstica 2. celica, 1. vrstica 3. celica, 1. vrstica
1. celica, 2. vrstica 2. celica, 2. vrstica 3. celica, 2. vrstica
1. celica, 3. vrstica 2. celica, 3. vrstica

Pomenska raba tabel

Tabele uporabljamo za podatke, ki imajo smiselno razmerje med vrsticami in stolpci. Za splošno razporeditev elementov na strani, na primer za glavo, meni, vsebino in nogo, pa uporabljamo CSS.

Dobro je, da pri tabelah uporabljamo naslovne celice <th> tam, kjer imajo podatki naslov, saj s tem izboljšamo preglednost in dostopnost vsebine. Pri zahtevnejših tabelah lahko dodatno pomagata tudi scope ali povezovanje naslovov in celic, vendar je za osnovno rabo najpomembnejša pravilna zgradba tabele.

Če tabela prikazuje podatke, naj bo čim bolj pregledna. Uporabimo smiselne naslove stolpcev, po potrebi dodamo <caption> in pazimo, da celice združujemo le takrat, ko to res izboljša razumevanje podatkov.

Priporočila

  • Tabele uporabljaj za prikaz podatkov v vrsticah in stolpcih.
  • Za naslovne celice uporabljaj <th>, ne pa navadnih celic <td>.
  • Pri pomembnih tabelah dodaj element <caption>.
  • Pri večjih tabelah po potrebi uporabi <thead>, <tbody> in <tfoot>.
  • Celice združuj z atributoma colspan in rowspan samo takrat, ko to res izboljša preglednost podatkov.

Pogoste napake

  • Tabela se uporablja za postavitev cele strani namesto za podatke.
  • Naslovne celice niso zapisane z elementom <th>.
  • Pri združevanju celic se ne prilagodi število drugih celic v vrstici.
  • Videz tabele se določa z zastarelimi atributi namesto s CSS.
  • Tabela nima jasnega naslova ali pregledne strukture, čeprav bi to pomagalo pri razumevanju podatkov.
Nazaj
Naprej