Tabulky versus CSS layout
25. listopadu 2006
|
Radek Kropík
|
První výhodou, kvůli které jsme na CSS layout přešli je větší rychlost při načítání stránek oproti tabulkové verzi. Mnozí jistě namítnou, že když se tabulkový layout dobře navrhne, je také rychlý – s tím nemůžu než souhlasit. Ale na druhou stranu, pokud je tabulkový layout udělán prasácky, tj. mnoho zanořených tabulek, není při načítání stránek o co stát. Pokud prohlížeč načítá stránku, která je tvořena mnoha tabulkami, vždy čeká, až mu dorazí celá a až pak ji zobrazí. A pokud navíc k tomu máte nějaké pomalé připojení (dial-up, GPRS apod.), jen koukáte na prázdný monitor a čekáte, co
se bude dít. Občas je to vidět dokonce i u rychlého připojení, zvláště když jsou ty tabulky špatně navrhnuty. Ale to samé platí i u použití CSS. Pokud se to dobře udělá, je stránka načtena rychle, pokud se to udělá špatně – mnoho zanořených DIVů - je to stejné jako u tabulek a opět není o co stát a proti tabulkám si moc nepolepšíte. Pokud stále používáte na celkové rozložení stránky tabulky, myslím že by bylo lepší stránku rozdělit do několika tabulek, než používat tabulku jednu. Jakmile totiž do prohlížeče dorazí první tabulka, již můžete začít se čtením, což u jedné velké tabulky nehrozí. Tam totiž musíte čekat na načtení jedné velké tabulky a až pak se začíst do textu. Moderní prohlížeče sice už umí velkou tabulku zobrazovat průběžně, ale ruku na srdce, kolik uživatelů ještě používá starší verze prohlížečů? Já si myslím, že jich je ještě celkem dost a i na ně
bychom měli při návrhu webu myslet.
Další výhodou proti tabulkám je menší a strukturovanější zdrojový kód stránek. Proč to tak je? Hlavně proto, že většina, ne-li všechno formátování stránky se přesune ze zdrojového kódu právě do externího CSS souboru. Navíc je tento CSS soubor díky cachování načítán jen jednou a protože je použit ve všech stránkách webu, dojde tím samozřejmě i ke zrychlení zpracování stránky. A proč je CSS layout strukturovanější a více dodržuje SEO než tabulky? To je dáno už samotnou technologií. U tabulek se používá něco takovéhoto <table><tr><td></td> <td></td> <td> </td></tr> </table> což při velkém počtu těchto tagů a mnoha zanořených tabulkách udělá ve výsledku to, že zdrojový kód je nepřehledný a sémantika jde do háje. Kdežto u CSS si vystačíme s pár tagy
<div></div> a máme vymalováno. A navíc pokud layout tvoříme pečlivě a sémanticky, můžeme si jen gratulovat. Pokud budu mluvit v číslech, tabulková verze úvodní stránky Fantomase měla 104 kB, kdežto CSS verze 2.5 měla 38,6 kB a to už je úspora podstatná. A ještě jedna výhoda tu je, můžete si v kódu prvky stránky dát libovolně a na výsledném zobrazení se nic nezmění. Například můžete dát jako první text, který se hned zobrazí (což určitě uvítají např. slepci) a až nakonec třeba hlavičku, která není až tak podstatná. CSS nám samozřejmě pomáhá i při jakékoliv změně stránek. Představte si, že potřebujete u jednoho sloupce na všech stránkách, kterých máte 50, změnit velikost o 10px. U tabulek budete muset editovat všech těch 50 stránek – tj. zasahovat do HTML kódu každé stránky, kdežto u CSS vám stačí editovat jedinou hodnotu, která se nachází v externím CSS a je shodná pro všechny stránky a nemusíte tudíž zasahovat do HTML kódu stránky. Není toto dost podstatná výhoda oproti tabulkám? Pokud například provozuje redakční systém a rozhodnete se, ze od zítřka chcete mít nadpis článku o 5px větší a modrý, byla by hloupost na entou, kdybyste museli kvůli takové banální změně editovat mnoho stránek, když je možné editovat pouze jeden soubor a máte hotovo.
A nakonec CSS je oproti tabulkám moderní a vede hlavně k rychlejšímu webu. A pak je také kód validnější, což je pro některé hodně moc důležité. Jak jste jistě pochopili, jsem zastáncem právě CSS layoutu oproti tabulkám. Neříkám, že jsem tabulky nikdy nepoužíval, používal jsem je a někdy i dost prasácky (kvůli prohlížečům), ale web jde kupředu a proč se zastavit na jednom místě, u jedné techniky, a tu pak mermomocí prosazovat a neučit se věci nové, jako je právě CSS. Pokud si myslíte, že je CSS layout jednodušší na tvorbu než tabulkový, musím vás bohužel zklamat. Vytvořit správně CSS layout není zase taková hračka, jak se možná na první pohled může zdát. Samozřejmě je možné CSS layout zpatlat velice rychle ala FrontPage, ale k čemu by to pak bylo. Když už chcete používat CSS, navrhujte layout pečlivě a promyšleně. Po internetu se válí hlady prasácky udělaných CSS layoutů, nemusíte přece k nim přidávat i svůj vlastní web, ne? A že vás nebaví se CSS učit tak do hloubky, abyste byli schopni vytvořit kvalitní CSS layout – potom se na cele CSS vybodněte a zůstaňte raději u svých tabulek, to vám přece nikdo nebere.
