Stylování HTML tabulek v CSS I

Obsah lekce:

Základní struktura tabulky v HTML

Každá tabulka je struktura skládajících se z konečného počtu řádků. Každý řádek obsahuje konečný počet sloupců. Sloupci v rámci řádku říkáme buňka.

Každá tabulka v HTML stránce začíná značkou <table> a končí značkou </table>. Uvnitř tabulky se používají následující značky:

• <tr> - začátek řádku (z angl. table row)
• </tr> - konec řádku (každý řádek v tabulce musí začínat značkou pro začátek řádku a končit značkou pro konec řádku)
• <td> - značka pro začátek buňky v řádku
• </td> - značka pro konec buňky v řádku

Jednoduchá tabulka

Na úvod vytvořme velmi jednoduchou tabulku obsahující dva řádky o dva sloupce.

Na prvním řádku je značka pro začátek tabulky. Na dalším je značka pro začátek řádku. Následující dva řádky obsahují každý jednu buňku daného řádku. Na pátém řádku je řádek tabulky ukončen značkou pro konec řádku. Analogicky následuje další řádek a nakonec značka pro konec tabulky.

Výsledná tabulka vypadá v HTML stránce takto:

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

 

Vidíme,že je v prohlížeči stěží poznat, že se jedná skutečně o tabulku. Prvním zásadním problémem této tabulky je, že tabulka nemá okolo buněk žádné ohraničení a je těžké se v ní orientovat. Tento problém můžeme v běžném HTML řešit například atributem border v úvodní značce tabulky například takto: <table border="1">.

Výsledná tabulka vypadá v HTML stránce takto:

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

 

Nyní je již struktura tabulky celkem jasně viditelná. Zcela zřejmé problémy jsou zde dva:

1. Texty v buňkách tabulky jsou velmi těsně obklopeny ohraničujícími čarami tabulky. Tabulce by jistě propělo, kdyby byla v buňkách okolo textu alespoň malá mezera (okraj okolo textu). Zlepšila by se orientace v tabulce a její přehlednost.
2. Vzhled čar vizuálně definujících tabulku nemusí vyhovovat našim potřebám a navíc se jedná o standardní zobrazení těchto čar prohlížečem - v každém mohou čáry vypadat zcela jinak. Bylo by tedy vhodné určit standardizovaný vzhled čar pomocí css pravidel, aby naše tabulka vypadala ve všech současných prohlížečích pokud možno stejně.

Problém 1 - prostor v tabulce - "provzdušnění" tabulky

V bězném html existuje u značky table atribut cellpadding (cell z angl. buňka, padding z angl. vycpávka), který má číselnou hodnotu (celé číslo z intervalu [0..n]) určující velikost okraje mezi vnitřním okrajem buňky jejím obsahem. V běžném html by situace mohla vypadat například takto:

Výsledná tabulka vypadá v HTML stránce takto (zobrazení se v této stránce může lišit neboť tato obsahuje mnoho stylů - nejlépe je zkopírovat předešlý html kód tabulky do nové html stránky bez css stylů a zobrazit):

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

 

Zdálo by se tedy jasné, že zkrátka v každé tabulce ve vytvářené internetové prezentaci napíšeme požadovaný atribut s patřičnou hodnotou a vše bude vyřešeno. Uvědomme si ale, že pokud má naše prezentace více tabulek (zákazník může požadovat tabulek ve své prezentaci klidně několik desítek!), pak nastávají obtíže. První je ta, že patřičný atribut cellspacing musíme skutečně uvést všude (u každé tabulky). Druhý problém je, pokud například zákazník řekne, že v celé internetové prezentaci si přeje tuto mezeru v tabulkách jinou (větší či menší). Pak bychom museli ve všech tabulkách prezentace tuto hodnotu upravit. A to je zbytečná práce a komplikace navíc. Z tohoto důvodu vytvoříme pro všechny tabulky pravidla v CSS souboru pro naši internetovou prezentaci a jakýkoliv atribut vzhledu tabulek můžeme centrálně měnit na jediném místě. Samozřejmě není problém vytvořit i vzhledové odlišné tabulky a stylovat je pomocí CSS jinak než "běžné" tabulky v prezentaci.

Pojďme se tedy podívat na to, jak bude vypadat CSS pravidlo pro nastavení vlastnosti cellpadding našich tabulek. V CSS není vlastnost cellpadding, ale je zde vlastnost padding (obecná vnitřní mezera mezi okrajem html elementu a jeho obsahem). Co je vlastně elementem, u kterého si přejeme padding nastavit? Chceme udělat mezeru okolo obsahu buňky tabulky - požadovaným elementem ke stylování je tedy element <td> a jeho vlastnost padding.

Po aplikaci tohoto pravidla v naší internetové prezentaci dojde k tomu, že všechny standardní tabulky budou mít v buňkách tuto mezeru.

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

Problém 2 - okraj tabulky

Zbývá nám vyřešit problém rámečku tabulky. První, co by mohlo fungovat je použít css vlastnost border pro element table. Upozorněme na důležitý fakt, že vlastnost border musí mít nastavenu barvu, šířku rámečku a typ rámečku.

Jak taková tabulka vypadá vidíme níže. Okraj je skutečně pouze okolo tabulky jako celku a nikoli okolo jednotlivých buněk tabulky.

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

Pokusme se nyní napsat a aplikovat pravidlo pro nastavení okraje všem buňkám tabulky. Takové pravidlo bude analogické předchozímu s tím, že bude aplikováno na element td.

Jak taková tabulka vypadá vidíme níže. Okraj je skutečně vykreslen i uvnitř tabulky kolem každé buňky.

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

Pokud bychom nechtěli mezeru mezi okrajem celé tabulky a buňkami, pak si můžeme pomoci buď atributem cellspacing=0 html značky table. Tento parametr nastavuje mezeru mezi jednotlivými buňkami neboli vnější mezeru buňek tabulky. Pokud je tato mezera rovna nule, pak mezi buňkami žádná mezera nebude a budou těsně vedle sebe.

Výsledná tabulka:

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

Avšak ze stejných důvodů jako výše se tomuto budeme snažit vyhnout a budeme chtít tuto vlastnost nastavit jako css pravidlo.

Jak taková tabulka vypadá vidíme níže.

POŘADÍ	Příjmení, Jméno
1	Světlík Jaromír

Úkol

S použitím libovolných elektronických informačních zdrojů vysvětlete a použijte CSS vlastnost border-collapse souvislosti s html elementem table. Ilustrujte použití této vlastnosti na příkladech.

Další čtení

Otázky

1. Jaká je základní struktura tabulky v HTML?
2. K čemu jsou vlastnosti cellpadding a cellspacing?
3. Jak nastavíme pomocí CSS okraj okolo textu v buňce tabulky?
4. Jak nastavíme pomocí CSS okraj tabulky nějaké barvy velikosti 1px?
5. Jak funguje v tabulkách CSS vlastnost border-collapse?