Oblikovanje tabel s CSS

Obrobe tabel

Obrobe tabelam v CSS določimo z lastnostjo border.

<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>
   <tr>
      <td> celica 7 </td>
      <td> celica 8 </td>
      <td> celica 9 </td>
   </tr>
   <tr>
      <td> celica 10 </td>
      <td> celica 11 </td>
      <td> celica 12 </td>
   </tr>
</table>

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

Višina in širina tabel

Višino in širino tabel, vrstic in celic določimo z lastnostima:

• height: višina v mm, cm, in, pt, pc, em, ex, px ali v %
• width: širina v mm, cm, in, pt, pc, em, ex, px ali v %

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

Poravnava besedil v tabelah

Besedilo v tabelah, vrsticah in celicah določimo z lastnostima:

• text-align: vodoravna poravnava besedila
• vertical-align: navpična poravnava besedila

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

Barve tabel

Barvo tabel, vrstic in celic določimo z lastnostjo:

• background-color: barva ozadja
• color: barva besedila

table { 
   border: 2px solid #FBA517;
   width: 100%;
}
th { 
   border: 2px solid #FBA517;
   height: 30px;
   vertical-align: bottom;
   background-color: #FBB025;
   color: #FFFFFF;
}
td { 
   border: 2px solid #FBA517;
   text-align: left;
   background-color: #F8E9C2;
}

Odmiki v tabelah

Prostor med celicami in prostor med vsebino celice in njenim robom določimo z lastnostima:

• padding: prostor med obrobo tabele in vsebino
• border-spacing: prostor med celicami

table { 
   border: 2px solid #FBA517;
   width: 100%;
}
th { 
   border: 2px solid #FBA517;
   height: 30px;
   vertical-align: bottom;
   background-color: #FBB025;
   color: #FFFFFF;
}
td { 
   border: 2px solid #FBA517;
   text-align: left;
   background-color: #F8E9C2;
   padding:15px 0 5px 20px;
}

table-layout

Z lastnostjo table-layout vplivamo na postopek, kako brskalnik izračuna širino tabele:

• hitrejši postopek ne upošteva vsebine posameznih celic, pač pa samo podane širine stolpcev, robov in prostora med celicami
• ko upošteva še vsebino celic, se lahko zgodi, da mora med prikazovanjem tabele popravljati širine stolpcev in s tem tudi tabele

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

.auto { table-layout: auto }
.fixed { table-layout: fixed }

border-collapse

Z lastnostjo border-collapse izberemo ali bo vsaka celica tabele imela svoje robove ali pa bosta sosednji celici imeli skupen rob.

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

.separate { border-collapse: separate }

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

.collapse { border-collapse: collapse }

border-spacing

Kadar ima vsaka celica svoje robove, lahko z lastnostjo border-spacing določimo, koliko praznega prostora naj bo med sosednjima celicama. Če navedemo eno vrednost, ta določa prostor okoli celice, v primeru, ko pa navedemo dve vrednosti, pa prva vrednost določa prazen prostor levo in desno od celice, druga pa nad in pod celico.

<p>Tabela ima lastnosti:<br />
<em>border-collapse: separate; background-color: #E8E8E8;<br /> 
border-spacing: <strong>0px</strong></em></p>
<table class="spacing0">
   <tr>
      <td> celica 1 </td>
      <td> celica 2 </td>
      <td> celica 3 </td>
   </tr>
      <td> celica 4 </td>
      <td> celica 5 </td>
      <td> celica 6 <lt;/td>
   </tr>
</table>
<br />
<p>Tabela ima lastnosti:<br />
<em>border-collapse: separate; background-color: #E8E8E8;<br /> 
border-spacing: <strong>3px</strong></em></p>
<table class="spacing3">
   <tr>
      <td> celica 1 </td>
      <td> celica 2 </td>
      <td> celica 3 </td>
   </tr>
      <td> celica 4 </td>
      <td> celica 5 </td>
      <td> celica 6 </td>
   </tr>
</table>
...

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

empty-cells

Če ima vsaka celica svoje robove, lahko z lastnostjo empty-cells določimo, ali naj se te prikažejo tudi ko je vsebina celice prazna.

<p>Tabela ima lastnost <em>empty-cells: <strong>hide</strong></em>
<table class="hide">
   <tr>
      <td> celica 1 </td>
      <td> </td>
      <td> celica 3 </td>
   </tr>
      <td> celica 4 </td>
      <td> celica 5 </td>
      <td> </td>
   </tr>
</table>
...

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

caption-side

Z lastnostjo caption-side določimo, kje bo opis tabele.

<p>Tabela ima lastnost <em>caption-side: <strong>top</strong></em>
<table class="top">
   <caption>Opis tabele</caption>
   <tr>
      <td> celica 1 </td>
      <td> celica 2 </td>
      <td> celica 3 </td>
   </tr>
      <td> celica 4 </td>
      <td> celica 5 </td>
      <td> celica 6 </td>
   </tr>
</table>
...

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