Oblikovanje tabel s CSS

Tabele lahko s CSS precej natančno oblikujemo. Določimo lahko robove, velikost, poravnavo, barve, notranje odmike, razdaljo med celicami in položaj opisa tabele. Pri tem pa ni pomemben le videz, ampak tudi preglednost in smiselna raba tabele za prikaz podatkov.

Osnovna pravila

• Tabelo uporabljamo za podatke, ki sodijo v vrstice in stolpce.
• Naslovne celice praviloma označimo z elementom th, navadne pa z elementom td.
• Pri oblikovanju tabele pogosto določimo robove, širino, poravnavo, barve in notranje odmike.
• Opis tabele je smiselno zapisati z elementom caption.
• Pri preglednosti je pogosto koristna uporaba lastnosti border-collapse: collapse.

Obrobe tabel

Obrobe tabelam in celicam v CSS določimo z lastnostjo border. Robove lahko določimo tabeli, naslovnim celicam th in navadnim celicam td.

<table>
   <tr>
      <th>naslov 1</th>
      <th>naslov 2</th>
      <th>naslov 3</th>
   </tr>
   <tr>
      <td>celica 1</td>
      <td>celica 2</td>
      <td>celica 3</td>
   </tr>
   <tr>
      <td>celica 4</td>
      <td>celica 5</td>
      <td>celica 6</td>
   </tr>
</table>

table, th, td { border: 2px solid #FBA517; }

Višina in širina tabel

Višino in širino tabel, vrstic in celic določamo predvsem z lastnostima height in width. V sodobni praksi se najpogosteje uporabljajo enote, kot so px, em, rem in %.

table { 
   border: 2px solid #FBA517;
   width: 100%;
}
th { 
   border: 2px solid #FBA517;
   height: 30px;
}
td { 
   border: 2px solid #FBA517;
}

Poravnava besedila v tabelah

Besedilo v celicah tabel poravnamo predvsem z lastnostima:

• text-align – vodoravna poravnava besedila
• vertical-align – navpična poravnava vsebine znotraj celice

Pri lastnosti text-align v tabelah najpogosteje uporabljamo vrednosti left, right, center in justify. Uporabimo lahko tudi logični vrednosti start in end, ki se prilagodita smeri pisanja besedila.

Pri lastnosti vertical-align v tabelah najpogosteje uporabljamo vrednosti top, middle in bottom. Možne so tudi druge vrednosti, na primer baseline, vendar se v tabelah najpogosteje uporabljajo prve tri.

table { 
   border: 2px solid #FBA517;
   width: 100%;
}
th { 
   border: 2px solid #FBA517;
   height: 40px;
   vertical-align: bottom;
}
td { 
   border: 2px solid #FBA517;
   text-align: left;
}

Barve tabel

Barve tabel, vrstic in celic določimo predvsem z lastnostma:

• background-color – barva ozadja,
• color – barva besedila.

table { 
   border: 2px solid #FBA517;
   width: 100%;
}
th { 
   border: 2px solid #FBA517;
   background-color: #FBB025;
   color: #FFFFFF;
}
td { 
   border: 2px solid #FBA517;
   background-color: #F8E9C2;
}

Odmiki v tabelah

Pri tabelah razlikujemo:

• padding – prostor med vsebino celice in njenim robom,
• border-spacing – prostor med sosednjimi celicami, kadar tabela uporablja border-collapse: separate.

table { 
   border: 2px solid #FBA517;
   width: 100%;
}
th, td { 
   border: 2px solid #FBA517;
   padding: 15px 0 5px 20px;
}

table-layout

Z lastnostjo table-layout vplivamo na način, kako brskalnik izračuna širine stolpcev:

• auto – širine stolpcev so odvisne tudi od vsebine celic,
• fixed – širine stolpcev so določene hitreje in bolj predvidljivo, vendar mora biti širina tabele določena.

<p>Tabela ima lastnost <em>table-layout: <strong>auto</strong></em></p>
<table class="auto">
   <tr>
      <td>celica 1 celica 1 celica 1</td>
      <td>celica 2</td>
   </tr>
</table>

<p>Tabela ima lastnost <em>table-layout: <strong>fixed</strong></em></p>
<table class="fixed">
   <tr>
      <td>celica 1 celica 1 celica 1</td>
      <td>celica 2</td>
   </tr>
</table>

.auto { table-layout: auto; width: 100%; }
.fixed { table-layout: fixed; width: 100%; }

border-collapse

Z lastnostjo border-collapse določimo, ali bo vsaka celica tabele imela svoje robove ali pa si bosta sosednji celici delili skupen rob.

<table class="separate">
   <tr>
      <td>celica 1</td>
      <td>celica 2</td>
      <td>celica 3</td>
   </tr>
   <tr>
      <td>celica 4</td>
      <td>celica 5</td>
      <td>celica 6</td>
   </tr>
</table>

.separate { border-collapse: separate; }
.collapse { border-collapse: collapse; }

border-spacing

Kadar ima tabela lastnost border-collapse: separate, lahko z lastnostjo border-spacing določimo razdaljo med sosednjimi celicami. Če navedemo eno vrednost, velja ta za vodoravno in navpično smer. Če navedemo dve vrednosti, prva določa vodoravno, druga pa navpično razdaljo med celicami.

.spacing0 { 
   border-collapse: separate;
   background-color: #E8E8E8;
   border-spacing: 0; 
}
.spacing3 { 
   border-collapse: separate;
   background-color: #E8E8E8;
   border-spacing: 3px; 
}

empty-cells

Če tabela uporablja border-collapse: separate, lahko z lastnostjo empty-cells določimo, ali naj se robovi in ozadje prikažejo tudi pri praznih celicah.

.hide { 
   border-collapse: separate;
   empty-cells: hide;
}
.show { 
   border-collapse: separate;
   empty-cells: show;
}

caption-side

Z lastnostjo caption-side določimo, na kateri strani tabele bo prikazan opis tabele.

.top { caption-side: top; }
.bottom { caption-side: bottom; }

Priporočila

• Za preglednejši prikaz tabel pogosto uporabi border-collapse: collapse.
• Naslovne celice vizualno loči od navadnih celic z barvo, debelino pisave ali ozadjem.
• V celicah uporabi dovolj velik padding, da besedilo ni stisnjeno ob robove.
• Opis tabele dodaj z elementom caption, kadar pomaga pri razumevanju podatkov.
• Pri tabelah z več podatki poskrbi za dober kontrast in jasno poravnavo vsebine.

Pogoste napake

• Tabela se uporablja za postavitev strani namesto za prikaz podatkov.
• V tabeli ni jasne razlike med naslovnimi in navadnimi celicami.
• Lastnost border-spacing se uporablja skupaj z border-collapse: collapse.
• Pri vrednosti table-layout: fixed ni določena širina tabele.
• Prazne celice se oblikujejo brez razumevanja vpliva lastnosti empty-cells.