Tabelid

xhtmlTabelid on heaks mooduseks erinevat sorti andmete ja piltide süstematiseerimiseks, analüüsimiseks, paigutamiseks jne. Tabelitesse võib lisada ükskõik mida, mitte ainult teksti. Seepärast ei tasu arvata, et tabelid on mõttetud ja igavad.

XHTML

Tabeli loomine

tableTabeli loomiseks lisame tabeli luustikmärgendid <table>. Nende vahele lähevad esimesena tabeli ridade märgendid  <tr>(table row) ning “tr” märgendite vahele lähevad tabeli tulpade märgendid <td> (table data). Tabeli tulpe ja ridasid saab tabelisse lisada vastavalt oma soovile.

Lahtrite piirid, suurused, nende vahelised kaugused ja tabeli suurus

Tabeli ja selle lahtrite paksuse saab määrata atribuudiga “border”, mis lisatakse tabeli algmärgendisse. Piirjoone paksus määratakse pikslite arvuga.

cellpadTabeli pikkuse ja laiuse määrab algseadistuste järgi tabelis olevate objektide suurus. Kuid tabeli suurust ja laiust saab muuta ka vastavalt oma soovile. Selle jaoks lisame tabeli algmärgendisse atribuudid “width” (laius) ja “height” (pikkus). Atribuutidele saab väärtuse määrata nii pikslite arvuga kui ka protsendiga. Protsentide arv näitab, kui suurt pinda katab tabel veebilehe üldpinnast.

Kui me tahame, et lahtris oleval objektil oleks piisavalt ruumi lisame tabeli algmärgendisse “cellpading” atribuudi ja selle väärtuseks lahtri piiri kauguse lahtris olevast objektist pikslites.

Juhul kui tahame hoopis viia tabeli lahtrid üksteisest eemale kasutame “cellspacing” atribuuti. Selle atribuudi väärtus näitab kui kaugel on tabeli lahtrid üksteisest.

Tabeli pealkirjad

table2Tabeli pealkirjad on xhtml tabelites rasvases kirjas, lahtrite keskosas ja näevad üleüldse tähtsad välja. Selliste pealkirjade lisamiseks paneme tabeli esimesse ritta “th” (table header) märgendid, ning nende märgendite vahele sobiva pealkirja.

Tabeli lahtrite ühendamine

Tabeli lahtrite kokkulöömine on suhteliselt kasulik asi, ning selle tegemiseks tuleb kas tabeli rea atribuuti või tabeli tulba lahtrite ühendamiseks lisada vastavalt algmärgendisse “colspan” (column Span- tulbaühendus) Selle atribuudi väärtus näitab kui palju lahtreid omavahel ühendada.

colspan

CSS

Kogu tabeli vormistamine

Selleks, et anda kogu tabelile mõni kindel parameeter, tuleb stiililehte lisada tabeli märgend, ning looksulgude vahele omadused, mis mõjutavad kogu tabelit.

Tabeli lahtrite vormistamine

tabelstyleSelleks, et vormistada ühte rida või ühte tulpa tuleb css stiililehte lisada “td” ja “tr” märgendid ning muuta vastavad parameetrid.

Tabeli vormistamisel ei tasu unustada, et tabelile uut parameetrit määrates ei muutu vanad parameetrid, vaid lihtsalt lisanduvad uued. Lihtsamalt öeldes: kui tabelil on eelnevalt olemas paks piirjoon, siis tabelile hiljem värvi lisamisel ei kao see paks piirjoon ära, vaid paksu piirjoone sees on nüüd värvilise taustaga tabel.

Kirjuta kommentaar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Muuda )

Twitter picture

You are commenting using your Twitter account. Log Out / Muuda )

Facebook photo

You are commenting using your Facebook account. Log Out / Muuda )

Google+ photo

You are commenting using your Google+ account. Log Out / Muuda )

Connecting to %s