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 vsebinoborder-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
celica 1 | celica 2 | celica 3 |
celica 4 | celica 5 | celica 6 |
Tabela ima lastnost caption-side: bottom
celica 1 | celica 2 | celica 3 |
celica 4 | celica 5 | celica 6 |