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>