Rychlá příručka - CSS - Tabulky

Kaskádové styly tagu <table>

Kaskádových stylů pro tag <table> je opravdu hodně. Jako první si můžeme uvést kaskádový styl text-align, který nahrazuje parametr align a zarovnává všechen obsah celé tabulky. Za hodnotu má slovo left, center nebo right. Další kaskádový styl, kaskádový styl width, nahrazuje parametr width (nastavuje tedy šířku tabulky) a za hodnotu má číslo s jednotkou. Parametry cellspacing a cellpadding kaskádovými styly nahradit nelze. Parametry bgcolor a background můžeme nahradit jedním kaskádovým stylem background, protože tím můžeme nastavit barvu, ale i obrázek na pozadí. Parametr border můžeme nahradit kaskádovým stylem border, ten nastavuje rámeček a rovnou i barvu rámečku, takže nahrazuje i parametry bordercolorlight, bordercolordark a bordercolor. Dále můžeme použít kaskádové styly font-weight, font-style, text-decoration, font-family, font-size a color, které nám pomohou upravit text v tabulce.

Kaskádové styly tagů <tr> a <td>

Kaskádových stylů pro tagy <tr> a <td> je také hodně. Nejdříve se pojďme podívat na kaskádové styly pro tag <tr>. Kaskádový styl text-align, který nám nahradí parametr align, zarovná obsah všech buněk na řádku. Parametr bgcolor můžeme nahradit kaskádovým stylem background, kterým nastavíme pozadí všech buněk na řádku. Většinou se ale kaskádové styly nepoužívají pro tag <tr>, ale pouze pro tagy <table>, jimiž nastavíme vzhled celé tabulky, a <td>, kterými nastavíme konkrétní buňky v tabulce. Pro tag <td> máme kaskádové styly stejné s kaskádovými styly pro tag <table>. Můžeme tedy použít font-weight, font-style, text-decoration, font-family, font-size, color a text-align, které upravují text v buňce. Dále můžeme použít pro vzhled buňky kaskádové styly background a border.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com