Načrtovanje in razvoj spletnih aplikacij

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 }
naslov 1 naslov 2 naslov 3
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6
celica 7 celica 8 celica 9
celica 10 celica 11 celica 12

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 }
naslov 1 naslov 2 naslov 3
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6
celica 7 celica 8 celica 9
celica 10 celica 11 celica 12

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;
}
naslov 1 naslov 2 naslov 3
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6
celica 7 celica 8 celica 9
celica 10 celica 11 celica 12

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;
}
naslov 1 naslov 2 naslov 3
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6
celica 7 celica 8 celica 9
celica 10 celica 11 celica 12

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;
}
naslov 1 naslov 2 naslov 3
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6
celica 7 celica 8 celica 9
celica 10 celica 11 celica 12

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
Vrednost Pomen
auto širina tabele je odvisna od vsebine celic
fixed širina tabele je neodvisna od vsebine celic, odvisna je samo od podane širine stolpcev, robov in prostora med celicami
initial ta vrednost naj bo privzeta
inherit  vrednost podeduje od nadrejenega elementa

 

<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 }

Tabela ima lastnost table-layout: auto

celica 1 celica 1 celica 2

Tabela ima lastnost table-layout: fixed

celica 1 celica 1 celica 2

border-collapse

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

Vrednost Pomen
separate vsaka celica ima svoje robove
collapse sosednji celici imata skupen rob
initial ta vrednost naj bo privzeta
inherit  vrednost podeduje od nadrejenega elementa

 

<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 }

Tabela ima lastnost border-collapse: separate

celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

<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 }

Tabela ima lastnost border-collapse: collapse

celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

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.

Vrednost Pomen
dolžina prazen prostor okoli celice v mm, cm, in, pt, pc, em, ex, px
dolžina dolžina prva vrednost določa prazen prostor levo in desno od celice, druga pa nad in pod celico v mm, cm, in, pt, pc, em, ex, px
initial ta vrednost naj bo privzeta
inherit  vrednost podeduje od nadrejenega elementa

 

<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; 
}
...

Tabela ima lastnosti:
border-collapse: separate; background-color: #E8E8E8;
border-spacing: 0px

celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

Tabela ima lastnosti:
border-collapse: separate; background-color: #E8E8E8;
border-spacing: 3px

celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

Tabela ima lastnosti:
border-collapse: separate; background-color: #E8E8E8;
border-spacing: 10px

celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

border-collapse: separate; background-color: #E8E8E8;
border-spacing: 5px 0px
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

Tabela ima lastnosti:
border-collapse: separate; background-color: #E8E8E8;
border-spacing: 20px 5px

celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

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.

Vrednost Pomen
hide prazne celice nimajo robov in ozadja
show tudi prazne celice imajo robove in ozadje
initial ta vrednost naj bo privzeta
inherit  vrednost podeduje od nadrejenega elementa

 

<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;
}

Tabela ima lastnost empty-cells: hide

celica 1 celica 3
celica 4 celica 5

Tabela ima lastnost empty-cells: show

celica 1 celica 3
celica 4 celica 5

caption-side

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

Vrednost Pomen
top opis tabele je nad tabelo
bottom opis tabele je pod tabelo
initial ta vrednost naj bo privzeta
inherit  vrednost podeduje od nadrejenega elementa

 

<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 }

Tabela ima lastnost caption-side: top

Opis tabele
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6

Tabela ima lastnost caption-side: bottom

Opis tabele
celica 1 celica 2 celica 3
celica 4 celica 5 celica 6