CSS Tabelid
CSS tabeli omadused võimaldavad määrata tabeli välimust
Näited
Tabeli välimus.
Selles näites demonstreeritakse, kuidas kujundada tabeli välimust.
Tühjad lahtrid.
Selles näites demonstreeritakse, kuidas kujutada tühje lahtreid tabelis.
Distants tabelis.
Selles näites demonstreeritakse, kuidas distantseerida tabeli lahtreid.
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 |
