Skip to Content

Tvorba tabulek - 2.část

Tuto část začneme poněkud složitějším grafickým prvkem a tím je rámeček tabulky. Aby se rámeček vykreslil je třeba nadefinovat různé hodnoty. Tagu můžeme přiřadit např. velikost, styl a barvu rámečku.
table
{ border : 2px dashed red }
Hodnotu šíře rámečku vyjadřujeme buď slovy (thin, medium, thick), anebo jednotkami (1px, 2px..).

Rámečku přiřadíme barvu vložením označení hexadecimálního vyjádření barvy (#ff9966) nebo opět slovy (red, black...). Prostřední hodnota v příkladu je právě styl rámečku, která může nabývat hodnot: dotted, dashed, solid, double, groove (trojrozměrná drážka), ridge (trojrozměrná brázda), inset (trojrozměrný rámeček nasvícen zezdola), outset (trojrozměrný rámeček nasvícen zezhora).

Samozřejmě rámečky můžeme používat i u jednotlivých buněk. V této souvislosti se nám hodí další vlastnost a tou je podoba vykresleného rámečku: border-colapse s hodnotami separate či collapse.
Při zvolení první hodnoty se nám mohou rámečky oddělit i dotýkat, ale nemohou se překrývat. Hodnota collapse je jediný kvalitní způsob, jak celou mřížku tabulky udělat např. o šířce 1px. (Starší prohlížeče IE tuto hodnotu neznají, a proto se někdy přiřazuje zastaralý atribut cellspacing s hodnotou 0 značce table přímo ve zdrojovém dokumentu XHTML).

table
{ border: 1px solid black ;
border-collapse : collapse }
td
{ border: 1px solid black }

A jak popsat mechanismus, kdy se rámečky překrývají? Za prvé je třeba ujasnit si pár pravidel:

  • Absolutní přednost mají rámečky s hodnotou hidden (neviditelný rámeček).
  • V případě, že mají rámečky různou šířku, vykreslí se jako celý rámeček, jenž je širší.
  • Rámečky se stejnou šířkou se řadí stylově takto: double, solid, dashed, dotted, ridge, outset, grove, inset.
  • Další přidělení priority je podle elementů v tabulce: Na prvním místě je buňka, poté řádek, skupina řádků, sloupec, skupina sloupců, a poslední je orámování celé tabulky. (Bohužel v IE má například rámeček tabulky nejvyšší prioritu)
  • A posledním řazením je poloha elementu, jenž je vypsán jako první v dokumentu XHTML a hodnota rámečku none, který má prioritu nejnižší.

V případě odděleného rámečku tabulky a jejich částí je možné zapojit vlastnost border-spacing (mezera mezi okrajem tabulky a buňek) či empty-cells (vykreslení rámečku i bez obsahu). Obě vlastnosti nepodporuje IE6.

Jestliže chceme rozšířit buňku přes řádky či sloupce, volíme u značky td parametr rowspan či colspan. Př.

<table>
</tr>
<td>první</td>
<td>druhá</td>
<td>třetí</td>
</tr>
<tr>
<td colspan="3">rozšířená</td>
</tr>
</table>

CSS:
td
{border : 1px solid black}

Dále můžeme u tabulky a jejich částí vykreslovat pomocí stylů barvu jejich pozadí.

col
{background : yellow}

Pozadí buňky tak zde má přednost před pozadím řádku či sloupce a ty zase před pozadím celé tabulky.
A co zarovnávání obsahu tabulky? V tabulce budeme samozřejmě zarovnávat obsah buněk tabulky a k tomuto účelu nám poslouží známá vlastnost text-align s hodnotami left, right, center, justify (do bloku). Po vertikále zarovnáváme vlastností vertical-align, jejíž hodnoty jsou top, middle, bottom, baseline (tuto hodnotu podporuje jen IE).

A v neposlední řadě pár nápadů, jak tabulku vizuálně vylepšit. Můžeme například volit efekt střídajících se bílých a jinak barevných řádků (s barevností to nepřeháníme) tak, že každému lichému řádku přidělíme třídu, u které nastylujeme onu zvolenou barvu.
Dalším způsobem vylepšení tabulky je vložení malého obrázku, který se vyskládá například v hlavičce tabulky po celé ploše a tím nám jasně a esteticky oddělí obsah od hlavičky.
A jak na interaktivitu v tabulce pomocí CSS? Můžeme například použít pseudotřídu :hover, kterou změníme při najetí myši na řádek barvu pozadí. Bohužel tento efekt nebude fungovat u IE 6, jelikož tento prohlížeč nepodporuje pseudotřídu pro jiné prvky než odkazy. Zde se to řeší v CSS přidáním vlastnosti behavior, která určuje vazbu speciálních skriptů na události prvku (bohužel musíme použít Javascript). K vytvoření efektu se přidává komponenta "hover.htc".
body {behavior: url...}.