Skip to Content

Tvorba tabulek - 1.část

Tabulky by se měli používat na zobrazování dat, která jsou k tomu logicky určená, nikoliv k formátování celého obsahu webových stránek. Za prvé zanášíme dokument zbytečnými formátovacími tagy - takové stránky jsou velmi rozsáhlé v kódu, což jistě není pro nás ani pro čtenáře přínosem. Co je ale ještě důležitější je správně strukturovaný obsah, který dosáhneme jedině pomocí CSS. Orientace v tabulkovém layoutu je značně problematická jak pro například nevizuální prohlížeče, tak i pro vyhledávače.

Tabulka a její formátování je pořád velkým přínosem jak už bylo řečeno pro zobrazování tabulkových dat (ceníky, zboží, statistiky, atd...). Při vytváření tabulky bychom měli přihlédnout k tomu, že nejdůležitější věc je přehlednost, logika a správné formátování. I jednoduché tabulky mohou být nepřehledné, pokud obsahují více, než pouze několik řádků a sloupců. Pokud je mezi buňkami malý prostor, informace se mohou slévat dohromady, a výsledkem je poněkud zmatená tabulka. Proto je také důležité tabulku vizuálně rozčlenit, nebývá na škodu vložit třeba do hlavičky tabulky jemný obrázek, například s lineárním přechodem, a nebo při najetí na řádek změnit barvu, ovšem ne moc výraznou. A naopak - tabulky, které obsahují velké množství prázdného místa ztrácejí pro čtenáře vazbu.

Členění tabulky

Přihlédneme-li k logickému členění tabulky a k faktu možnosti použití např. čtečky obrazovky je dobré zahrnout do koncepce tabulky její popis, nebo základní informace o ní. Zrealizujeme ho pomocí atributu summary tagu table. Jeho význam je podobný atributu alt například u obrázku.
Př. <table summary="V této tabulce naleznete ceny našich výrobků....v hlavičce tabulky jsou znázorněny...atd.>
</table>
Dále můžeme tabulku rozčlenit do několika částí:
Titulek tabulky (je dobrý používat všude, kde je to možné) - <caption></caption> Vlastnost, která ovlivňuje polohu titulku se nazývá caption-side, může nabývat hodnoty top a bottom, bohužel v IE 6 není podporována.
Hlavička tabulky - <thead></thead>
Tělo tabulky - <tbody></tbody>
Patička tabulky - <tfoot></tfoot>
Jako definici řádku tabulky použijeme značku tr, buňku označuje párová značka td. (th zobrazí obsah tučně - využívá se například v hlavičce).
Dále můžeme spravovat sloupce tabulky a to nepárovou značkou <col />. Pokud má nějaká skupina sloupců v tabulce stejný význam a další skupina odlišný význam, měli bychom je uvést v tagu colgroup. V této značce s parametrem span za rovnítko uvedeme počet sloupců zleva, které chceme dát do skupiny.
Nadpisy tabulky v buňce mohou obsahovat atribut scope s hodnotami row, col, rowgroup, colgroup, aby bylo možné určit (např. opět ve čtečkách obrazovky), zda se nadpis vztahuje k řádku, sloupci, skupině řádků, atd...Přiřazujeme tak vlastně hlavičkové buňky k nějakým obsahovým buňkám pomocí výše uvedených hodnot.

<tr>
<th scope="col">Jméno autora</th>
</tr>

Jestliže potřebujeme složitější tabulku a v ní opravdu zavést pevný řád s návazností třeba jedné obsahové buňky na všechny hlavičkové buňky, např. jednu horní,druhou zleva, můžeme přiřadit tagu th atribut id a tagu td atribut headers
Př.
<tr>
<th>Rok</th>
<th id="hlavicka1">Cena</th>
</tr>
<tr>
<th id="hlavicka2">2009</th>
<td headers="hlavicka1 hlavicka2">150 kč</td>
</tr>

Nakonec naší první části uvedu výpočet velikosti tabulky.
Velikost tabulky se odvíjí od obsahu buňek tabulky jak na výšku, tak na šířku. Každý sloupec bude tedy tak široký jako nejširší buňka ve sloupci. V případě, že chceme nadefinovat pevný rozměr je nejlepší se řídit touto radou: Definujte buď šířku tabulky a nechte, aby se šířka buněk řídila jejich obsahem, anebo definujte pouze šířku buněk a šířka tabulky se tomu přizpůsobí. U výšky je stejné.
Výpočet šířky buněk určuje také CSS vlastnost table-layout. Hodnoty jsou buď auto, (šířky buněk se počítají podle jejich obsahu) nebo fixed. (respektují se zadané šířky buněk)

Tvorba tabulek - 2.část