Skip to main content

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

Anonim

Naučiť sa písať rozloženie CSS môže byť zložité, najmä ak ste oboznámení s používaním tabuliek na vytvorenie fantázie rozloženia webových stránok. Ale zatiaľ čo HTML5 umožňuje tabuľky pre usporiadanie, nie je to dobrý nápad.

Tabuľky nie sú prístupné

Rovnako ako vyhľadávacie nástroje, väčšina čítačiek obrazovky číta webové stránky v poradí, v akom sú zobrazené v jazyku HTML, a tabuľky môžu byť veľmi ťažké pre čítačky obrazovky na analýzu. Je to preto, že obsah v usporiadaní tabuľky, aj keď je lineárny, nie vždy má zmysel pri čítaní zľava doprava a zhora nadol. Plus, so vnorenými tabuľkami a rôznymi rozpätiemi na stôl bunky môže urobiť stránku veľmi ťažké pochopiť.

To je dôvod, prečo špecifikácia HTML5 odporúča proti tabuľkám pre rozloženie a prečo HTML 4.01 to nepovoľuje. Dostupné webové stránky umožňujú viac ľudí, aby ich používali a sú značkou profesionálneho dizajnéra.

Pomocou služby CSS môžete definovať sekciu ako patriacu na ľavej strane stránky, ale umiestniť ju naposledy v HTML. Potom čítače obrazovky a vyhľadávacie nástroje prečítajú najdôležitejšie časti (obsah) prvé a menej dôležité časti (navigácia) naposledy.

Tabuľky sú zložité

Dokonca aj keď vytvoríte stôl s webovým editorom, vaše webové stránky budú stále veľmi zložité a ťažko udržiavané. Okrem najjednoduchších návrhov webových stránok vyžaduje väčšina rozložených tabuliek použitie množstva atribútov a vnorených tabuliek.

Budovanie tabuľky sa môže zdať jednoduché, keď to robíte, ale akonáhle to urobíte, musíte ju udržiavať. Po šiestich mesiacoch na začiatku nemusí byť tak ľahké zapamätať, prečo ste vložili tabuľky alebo koľko buniek bolo v rade a tak ďalej. Nehovoriac o tom, ak udržujete webové stránky ako člen tímu, musíte vysvetliť všetkým zainteresovaným, ako pracujú tabuľky, alebo očakávať, že budú potrebovať ďalší čas, keď potrebujú vykonať zmeny.

CSS môže byť tiež komplikované, ale zachováva prezentáciu oddelene od HTML a uľahčuje ju dlhodobú údržbu. Navyše s rozložením CSS môžete napísať jeden súbor CSS a štýlovať všetky vaše stránky tak, aby vyzerali. Potom, keď chcete zmeniť rozloženie vašich stránok, jednoducho zmeníte jeden súbor CSS a celá lokalita sa zmení - už nebudete musieť prechádzať každou stránkou naraz, aktualizovať tabuľky na aktualizáciu rozloženia.

Tabuľky sú nepružné

Aj keď je možné vytvoriť rozloženie tabuľky s percentuálnymi šírkami, často sa načítajú pomalšie a môžu výrazne zmeniť spôsob zobrazenia vášho rozloženia. Ak však použijete špecifikované šírky pre svoje tabuľky, skončíte s veľmi tuhým rozložením, ktoré nebude vyzerať dobre na monitorech, ktoré sú dimenzované odlišne od vašich vlastných.

Vytváranie flexibilných rozložení, ktoré vyzerajú dobre na mnohých monitoroch, prehliadačoch a rozlíšeniach, je pomerne jednoduché. V skutočnosti s dotazy médií CSS môžete vytvoriť samostatné návrhy pre rôzne veľkostné obrazovky.

Vnorené tabuľky sa načítavajú pomalšie ako CSS pre rovnaký návrh

Najbežnejšou cestou k vytvoreniu fantazijných rozvrhov s tabuľkami je "hniezdiť" tabuľky. To znamená, že jedna (alebo viac) tabuľka je umiestnená v inej. Čím viac tabuliek sú vnorené, tým dlhšie bude trvať, kým webový prehliadač vykreslí stránku.

Vo väčšine prípadov rozloženie tabuľky používa viac znakov na vytvorenie ako dizajn CSS. A menej znakov znamená menej na stiahnutie.

Tabuľky môžu poškodiť optimalizáciu pre vyhľadávače

Najčastejšie vytvorené rozloženie tabuľky má na ľavej strane stránky navigačnú lištu a hlavný obsah vpravo. Pri používaní tabuliek toto (všeobecne) vyžaduje, aby prvý obsah, ktorý sa zobrazuje v HTML, bol ľavý navigačný panel. Vyhľadávače kategorizujú stránky na základe obsahu a mnohé motory určujú, že obsah zobrazený v hornej časti stránky je dôležitejší než iný obsah. Zdá sa teda, že stránka s navigáciou vľavo bude mať menej dôležitý obsah než navigácia.

Pomocou CSS môžete najskôr vložiť dôležitý obsah do vášho HTML a potom pomocou CSS určiť, kde sa má umiestniť do dizajnu. To znamená, že vyhľadávacie nástroje najdôležitejší obsah najprv uvidia, aj keď ich dizajn umiestni na stránku nižšie.

Tabuľky nie vždy dobre tlačiť

Mnoho návrhov stolov netlačí, pretože sú pre tlačiareň príliš široké. Preto, aby sa stali vhodnými, budú prehliadače rezať tabuľky a tlačiť sekcie nižšie, čo vedie k veľmi rozdielnym stránkam. Niekedy skončíte so stránkami, ktoré vyzerajú dobre, ale chýba celá pravá strana. Ďalšie stránky vytlačia sekcie na rôznych hárkoch.

Pomocou služby CSS môžete vytvoriť samostatný štýl hárkov pre tlač stránky.

Tabuľky pre rozloženie sú neplatné v jazyku HTML 4.01

V špecifikácii HTML 4 sa uvádza: "Tabuľky by sa nemali používať čisto ako prostriedok na usporiadanie obsahu dokumentu, pretože to môže predstavovať problémy pri vykresľovaní na iné ako vizuálne médiá."

Ak chcete napísať platný kód HTML 4.01, nemôžete používať tabuľky na rozloženie. Mali by ste používať tabuľky 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.

Avšak HTML5 zmenilo pravidlá a teraz tabuľky pre rozloženie, zatiaľ čo neodporúčané, sú teraz považované za platné HTML. V špecifikácii HTML5 sa uvádza: "Tabuľky by sa nemali používať ako pomôcky na usporiadanie." Je to preto, lebo tabuľky pre rozloženie sú pre čítačky obrazovky ťažké odlíšiť, ako sme už uviedli.

Použitie CSS na umiestnenie a rozloženie vašich stránok je jedinou platnou cestou HTML 4.01 na získanie návrhov, ktoré ste použili pri vytváraní tabuliek, a HTML5 dôrazne odporúča aj túto metódu.

Tabuľky rozloženia môžu ovplyvniť vaše pracovné vyhliadky

Ako sa čoraz viac nových dizajnérov učia HTML a CSS, vaše zručnosti pri zostavovaní stolových tabuliek budú čoraz menej náročné. Áno, je pravda, že zákazníci zvyčajne nehovoria o presnej technológii, ktorú by ste mali použiť na vytváranie svojich webových stránok, ale žiadajú veci ako:

  • Dostupné webové stránky: dizajny, ktoré si môžu prezerať čítačky obrazovky sú poverené mnohými krajinami a korporácie nájdu dostupnosť stále dôležitejšie každý deň.
  • Údržiteľné webové stránky: návrhy, ktoré si s sebou môžu vziať, aj keď ich nebudete v budúcnosti udržiavať.
  • Flexibilné návrhy: návrhy, ktoré fungujú v mnohých prehliadačoch, rozlíšeniach a zariadeniach.
  • Rýchle sťahovanie stránok: rýchlosť sa stáva stále dôležitejšou, dokonca aj pre SEO.
  • Vytlačiteľné vzory: stránky, ktoré tlačia bez špeciálnych skriptov alebo ďalších stránok.

Ak nemôžete doručiť to, čo klienti požadujú, prestane prichádzať k vám za dizajn - obdobie. Môžete si skutočne dovoliť nechať svoje podnikanie trpieť, pretože nie ste ochotní učiť sa a začleniť techniku, ktorá sa používa od konca 90. rokov?

Morál: Naučte sa používať CSS

CSS môže byť ťažké sa naučiť, ale všetko stojí za to. Nenechávajte svoje zručnosti stagnovať. Naučte sa CSS a vytvorte si webové stránky tak, ako boli určené na vytvorenie - s rozložením CSS.