Naučit se psát CSS rozvržení může být obtížné, zvláště pokud jste obeznámeni s používáním tabulek k vytváření efektních rozvržení webových stránek. Ale zatímco HTML5 umožňuje rozložení tabulek, to není dobrý nápad.
Tabulky nejsou přístupné
Podobný vyhledávače, většina čteček obrazovky čte webové stránky v pořadí, v jakém se zobrazují v HTML, a tabulky mohou čtečky obrazovky velmi těžko analyzovat. Obsah v rozvržení tabulky, i když je lineární, nemusí vždy dávat smysl při čtení zleva doprava a shora dolů. Navíc díky vnořeným tabulkám a různým rozpětím v buňkách tabulky může stránka ztížit zjištění.
To je důvod, proč Specifikace HTML5 doporučuje proti tabulky pro rozložení a proč to HTML 4.01 zakazuje. Přístupné webové stránky umožňují, aby je používalo více lidí, a jsou známkou profesionálního designéra.
Pomocí CSS můžete definovat sekci jako příslušnou na levé straně stránky, ale umístit ji jako poslední do HTML. Čtečky obrazovky a vyhledávače poté přečtou důležité části (obsah) jako první a méně důležité části (navigace) jako poslední.
Tabulky jsou choulostivé
I když vytvoříte tabulku pomocí webového editoru, vaše webové stránky budou stále komplikované a obtížně udržovatelné. S výjimkou nejjednodušších návrhů webových stránek vyžaduje většina tabulek rozvržení použití mnoha atributů a vnořených tabulek.
Sestavení stolu se může zdát snadné, když to děláte, ale jakmile je hotové, musíte jej udržovat. Šest měsíců v řadě nemusí být tak snadné si vzpomenout, proč jste vnořili tabulky nebo kolik buněk bylo v řadě atd. Nemluvě o tom, že pokud udržujete webové stránky jako člen týmu, musíte všem zúčastněným vysvětlit, jak tabulky fungují, nebo očekávat, že si vyžádají další čas, když budou muset provést změny.
CSS může být také komplikované, ale udržuje prezentaci oddělenou od obsahu a z dlouhodobého hlediska je mnohem snazší ji udržovat. Navíc s rozvržením CSS můžete napsat jeden soubor CSS a upravit styl všech svých stránek tak, aby vypadaly tak. Pokud pak chcete změnit rozložení svého webu, jednoduše změníte jeden soubor CSS a celý změny webu - již nemusíte procházet každou stránkou po jedné, abyste aktualizovali tabulky a aktualizovali rozložení.
Tabulky jsou nepružné
I když je možné vytvořit rozložení tabulky s procentuální šířkou, načítání je často pomalejší a může dramaticky změnit vzhled vašeho rozložení. Pokud ale pro své tabulky použijete zadané šířky, skončíte s velmi rigidním rozvržením, které nebude vypadat dobře na monitorech, jejichž velikost je odlišná od vaší vlastní.
Vytváření flexibilních rozvržení, která vypadají dobře na mnoha monitorech, prohlížečích a rozlišeních, je relativně snadné. Ve skutečnosti můžete pomocí mediálních dotazů CSS vytvářet samostatné návrhy pro obrazovky různých velikostí.
Tabulky poškozují optimalizaci vyhledávače
Nejběžnější rozložení vytvořené tabulkou používá navigační panel na levé straně stránky a hlavní obsah na pravé straně. Při použití tabulek tento přístup (obecně) vyžaduje, aby první obsah, který se zobrazí v HTML, byl levý navigační panel. Vyhledávače kategorizují stránky podle obsahu a mnoho motorů určuje, že obsah zobrazený v horní části stránky je důležitější než jiný obsah. Stránka s první navigací nalevo se tedy bude jevit jako obsah, který je méně důležitý než navigace.
Pomocí CSS můžete dát důležitý obsah nejprve do svého HTML a poté pomocí CSS určit, kam má být v designu umístěn. To znamená, že vyhledávače nejprve uvidí důležitý obsah, i když ho design umístí níže na stránku.
Tabulky ne vždy tisknou dobře
Mnoho návrhů tabulek netiskne dobře, protože jsou pro tiskárnu jednoduše příliš široké. Aby je prohlížeč přizpůsobil, prohlížeče jej odřízly a vytiskly níže uvedené části, což mělo za následek nesouvislé stránky. Někdy skončíte se stránkami, které vypadají dobře, ale chybí celá pravá strana. Ostatní stránky budou tisknout sekce na různé listy.
S CSS můžete vytvořit samostatnou šablonu stylů pouze pro tisk stránky.
Tabulky pro rozvržení jsou v HTML 4.01 neplatné
The Stavy specifikace HTML 4: "Tabulky by neměly být používány čistě jako prostředek k rozvržení obsahu dokumentu, protože by to mohlo způsobit problémy při vykreslování na nevizuální média."
Pokud tedy chcete napsat platný HTML 4.01, nemůžete pro rozložení použít tabulky. Tabulky byste měli používat pouze pro tabulková data a tabulková data obecně vypadají jako něco, co byste mohli zobrazit v tabulce nebo případně v databázi.
HTML5 však změnila pravidla a nyní se tabulky pro rozložení, i když se nedoporučují, považují za platné HTML. Specifikace HTML5 uvádí: „Tabulky by se neměly používat jako pomůcky pro rozložení.“ Důvodem je skutečnost, že čtečky obrazovky obtížně rozlišují tabulky pro rozložení, jak již bylo zmíněno dříve.
Použití CSS k umístění a rozložení vašich stránek je jediný platný způsob HTML 4.01, jak získat návrhy, které jste použili k vytváření tabulek, a HTML5 důrazně doporučuje také tuto metodu.