Tisková verze článku  Poslat článek e-mailem  25. listopadu 2006 | Radek Kropík | Komentáře (6)  

Tabulky versus CSS layout

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.


Radek Kropík




Komentáře k článku


Příspěvky vyjadřují stanovisko čtenářů, nikoliv provozovatelů serveru a redakce nenese odpovědnost za jejich obsah.

        #1
Gravatar
Pavel N.

Já nějak nedokážu pochopit. co má každý proti tabulkám. Mám tabulkový web a nemám s ním žádné problémy. Nechte si svý CSS a já zůstanu u tabulek.

        #2
Gravatar
babca

Co to je za argumenty? 1) "je také kód validnější" - ??? - chcete říct, že tabulkový layout validní není? jinak už to slovo "validnější" je hrozné... 2) "U tabulek budete muset editovat všech těch 50 stránek" kde? na to je CSS ne? s layoutem to nemá nic společného... 3) "Pokud například provozuje redakční systém" no tak kdo provozuje redakční systém, tak asi nemá stránky ve statickém HTML, ne? takže nějaká změna by byla stejně jen jediná - editace daného asp/php souboru - a v tomto případě je navíc úplně jedno, jak to mám prasácky - zda bych chtěl jen změnit class, nebo mám styl nadefinovaný natvrdo...

        #3
Gravatar
Kairi

Tento příspěvek byl smazán redakcí jako SPAM. Opakované vkládání SPAMů může mít za následek např. trvalé zablokování IP adresy.

        #4
Gravatar
vtireoeelu

Tento příspěvek byl smazán redakcí jako SPAM. Opakované vkládání SPAMů může mít za následek např. trvalé zablokování IP adresy.

        #5
Gravatar
cjzwlqxij

Tento příspěvek byl smazán redakcí jako SPAM. Opakované vkládání SPAMů může mít za následek např. trvalé zablokování IP adresy.

        #6
Gravatar
BulbaHopper

Tento příspěvek byl smazán redakcí jako SPAM. Opakované vkládání SPAMů může mít za následek např. trvalé zablokování IP adresy.




     Komentáře k tomuto článku byly již uzavřeny.


Novinky a oznámení

19.10.11 - Nyní najdete nově u každého článku ikonu obálky. Pokud na ní kliknete, budete moci odeslat odkaz na vybraný článek na e-malovou adresu, kterou zadáte v zobrazivším se formuláři. Odpadá vám tak nutnost pro odeslání odkazu na zajímavý článek spouštět e-mailového klienta a zakládání nového e-mailu.

11.10.11 - Nově v magazínu naleznete tzv. QR kód, který obsahuje vždy adresu právě zobrazené stránky. Pokud máte zobrazenou některou z kategorií článků, obsahuje QR kód adresu této kategorie, pokud máte zobrazený článek, QR kód obsahuje adresu zobrazeného článku, v ostatních případech obsahuje QR kód hlavní adresu magazínu.

23.09.11 - V neděli 25.9.2011 v době mezi 1:00 a 5:00 hod. proběhl přesun služeb serveru na nový hardware. Za nedostupnost magazínu v době přesunu se vám omlouváme.


QR kód článku

QR kód článku

Aktualizace e-mailem

Nechcete, aby vám unikl nový článek? Není nic jednoduššího, než se zaregistrovat a kdykoliv vyjde v magazínu nový článek, dáme vám vědět e-mailem.




Ikonka pro Vás

Líbí se vám tento magazín a rádi byste ho nějak podpořili? Pokud máte své webové stránky, budeme vám vděčni, pokud si na ně přidáte naší ikonku. Stačí přidat na váš web HTML kód, kderý najdete zde.


Partnerské weby


Naši fanoušci na Facebooku


Statistika


Reklama