Pokud chceme tabulky udělat atraktivnější nebo přehlednější,
můžeme změnit pozadí individuální buňky, řádky nebo celé tabulky. Ke
změně barvy pozadí slouží atribut bgcolor, který může obsahovat buď název
barvy nebo její kód v RGB notaci (stějně jako při určování barvy
pozadí celého dokumentu nebo barvy písma).
Pokud nastavíme barvu pozadí pro celou tabulku i pro jednotlivou
řádku (tr), má větší význam barva určená pro
řádku. Obdobně má největší váhu nastavení přímo u konkrétní buňky
(td nebo th).
Nastavení barev má několik praktických využití. Například dlouhé tabulky obsahující mnoho řádek mohou být nepřehledné. Čitelnost můžeme zvýšit tím, že řádky budou střídavě měnit barvu pozadí.
<table border="0" cellspacing="0" cellpadding="2"> <tr bgcolor="black"> <th width="100"><font color="white">Rok</font></th> <th width="100"><font color="white">Obrat A</font></th> <th width="100"><font color="white">Obrat B</font></th> </tr> <tr bgcolor="#c0c0c0"> <td align="center">1994</td> <td align="center">12,6 mil.</td> <td align="center">3,6 mil.</td> </tr> <tr bgcolor="#e0e0e0"> <td align="center">1995</td> <td align="center">11,7 mil.</td> <td align="center">5,9 mil.</td> </tr> <tr bgcolor="#c0c0c0"> <td align="center">1996</td> <td align="center">8,3 mil.</td> <td align="center">9,7 mil.</td> </tr> </table>
Důležité je při tomto postupu nastavit cellspacing na nulu, aby mezi řádky a
buňkami neprosvítalo pozadí stránky. U první řádky jsme pozadí
nastavili na černou barvu, museli jsme proto nastavit barvu písma na
bílou (pomocí font). Jak později uvidíme dají se
takovéto úpravy mnohem snáze udělat pomoci kaskádových stylů.
Další časté využití barvy pozadí je pro vytvoření tenkých
rámečků okolo jednotlivých buněk. Standardní rámečky vytvořené pomocí
atributu border moc elegance
nepobraly. Můžeme je však vypnout, nastavit barvu pozadí tabulky na
černou barvu (nebo nějakou jinou) a barvu jednotlivých buněk na
bílou. Mezi buňkami pak bude prosvítat černé pozadí tabulky –
pokud budou vzdálenosti mezi buňkami malé
(cellspacing="1") dostaneme tenké linky:
<table border="0" cellspacing="1" bgcolor="black"> <tr> <th bgcolor="white" width="100">Rok</th> <th bgcolor="white" width="100">Obrat A</th> <th bgcolor="white" width="100">Obrat B</th> </tr> <tr> <td bgcolor="white" align="center">1994</td> <td bgcolor="white" align="center">12,6 mil.</td> <td bgcolor="white" align="center">3,6 mil.</td> </tr> <tr> <td bgcolor="white" align="center">1995</td> <td bgcolor="white" align="center">11,7 mil.</td> <td bgcolor="white" align="center">5,9 mil.</td> </tr> <tr> <td bgcolor="white" align="center">1996</td> <td bgcolor="white" align="center">8,3 mil.</td> <td bgcolor="white" align="center">9,7 mil.</td> </tr> </table>
