Barva buněk

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>

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus