Anglická verze
logolink

< Zpět na seznam lekcí

Stylování HTML tabulek v CSS II

DreamweaverObsah lekce:

  • Hlavička tabulky
  • Prostor v tabulce
  • Okraje v tabulce
  • Pruhovaná tabulka

Hlavička tabulky

Na Internetu, v publikacích i v tabulkovém kalkulátoru se setkáváme s tím, že tabulka má nějak vizuálně odlišenu hlavičku od dalších řádků. Podívejme se nejprve na příklad:

V této lekci se postupně pokusíme takovou tabulku vytvořit. Stejně jako html stránka může mít tabulka značkou definováno hlavičku a tělo. Díky tomu můžeme tyto jednotlivé části tabulky pohodlně stylovat pomocí css pravidel. Pro vytvoření tabulky využijeme další html značky:

  • <thead> - značka pro začátek hlavičky tabulky
  • <tbody> - značka pro začátek těla tabulky
  • <th> - značka pro označení buňky tabulky v hlavičce

Všechny tři uvedené značky jsou párové a v tabulce tedy musí být ke každé této značce i značka pro označení konce hlavičky, těla nebo buňky hlavičky. Jak vypadá syntaxe tabulky s hlavičkou a tělem vidíme v následujícím rámečku.

Syntaxe HTML kódu tabulky s hlavičkou a tělem

<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
...
</tr>
</tbody>
</table>

HTML kód tabulky bude tedy po doplnění hlavičky a těla vypadat takto:

HTML kód tabulky

<table>
<thead>
<tr>
<th>POŘADÍ</th>
<th>Příjmení, Jméno</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Světlík Jaromír</td>
</tr>
</tbody>
</table>

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

Vidíme,že oddělením hlavičky a těla tabulky prohlížeč použil své vestavěné styly a v hlavičce nastavil tučné písmo. Jaké css pravidlo prohlížeč automaticky aplikoval (předpokládáme pouze nastavení tučného řezu písma v písmu v hlavičce tabulky)?

Prohlížeč nastavil pravděpodobně pravidlo pro značku thead, ve kterém použil vlastnost font-weight:bold;. Nastavíme tedy vlastní pravidla pro značku thead a upravíme dosavadní sadu css pravidel. Do tabulky také doplníme několik dalších řádku pro pozdější potřebu.

CSS pravidla pro vzhled tabulky doplněná o pravidlo pro thead

table {
border-width:1px;
border-color: #666;
border-style: solid;
}

thead{
/* barva pozadí hlavičky tabulky */
background-color:#056597;
/* barva písma hlavičky tabulky */
color:#FFF;
/* převod písmen v hlavičce tabulky na velká */
text-transform:uppercase;
/* tučný font v hlavičce tabulky */
font-weight:bold;
}

td {
padding: 3px;
}

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

Nyní přidáme pravidlo, kterým definujeme nějaký bezpatkový font a jeho velikost 12px, abychom měli jistotu, jaký font prohlížeč použije (a zároveň případně vyloučili použití nekvalitních patkových fontů typu Times New Roman). Přidaná pravidla jsou vyznačena tučně.

CSS pravidla pro vzhled tabulky doplněná o pravidlo pro thead

table {
border-width:1px;
border-color: #666;
border-style: solid;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
 }

thead{
/* barva pozadí hlavičky tabulky */
background-color:#056597;
/* barva písma hlavičky tabulky */
color:#FFF;
/* převod písmen v hlavičce tabulky na velká */
text-transform:uppercase;
/* tučný font v hlavičce tabulky */
font-weight:bold;
}

td {
padding: 3px;
}

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

V tomto kroku nastavíme buňkám tabulky tečkovaný okraj. K elementu td přidáme vlastnost border: 1px #ddd dotted;.

CSS pravidla pro doplnění tečkovaného okraje buněk

table {
border-width:1px;
border-color: #666;
border-style: solid;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
}

thead{
/* barva pozadí hlavičky tabulky */
background-color:#056597;
/* barva písma hlavičky tabulky */
color:#FFF;
/* převod písmen v hlavičce tabulky na velká */
text-transform:uppercase;
/* tučný font v hlavičce tabulky */
font-weight:bold;
}

td {
padding: 3px;
border: 1px #ddd dotted;
}

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

Nyní v tabulce odstraníme mezery mezi buňkami. Jak víme z minulé lekce, tak použijeme pravidlo border-spacing:0; v elementu table. Výsledná strukturovaná tabulka vypadá v HTML stránce takto:

Dále můžeme použít pravidlo border-collapse:collapse; v elementu table pro sloučení okrajů buněk. Výsledná strukturovaná tabulka vypadá v HTML stránce takto:

V tabulce bychom rádi docílili toho, že buňky tabulky budou mít větší padding a navíc bude text v nich zarovnán doleva. Napíšeme tedy pravidlo pro element th (buňka hlavičky tabulky) a nastavíme padding a zarovnání textu.

CSS pravidla pro vzhled buněk hlavičky tabulky

th{
padding:3px;
text-align:left;
}

Touto poslední úpravou bychom mohli stylování tabulky ukončit. Ukážeme si ale ještě dvě techniky, které nám celou tabulku mohou zpřehlednit.

Pruhovaná tabulka

Často se setkáváme v praxi s tím, že se v tabulkách nastavuje střídavě jedna barva pozadí pro liché řádky a jedna barva pozadí pro sudé. Zlepšuje to orientaci v tabulce. Ukážeme si momentálně asi nejjednoduší řešení tohoto problému, ale je třeba upozornit na to, že použitá CSS pravidla jsou k dispozici až ve specifikaci CSS3, která je zatím podporována jen z části (nemusí tedy ve všech prohlížečích fungovat). Pokuste se nalézt vysvětlení následujících pravidel na Internetu.

CSS3 pravidla pro střídání barvy pozadí řádků tabulky

tr:nth-child(2n+1){
background:#eee;
}

tr:nth-child(2n){
background:#ddd;
}

V tabulce nám poslední dvě pravidla udělala nepříjemnou změnu. Obarvila také pozadí hlavičky tabulky (pravidla mají totiž efekt na všechny řádky tabulky - vše uvnitř elementů tr).Pokuste se situaci nyní vyřešit tak, aby tabulka měla opět správně podbarvenou hlavičku:

Zvýraznění řádku pomocí myši

Další pěkná věc pro zlepšení orientace v tabulce je nastavit css pravidla tak, aby se vždy při najetí myši na řádek tabulky tento řádek zvýraznil (podbarvil nějakou barvou). Pomocí této techniky se snadno zorientujeme i v širokých tabulkách a nedojde k tomu, že by nám oči "zklouzly" o řádek níže či výše.

CSS pravidla definující změnu pozadí řádku po najetí myši

tr:hover{
background-color:#9CF;
cursor:pointer;
color:#FFF;
}

Na závěr si můžeme prohlédnout celou použitou sadu css stylů naší tabulky

CSS pravidla určující vzhled tabulky

table {
border-width:1px;
border-color: #666;
border-style: solid;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
border-spacing:0;
border-collapse:collapse;
}

thead{
/* barva pozadí hlavičky tabulky */
background-color:#056597;
/* barva písma hlavičky tabulky */
color:#FFF;
/* převod písmen v hlavičce tabulky na velká */
text-transform:uppercase;
/* tučný font v hlavičce tabulky */
font-weight:bold;
}

th{
padding:3px;
text-align:left;
background-color:#056597;
}


td {
padding: 3px;
border: 1px #ddd dotted;
}

tr:nth-child(2n+1){
background:#eee;
}

tr:nth-child(2n){
background:#ddd;
}

tr:hover{
background-color:#9CF;
cursor:pointer;
color:#FFF;
}

Domácí úkol

Vyřešte problém pruhované tabulky (vytvořte tabulku, kde se bude měnit barva pozadí lichých a sudých řádků) pomocí css vlastnosti pro změnu barvy pozadí (tedy CSS2.1).

Další čtení

Odkazy

Otázky

  1. Jaká je základní struktura tabulky v HTML?
  2. Jak se rozdělí HTML tabulka na hlavičku a tělo? Je nám toto rozdělení nějak užitečné?
  3. Jak nastavíme pomocí CSS vzhled hlavičky tabulky?
  4. Jak nastavíme pomocí CSS střídání barev pozadí řádků tabulky?
  5. Jak nastavíme pomocí CSS změnu barvy pozadí řádků tabulky při najetí kurzoru myši na daný řádek?
webdesign, xhtml, css, php - Mgr. Michal Mikláš