Prečo by ste sa mali vyhnúť tabuľkám pre rozloženia webových stránok

Naučiť sa písať CSS rozloženia môžu byť zložité, najmä ak ste oboznámení s používaním tabuliek na vytváranie efektných rozložení webových stránok. Ale zatiaľ HTML5 umožňuje rozloženie tabuliek, nie je to dobrý nápad.

Tabuľky nie sú prístupné

Podobný vyhľadávačeväčšina čítačiek obrazovky číta webové stránky v poradí, v akom sa zobrazujú v kóde HTML, a tabuľky môžu byť pre čitateľov obrazovky veľmi ťažké analyzovať. Obsah v rozložení tabuľky, aj keď je lineárny, nemusí mať vždy zmysel, keď sa číta zľava doprava a zhora nadol. Navyše, s vnorenými stolmi a rôznymi rozpätiami v bunkách tabuľky môžu stránku sťažiť.

Z tohto dôvodu Špecifikácia HTML5 odporúča proti tabuľky pre rozloženie a prečo to HTML 4.01 zakazuje. Prístupné webové stránky umožňujú, aby ich používalo viac ľudí, a sú značkou profesionálneho dizajnéra.

Pomocou CSS môžete definovať časť, ktorá patrí do ľavej časti stránky, ale umiestniť ju ako poslednú do kódu HTML. Potom programy na čítanie z obrazovky aj vyhľadávače najskôr prečítajú dôležité časti (obsah) a posledné menej dôležité časti (navigácia).

instagram viewer

Tabuľky sú zložité

Aj keď vytvoríte tabuľku pomocou webového editora, vaše webové stránky budú stále komplikované a ťažko sa udržiavajú. S výnimkou najjednoduchších návrhov webových stránok vyžaduje väčšina tabuliek rozloženia použitie mnohých atribútov a vnorených tabuliek.

Zostavenie stola sa môže zdať ľahké, keď to robíte, ale akonáhle je hotové, musíte ho udržiavať. Šesť mesiacov v rade nemusí byť také ľahké zapamätať si, prečo ste tabuľky vnorili alebo koľko buniek bolo v rade atď. Nehovoriac o tom, že ak udržiavate webové stránky ako člen tímu, musíte všetkým zúčastneným vysvetliť, ako tabuľky fungujú, alebo očakávať, že si v prípade potreby urobia ďalšie zmeny.

Aj CSS môže byť komplikované, ale udržuje prezentáciu oddelenú od obsahu a z dlhodobého hľadiska uľahčuje jej údržbu. Navyše s rozložením CSS môžete napísať jeden súbor CSS a upraviť všetky svoje stránky tak, aby vyzerali tak. Ak potom chcete zmeniť rozloženie svojich stránok, stačí zmeniť jeden súbor CSS a celý zmeny na webe - už nemusíte prechádzať každú stránku po druhej, aby ste aktualizovali tabuľky, aby ste aktualizovali rozloženie.

Tabuľky sú nepružné

Aj keď je možné vytvoriť rozloženia tabuľky s percentuálnymi šírkami, načítajú sa často pomalšie a môžu dramaticky zmeniť vzhľad vášho rozloženia. Ak ale pre svoje tabuľky použijete zadanú šírku, dostanete veľmi tuhé rozloženie, ktoré nebude vyzerať dobre na monitoroch, ktoré majú inú veľkosť ako tá vaša.

Vytváranie flexibilných rozložení, ktoré vyzerajú dobre na mnohých monitoroch, prehliadačoch a rozlíšeniach, je pomerne ľahké. V skutočnosti môžete pomocou mediálnych dotazov CSS vytvárať samostatné vzory pre obrazovky rôznych veľkostí.

Tabuľky poškodzujú optimalizáciu vyhľadávacích nástrojov

Najbežnejšie rozloženie vytvorené pomocou tabuľky používa navigačný panel na ľavej strane stránky a hlavný obsah vpravo. Pri použití tabuliek tento prístup (všeobecne) vyžaduje, aby prvý obsah, ktorý sa zobrazuje v kóde HTML, bol navigačný panel vľavo. Vyhľadávacie nástroje kategorizujú stránky podľa obsahu a veľa nástrojov určuje, že obsah zobrazený v hornej časti stránky je dôležitejší ako iný obsah. Zdá sa teda, že stránka s ľavou navigáciou má obsah, ktorý je menej dôležitý ako navigácia.

Pomocou CSS môžete umiestniť dôležitý obsah najskôr do svojho HTML a potom pomocou CSS určiť, kam by sa mal v dizajne umiestniť. To znamená, že vyhľadávacie nástroje najskôr uvidia dôležitý obsah, aj keď ho dizajn umiestni nižšie na stránku.

Tabuľky nie vždy dobre tlačia

Mnoho návrhov stolov sa netlačí dobre, pretože sú pre tlačiareň príliš široké. Prehliadače tak, aby sa zmestili, odrežú tabuľky a tlačia nižšie uvedené časti, čo vedie k nesúrodým stránkam. Niekedy skončíte so stránkami, ktoré vyzerajú dobre, ale chýba celá pravá strana. Ostatné strany vytlačia sekcie na rôzne listy.

Pomocou CSS môžete vytvoriť samostatnú šablónu štýlov iba pre tlač stránky.

Tabuľky rozloženia sú v HTML 4.01 neplatné

The Stavy špecifikácie HTML 4: "Tabuľky by sa nemali používať iba ako prostriedok na rozloženie obsahu dokumentu, pretože by to mohlo spôsobiť problémy pri vykresľovaní na nevizuálne médiá."

Pokiaľ teda chcete napísať platné HTML 4.01, nemôžete pre rozloženie použiť tabuľky. Tabuľky by ste mali používať iba pre tabuľkové údaje a tabuľkové údaje vo všeobecnosti vyzerajú ako niečo, čo by ste mohli zobraziť v tabuľke alebo prípadne v databáze.

HTML5 však zmenil pravidlá a teraz sa tabuľky rozloženia, aj keď sa neodporúčajú, považujú za platné HTML. V špecifikácii HTML5 sa uvádza: „Tabuľky by sa nemali používať ako pomôcky na rozloženie.“ Je to tak preto, lebo ako bolo spomenuté skôr, tabuľky na rozloženie sa čitateľom obrazovky ťažko odlišujú.

Použitie CSS na umiestnenie a rozloženie vašich stránok je jediný platný spôsob HTML 4.01, ako získať vzory, ktoré ste zvykli používať na vytváranie tabuliek, a HTML5 dôrazne odporúča aj túto metódu.