Tipy pro tvorbu tabulek v HTML kódu

Každý tvůrce webových stránek, který chce, aby jeho stránka vypadala dobře, se při práci rozhodně neobejde bez použití tabulek. O tabulkách by se dalo říci, že jsou základním stavebním prvkem stránky – pomocí nich se tvoří celý layout webu, používají se pro přesné umístnění obrázků, díky nim je možná vícesloupová sazba textu.

Tabulky byly poprvé použity ve specifikaci HTML 3.2, která schválena standardizační organizací W3C v lednu 1997 a dalo by se říci, že od tohoto data se začaly na webu objevovat stránky, které svojí sazbou daleko převyšovaly předchozí jednoduše formátované HTML stránky.

Zavedení tabulek jako základního stavebního prvku stránky se ukázalo jako velmi prozíravé. Začaly vznikat weby, které měly obsah zalomený do několika sloupců, začaly vznikat weby se specifickým layoutem apod. Za tu dobu se k tabulkám nahromadila spousta tipů a některé z nich si tady popíšeme.

Kratší tabulky

Při tvorbě tabulek mějte na zřeteli jedno základní pravidlo – tabulka se v prohlížeči zobrazí, až se načte úplně do konce. Pokud váš web tvoří pouze jedna velká tabulka, kde je umístněn veškerý obsah, stránka se zobrazí až po načtení tohoto obsahu. Pokud stránku rozdělíte např. do dvou nevnořených tabulek umístěných pod sebou, první se návštěvníkovi zobrazí horní tabulka a za nějakou dobu dolní tabulka. Interval.cz je vytvořen přesně tímto stylem – když zadáte adresu http://www.interval.cz, první, co se vám zobrazí, bude logo a reklamní bannery, které jsou v samostatné tabulce, chvilku poté se zobrazí levý pruh a naposledy pak prostřední a pravý sloupec.

Špatná práce s tabulkami:

Správná práce s tabulkami:

Průběžné zobrazování načtených tabulek ovšem nefunguje v případě, že je máte vnořeny do jiné, nadřazené tabulky. Vnořená tabulka se zobrazí až v okamžiku, kdy se načte konec nadřazené tabulky.

Prázdné buňky tabulky

Občas při tvorbě tabulek vzniknou prázdné buňky, které nemají žádný obsah. V Internet Exploreru je jejich zobrazování a formátování naprosto bez problémů. Netscape Navigátor se ovšem s prázdnou buňkou nedokáže moc dobře vyrovnat a proto do prázdných buněk vložte alespoň jednu tvrdou mezeru &&;nbsp; nebo průhledný GIF 1×1 pixel.

Ačkoli je ve specifikaci HTML definováno, že pokud v tabulce není uveden parametr BORDER, má být orámování tabulky nulové, Netscape Navigátor razí vlastní řešení a v takovém případě je kolem tabulky uvedeno neviditelně orámování o velikosti dvou bodů, což může v případě přesně definovaných rozměrů tabulek působit problémy. Proto vždy do definice tabulky uvádějte parametr BORDER=“0″.

Tenké orámování tabulky

Pokud v tabulce zadáte orámování o velikosti jednoho pixelu pomocí parametru BORDER=“1″, orámování tabulky je dvoupixelové. Jde to vyřešit tak, že tabulku, kterou potřebujete orámovat vložíte do nadřazené tabulky a zde v parametru BGCOLOR nastavíte barvu, kterou chcete mít tabulku orámovanou. Poté ve vnořené tabulce nastavíte vnější okraje buňky CELLSPACING=“1″ a buňky tabulky vyplníte bílou barvou.

Pokud vám není příliš jasné, proč to tak je, zkusím to vysvětlit. Pomocí BGCOLOR=“BLACK“ jsme nastavili černou barvu nadřazené tabulky. Skutečně jednopixelového orámování tabulky pak dosáhneme parametrem CELLSPACING=“1″, který nastavuje prostor mezi jednotlivými buňkami tabulky. A pak stačí pomocí parametru BGCOLOR=“barva“, který je umístněn v buňkách vnořené tabulky „přebít“ onu černou barvu nadřazené tabulky. Pokud bychom dali parametr BGCOLOR=“barva“ do vnořené tabulky a nikoli do jednotlivých buněk, žádné orámování by se neobjevilo. Více o této problematice pojednává tento článek.

Písmo v tabulce

Pokud chcete mít text v tabulce zobrazen konkrétním písmem, musíte definici písma vkládat do každé buňky tabulky, což v případě rozsáhlých tabulek podstatně prodlužuje výslednou délku strany. Řešením jsou kaskádové styly. Nadefinujte si ve stylu písmo a v buňce se na něj odkažte třeba pomocí CLASS=“nazev_stylu“:

Pokud se vám nechce psát do každé buňky CLASS=“nazev_stylu“, jednoduše předefinujte pomocí stylů celý tag <TD>. Pak veškerý text, který bude v tabulkách, bude mít automaticky zadaný řez písma, velikost, barvu apod. Případnou změnu písma v buňce pak řešte právě pomocí tříd (CLASS).

Styly můžete v dnešní době bez obav používat – alespoň k definování písma. Styly jsou velmi slušně podporovány ve čtvrtých verzích prohlížečů, a mám pocit, že dokonce Internet Explorer 3.0 z roku 1996 uměl se styly trošku pracovat.

Zarovnání nevnořených tabulek

Tento tip souvisí s rychlejším zobrazování krátkých tabulek (viz.nahoře). Tabulky jsou objekt jako každý jiný a tak je možné například zarovnat dvě nevnořené tabulky vedle sebe. Výhodu to má tu, že při načítání stránky se první zobrazí ta, co má kratší délku (obsah) a poté až ta druhá. Výhoda tohoto způsobu použití je jasná – při načítání stránky se jako první např. objeví navigace webu umístněná v levé tabulce a až poté např. seznam článků v tabulce pravé. Více o této problematice pojednává tento článek.

Rozměry tabulek

Při zadávání rozměrů tabulek můžete použít přímo číselnou hodnotu, např. WIDTH=“120″ nebo procentuální hodnotu, např. WIDTH=“50%“. Prohlížeč v tomto případě určí velikost tabulky podle velikosti okna. Tyto možnosti nastavení jsou pochopitelně zcela běžné. Málokdo ovšem ví, že u tabulek je možné zadávat i výšku tabulky pomocí parametru HEIGHT=“rozměr“. Stejně jako v minulém případě je možné použít číselnou či procentuální hodnotu. Netscape ovšem na parametr HEIGHT nijak nereflektuje. Parametry WIDTH a HEIGHT jsou sice obsaženy ve specifikaci HTML 4.0, ale pouze jako deprecated (odmítnuté). Velikost tabulky se má nastavovat pomocí stylů.

Pokud ovšem potřebujete z nějakého důvodu určit i výšku tabulky tak, aby to fungovalo ve všech prohlížečích, použijte průhledný GIF 1×1 pixel, který vložíte do buňky tabulky a dejte mu rozměry, jaké zrovna potřebujete.

Zarovnání tabulky pomocí stylů

Pokud potřebujete zarovnat tabulku pomocí stylů a nikoli pomocí zavrženého ALIGN umístněného v definici <TABLE>, použijte k tomu parametr FLOAT a nikolic ALIGN, jak několik čtenářů Intervalu předem předpokládalo, aniž by nakoukli do specifikace:o) V tabulce je příklad definice stylu, který zarovná tabulku na pravou stranu:

Pozadí buněk

Jak jistě víte, pozadí buněk se definuje pomocí parametru BGCOLOR=“barva“. Hodně často ale vidím, jak třeba deset buněk v jednom řádku tabulky obsahuje desetkrát již zmiňovaný parametr BGCOLOR, čímž si tvůrce stránky sám přidělává práci a prodlužuje tak výslednou velikost kódu. Dejte parametr BGCOLOR pouze do definice řádku, do tagu <TR>, jak ukazuje příklad a výsledek je úplně shodný:

Tabulka uprostřed monitoru

Možná jste někdy potřebovali umístnit tabulku na střed monitoru – nejenom zleva a zprava, ale i seshora a zezdola nezávisle na velikosti okna. Není potřeba používat JavaScript, HTML to zvládne samo. Vytvořte tabulku, která bude mít nadefinovány rozměry WIDTH=“100%“ a HEIGHT=“100%“. Tím se tabulka roztáhne podle velikosti okna. Pak do buňky této tabulky vložte parametry ALIGN=“CENTER“ a VALIGN=“MIDDLE“, které umístní obsah buňky – našem příkladu je to další tabulka – přesně na střed. Za tento tip děkuji Martinu G. Koptovi.

Zjednodušování tabulek

Tento poslední tip neberte příliš vážně, a věřím, že jej nebudete v praxi používat, protože to odporuje specifikaci, ale v tabulce nemusíte používat uzavírací tagy buňky a řádku, tedy tagy </TD> a </TR>. Dnešní prohlížeče jsou inteligentní – testováno na Internet Exploreru 5.0 a Netscape Navigatoru 4.7 – a umí si odvodit, že když začíná další řádek či buňka tabulky, tak ten předchozí řádek či buňka musela zákonitě skončit. Že to skutečně funguje, ukazuje následující příklad:

Závěrem

Upřímně doufám, že vám tento článek alespoň trošičku pomohl při tvorbě tabulek na vašich stránkách a věřím, že se nezačnou náhle objevovat stránky s tabulkami, které budou postrádat ukončovací tagy řádků a buněk:o) Pokud vás napadá nějaký další tip, sdělte mi jej prosím na můj email nebo se s ním podělte s ostatními čtenáři Intervalu v Diskusním fóru pod článkem.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.