Site hosted by Angelfire.com: Build your free website today!

CSS Tabelid

CSS

CSS tabeli omadused võimaldavad määrata tabeli välimust

Näited

 red_dot.gif Tabeli välimus.
Selles näites demonstreeritakse, kuidas kujundada tabeli välimust.

 red_dot.gif Tühjad lahtrid.
Selles näites demonstreeritakse, kuidas kujutada tühje lahtreid tabelis.

 red_dot.gif Distants tabelis.
Selles näites demonstreeritakse, kuidas distantseerida tabeli lahtreid.

 red_dot.gif Tabeli pealkirja positsioneerimine.
Selles näites demonstreeritakse, kuidas positsioneerimisega, muudetakse tabeli pealkirja asendit.

Tabeli koostamine - lihtne tabel

CSS tabelite loomise eelduseks on see, et sul oleks Html tabelitest ettekujutus olemas.
Tavalist Html'i kasutades kuvab brauser tabeleid üpris isikupäratult ja üksluiselt. Puuduvad äärised ja värvid ning ainus efekt on tulba pealkirja teksti kuvamine paksult ja keskel.

Allpool olevas näites on kahetulbaline tabel kus "thead" ja "tbody" sektsioon on määratud:

<table>
<thead>
<tr><th>Nimi</th>
<th>Amet</th>
</tr>
</thead>
<tbody>
<tr><td>JaanTamm</td>
<td>Veebidisainer</td>
</tr>
<tr><td>Mart Kask</td>
<td>Autojuht</td>
</tr>
<tr>
<td>Sass</td>
<td>Muidu tore mees</td>
</tr>
<tr>
<td>Juss</td>
<td>Tühikargaja</td>
</tr>
</tbody>
</table>

Tulemus peaks olema selline:

Nimi Amet
JaanTamm Veebidisainer
Mart Kask Autojuht
Sass Muidu tore mees
Juss Tühikargaja

Tabeli lahtri ääris

Kõigepealt määrame tabeli äärised. Kui see atribuut märkida otse tabelisse siis hakkab see kehtima kõigi tabeli osade kohta: S.t. et kõik read, sektsioonid ja tulbad omavad äärist.
CSS'i abil saab määrata tabeli iga osa eraldi. Juhul kui CSS'is määrata ainult tabeli atribuut siis jäävad lahtrid ilma ääriseta.
Selleks, et määrata lahtrite äärised, tuleb kirjutada nii:

td, th { border: 1px #ccc solid; }

Tulemus peaks olema selline:

Nimi Amet
Jaan Tamm Veebidisainer
Mart Kask Autojuht
Sass Muidu tore mees
Juss Tühikargaja

Nagu tulemusest näha, on iga lahtri ümber raam. Ka nii võib kuid tavaliselt nii ei tehta. Selle asemel liidetakse lahtrite äärised omavahel, kasutades selleks "collapse" atribuuti:

Ühendame lahtrite äärised - "collapse" atribuut

Lahtrite ühendamiseks omavahel, kirjutame nii:

table { border-collapse: collapse; }

Tulemus peaks olema selline:

Nimi Amet
Jaan Tamm Veebidisainer
Mart Kask Autojuht
Sass Muidu tore mees
Juss Tühikargaja

Lisame värvi

Värvidega saame muuta tabeli kergemini loetavaks. Nüüd muutuvad "thead" ja "tbody" märgised oluliseks sest lisades stiililehele vastavad väärtused saame muuta tabeli pealkirja ja sisu taustavärve korraga. Ilma "thead" ja "tbody" märgiseta tuleks iga lahter ja rida määrata eraldi. Kui sa soovid, et iga rida oleks erinevat värvi siis muutub asi keerulisemaks kuid siiski on see võimalik.

Lisame tabeli pealkirjale tausta-värvi.

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }

Tulemus peaks olema selline:

Nimi Amet
Jaan Tamm Veebidisainer
Mart Kask Autojuht
Sass Muidu tore mees
Juss Tühikargaja

Anname värvi ka tabeli sisule.

table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }
tbody { background: #7fffd4; } 

Tulemus peaks olema selline:

Nimi Amet
Jaan Tamm Veebidisainer
Mart Kask Autojuht
Sass Muidu tore mees
Juss Tühikargaja

Kasulikud Näpunäited

Mõnikord on vajadus muuta tavaline Html dokument Xhtml dokumendiks. Või liita see Css'ga. Sellisel juhul on hea ajutiselt stiliseerida dokument tabelina. Nii saab kergesti leheküljest ülevaate. Ehk teisisõnu, on visuaalselt näha kuidas elemendid paiknevad.

Proovida võiks sellist stiili:

table { border: solid 2px red; margin : 2px; }
td { border: dotted 1px blue; padding : 2px; }

Sellisel juhul saame tulemuseks lehekülje kus välisääred on tähistatud peenikese punase joonega ning sisemised ääred on tähistatud sinise punktiir-joonega.

Niisugust moodust kasutades, pole vaja oma Html koodi täiesti ümber kirjutada sest ajutine stiil annab ülevaate veebilehe laotusest.

Omadus Kirjeldus Väärtus
border-collapse Määrab koha kus raamistus kustub v. muutub tavaliseks Html tabeliks collapse
separate
border-spacing Määrab tabeli lahtrite distantsi pikkus (px,cm)
caption-side Määratleb tabeli pealkirja asendi top
bottom
left
right
empty-cells Määratleb tühja lahtri show
hide
table-layout Määratleb tabeli lahtrite, ridade ja tulpade asetuse auto
fixed