Kaskádové styly – rámečky kolem tabulky

20. dubna 2000

•

V minulém díle jsem psal o vlastnosti border, která dokáže orámovávat prakticky cokoli. Pomocí ní snadno nakreslíme třeba rámeček okolo odstavce, či jiného prvku HTML. Pro praktické použití se ale nejčastěji používají a rámečkují tabulky. Proto je dnešní díl věnován právě tabulkám.

Předem musím napsat, že podpora kreslení rámečků kolem tabulek prakticky neexistuje v Netscape Navigatoru, ačkoli jinak tento prohlížeč kreslení rámečků kolem ostatních objektů často podporuje (například kolem odstavců, apod.). Internet Explorer verze 4, který je v současné době brán jako standard podporuje kreslení rámečků, ale ne zcela. Jeho podpora není ani na úrovni první normy kaskádových stylů CSS. Implementace těchto možností do prohlížečů není jednoduchá, a tak tento díl je tak trochu spíše omezený na způsoby, které lze v současné době použít. Přiložené příklady na samostatných stránkách je potřeba prohlížet v Internet Exploreru, jinak těžko něco uvidíte.

Tabulka se chová v podstatě stejně jako jakýkoli jiný box, je ale potřeba si uvědomit, že samotná tabulka má uvnitř vnořené ještě buňky, které vlastně tvoří také samostatné boxy. Například následující obrázek ukazuje tabulku se čtyřmi buňkami:

Na obrázku můžete vidět, že celá tabulka je brána jako jeden box, který můžete jako celek ovlivňovat pomocí stylů pro značku table. Uvnitř tabulky jsou potom čtyři boxy, které se zase mohou ovlivňovat pomocí stylů pro značku td, popřípadě th. Takže na výše uvedeném obrázku je celkem pět boxů, které můžete ovlivňovat pomocí kaskádových stylů.

Není tedy těžké docílit orámování celé tabulky třeba takto (v tomto případě se tabulka orámuje červeným rámečkem o šířce 2 pixely):

table {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Stejně tak není problém orámovat jenom určité buňky tabulky, a to třeba takto:

td.sramem {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

V tomto příkladě všechny buňky, které jsou tvořeny značkou td a mají nastavenou třídu sramem budou orámovány. Na samostatnés HTML stránce si můžete prohlédnout výsledky obou zápisů, a navíc je tam ukázána i varianta s částečným orámováním tabulky. Určitě se podívejte i přímo na HTML kód této stránky. Bohužel musím konstatovat, že pokud nemáte Internet Explorer, tak nejspíše nic neuvidíte.

Daleko zajímavější (a přinášející větší problémy) je míchání obou rámečků. Tedy varianta, kdy používáme jak orámovávání buněk, tak i celé tabulky najednou. Můžeme začít přímo třeba tímto zápisem, který ohraničí všechny buňky i celou tabulku:

table, th, td {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

Pokud se podíváte na výsledek, zjistíte, že to dopadlo nějak takto:

Z toho je vidět, že buňky tabulky nejsou naskládané přesně vedle sebe, ale kolem rámečku každé buňky je ještě neviditelný vnější okraj, který se ovládá pomocí vlastnosti margin (podrobněji viz. článek Kaskádové styly CSS – boxy, aneb nastavujeme okraje). Pokud chceme, aby mezera mezi buňkami zmizela, máme několik možností.

Tou nejjednodušší je použít u tabulky atribut cellspacing=0, což pracuje spolehlivě v případě Internet Exploreru 4 a výše. Výsledek můžete vidět na samostatné stránce, kde si můžete prohlédnout i HTML kód.

Pokud bychom chtěli použít kaskádové styly, potřebovali bychom smazat všechny vnější okraje buněk tabulky (zápisem margin: 0px;) a také by bylo dobré smazat vnitřní okraj tabulky (zápisem padding: 0px;). Bohužel toto se mi nepodařilo rozchodit na Internet Exploreru verze 4, takže je to nejspíše v současné době nepoužitelné.

A to je pro dnešek opravdu všechno.