Korištenje stilova u tablicama

Tablice su neizbježan dio HTML-a i stalno su nam potrebne. Koriste se i u dizajnerske svrhe kao i za tablični prikaz podataka što je i njihova osnovna namjena. Bilo kako bilo ne moramo koristiti predefinirani izgled tablica i zašto ih ne urediti kada već imamo tu mogućnost. Atributi koji nam stoje na raspolaganju, između ostalih, su:

1. border-width
2. border-style
3. border-color
4. border
5. height
6. width
7. float
8. clear

Border-width određuje debljinu ruba tablice. Moguće ključne riječi su thin, medium thick i none. Naravno ako izaberemo none u tablici nećemo vidjeti nikakav rub.

Border-style određuje stil prikaza ruba tablice. Ovdje imamo puno više opcija i ključnih riječi pa ćemo ih samo nabrojati, a u primjeru kasnije vidjeti njihovu upotrebu. Stil može biti none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Border-color određuje boju ruba tablice. Možemo definirati i boju za svaku pojedinu stranu tablice upotrebljavajući elemente border-top-color, border-left-color, border-bottom-color, border-right-color.

Height i width određuju širinu i visinu tablice.

Atribut float smješta element lijevo ili desno i oko njega stavlja tekst. Za razliku od float, clear atribut ne dopušta da se tekst smjesti oko elementa u tablici. I jedan i drugi mogu imati vrijednost left, right i none.

Sada ćemo napraviti primjer korištenja stilova opisanih iznad. U ovom primjeru su stilovi pisani za svaki tag tablice. Puno jednostavnije i vizualno pregledniji način zapisa ovih stilova je ako napravimo klase za tagove table, tr i td. Nakon definiranja klasa, tagove tablice samo referiramo prema tim klasama što je puno zgodnije i preporučljivije.

<table style="color:505050;width:400px;border: 1px solid #6699cc;border-collapse:collapse"> <tr style="height:20px"> <td style="border-bottom:2px solid;background-color: #a8a8a8;font-size: 11px; text-align: center;color: #404040;" colspan="2"> Stiliziranu tablicu je mnogo ljepše vidjeti </td> </tr> <tr style="height:20px"> <td style="font-size: 11px;text-align: center; color: #404040;border-bottom: 1px dotted #6699CC;border-right: 1px dotted #6699cc;"> Vrijednost: </td> <td style="font-size: 11px;text-align: center;color: #404040; border-bottom: 1px dotted #6699CC;"> 10000$ </td> </tr> <tr style="height:20px"> <td style="font-size: 11px;text-align: center;color: #404040; border-bottom: 1px dotted #6699CC;border-right: 1px solid #6699cc;"> Uplata: </td> <td style="font-size: 11px; text-align: center;color: #404040;border-bottom: 1px dotted #6699CC;"> 2000$ </td> </tr> <tr style="height:20px"> <td style="font-size: 11px;text-align: center;color: #404040; border-bottom: 1px dotted #6699CC;border-right: 1px dotted #6699cc;"> Ukupno: </td> <td style="font-size: 11px;text-align: center;color: #404040; border-bottom: 1px dotted #6699CC;"> 2000$ </td> </tr> </table>

Stiliziranu tablicu je mnogo ljepše vidjeti
Vrijednost:	10000$
Uplata:	2000$
Ukupno:	2000$

Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!

Autor: Vedran

Datum objave: 21.01.2008

Za vas smo izdvojili:

■  Izmjena stila scroolbar-a
■  CSS-om do balona za komentare
■  Stilovi fontova
■  CSS stranica fiksne širine
■  Zaobljeni rubovi bez slika

Zadnjih 5 članaka

■  Lozinke, lozinke …
■  Kako prebaciti PDF u Word dokument
■  Kako postaviti stranicu na Internet
■  Cyclic Redundancy Check error
■  Riješite se Antivirus 2009 - rogue programa

KOMENTARI:

Nema još ni jednog komentara.

Samo registrirani korisnici mogu komentirati.