Beztabuľkový web design (alebo beztabuľkový web layout) je metóda web dizajnu a vývoja webstránok bez použitia HTML tabuliek pre účely kontroly usporiadania obsahu stránky. Namiesto HTML tabuliek sa používajú špeciálne jazyky popisujúce štýly, ako CSS (Cascading Style Sheets), ktoré slúžia na usporiadanie prvkov a textu na webovej stránke. CSS bol zavedený World Wide Web Konzorciom (W3C) na zlepšenie prístupnosti internetu, aby HTML kód bol sémantický, a nie aby sa svojou inkorporáciou do vzhľadu webstránky stal prezentačným jazykom.

Čoskoro s jeho príchodom veľa webových vývojárov považovalo CSS za výkonnejší a ľahšie použiteľný spôsob formátovania, a <FONT> tag za zastaralý. Na druhej strane prvotné CSS bolo veľmi obmedzené a ťažké na využitie v rozložení prvkov a veľa spoločných rozložení stránok (napríklad ako 3-stĺpcový design), ktoré boli veľmi ľahko implementovateľné s tabuľkami, nemali žiaden priamy ekvivalent v CSS.

Od roku 2006 [aktualizácia] sa schopnosti formátovania rozloženia prvkov pomocou CSS výrazne zlepšili. Avšak mnoho internetových stránok stále používa CSS pre formátovanie obsahu stránky tabuľky.

Odôvodnenia použitia

HTML bol pôvodne navrhnutý ako sémantický značkovací jazyk určený na zdieľanie vedeckých dokumentov a výskumných správ online. Avšak tak, ako sa Internet rozšíril z akademických a vedeckých kruhov do celého sveta v polovici 90-tych rokov a začal sa orientovať na médiá, vyhľadávali dizajnéri webstránok spôsoby zvládnutia vizuálnej podoby stránok, ktoré sú prezentované používateľom. V tejto dobe sa na tento účel používali tabuľky a tzv. "spacers" (teda medzery - zväčša priehľadné GIF obrázky definovanej výšky a šírky).

To spôsobovalo a svojou stálou použiteľnosťou stále spôsobuje celý rad problémov. Veľa stránok používa dizajn postavený na tabuľkách vnorených do ďalších tabuliek, ktoré vyžadujú neúmerné množstvo šírky pásma potrebné na prenos samotnej štruktúry stránky v porovnaní s dokumentmi s jednoduchším formátovaním. Naviac, keď je obsah stránky postavenej na tabuľkovom dizajne linearizovaný, napr. keď je parsovaný vyhľadávacími robotmi, môže byť obsah týchto stránok do istej miery prehádzaný, a tým aj zmätočne interpretovaný.

Koncom 90-tych rokov prišli na trh prvé skutočne výkonné WYSIWYG editory, čo znamenalo, že dizajnéri webstránok už viac nepotrebovali ani základnú znalosť HTML na vytvorenie webstránky. Takéto editory nepriamo podporili intenzívne používanie vnorených tabuliek na správne umiestnenie elementov na stránke. Tak ako dizajnéri editovali svoje webstránky v týchto editoroch, bol do stránok pridávaný kód, ktorý bol často zbytočný. Okrem toho môžu neskúsení dizajnéri používať niektoré prvky častejšie, ako by to vyžadovala stránka navrhnutá WYSIWYG editorom, pričom sa opäť dostaneme do stavu viacnásobného vnorenia s prebytočnými riadkami a stĺpcami.

Používanie grafických editorov, ktorých výstupom je HTML spolu s obrázkami, tiež prispievajú k šíreniu kódu nízkej kvality, majúceho často riadky s výškou alebo šírkou 1 pixel. Niekedy je takto potrebných mnoho riadkov kódu len na čisté generovanie usporiadania obsahu než na obsah samotný.

S úpadkom .com boomu v roku 2001 došlo k scvrknutiu tohto odvetvia a žiadanými sa stali programátori s vyššou skúsenosťou v tejto oblasti. V množstve prípadov sa vývoj UI (z ang. užívateľské rozhranie) dostal do rúk ľuďom s vyššou znalosťou dobrých programátorských techník. Bolo to asi v tomto čase, keď sa mnohí vyjadrovali veľmi kriticky voči neusporiadaným programátorským praktikám a myšlienka beztabuľkového dizajnu bola na vzostupe.

Kaskádové štýly (CSS) boli vyvinuté, aby zlepšili oddelenie dizajnu od obsahu a vrátili sa späť k sémantickej organizácii obsahu na Webe. Pojem "beztabuľkový dizajn" implikuje použitie CSS na umiestnenie HTML elementov na stránke, ale je nutné poznamenať, že tabuľky a CSS sa nevylučujú. Veľa skúsených HTML programátorov často používa CSS na manipuláciu s tabuľkami.

Výhody

Dostupnosť

Kvôli enormnému rastu Internetu, schváleniu zákonov proti zákazu diskriminácie ľudí s postihnutím a rastúcemu používaniu mobilných telefónov a PDA je nutné spraviť webový obsah dostupný pre širokú škálu rôznych zariadení. Beztabuľkový dizajn značne zlepšuje dostupnosť v tomto ohľade. Čítače obrazovky a zariadenia na interpretáciu Braillovho písma majú menej problémov s beztabuľkovým dizajnom, pretože sa držia logickej štruktúry.

Ako následok separácie dizajnu (CSS) a štruktúry (HTML) je takisto možné poskytnúť rôzne spôsoby prezentácie obsahu pre rôzne zariadenia, napr. handheldy, mobilné telefóny, atď. Je taktiež možné definovať špeciálny dokument popisujúci štýly pre tlač, napr. schovať alebo pozmeniť správanie sa navigačných elementov alebo prvkov zobrazujúcich reklamy, ktoré sú zbytočné v tlačenej verzii stránky.

Smernica číslo 3 súboru smerníc W3C o Dostupnosti webového obsahu hovorí o "použití značkovacích štýlov s dbaním na adekvátnosť tohto použitia". Ďalej v bode 3.3 sa spomína "použitie štýlov na riadenia rozloženia a prezentáciu".

Úspora šírky pásma

Rozumná implementácia beztabuľkového dizajnu môže dodať webstránky s menším počtom HTML tagov, a tak znížiť čas potrebný na načítanie stránky. Použitie externého dokumentu so štýlmi na rozloženie elementov na stránke umožňuje uloženie väčšieho množstva HTML tagov do cache pamäte a urýchliť načítanie aj nasledujúcich stránok z rovnakého zdroja.

Slabá implementácia beztabuľkového dizajnu môže vyústiť v nadbytočnom použití množstva riadkov kódu na stránke, čo vedie k zvýšeniu času na stiahnutie stránky. Tabuľky však majú súbor pravidiel, ktoré sú jasné a zrozumiteľné, pričom beztabuľkový dizajn často zahŕňa nutnosť vyriešiť isté nekonzistentnosti prehliadačov.

Úsporu šírky pásma však beztabuľkový dizajn automaticky neimplikuje. Ak je implementovaný správne, dostaví sa určite aspoň nejaká úspora. Tiež je možné zostaviť stránku s tabuľkami, ale v istej odľahčenej forme. Používanie WYSIWYG editorov bude mať isto väčší vplyv na dĺžku sťahovania webstránky.

Údržba webstránky

Udržiavanie webstránky môže vyžadovať časté zmeny, tak menšie ako aj väčšie, vo vizuálnej podobe webstránky v závislosti na účele webstránky. Pri tabuľkovom dizajne je štýl súčasťou samotného HTML. Zmena umiestnenia nejakého elementu na všetkých stránkach môže preto znamenať značné množstvo práce, ktoré sa s množstvom potrebných zásahov multiplikujú. Ani použitie editoru SED alebo podobného software typu "nájdi a nahraď" neuľahčí veľmi túto náročnú úlohu.

Pri beztabuľkovom dizajne s použitím CSS sú v podstate všetky informácie týkajúce sa zobrazenia umiestnené v jednom CSS dokumente. Vďaka tejto centralizácii môžu byť zmeny vykonané rýchlo a s platnosťou pre celý webový portál. Pri týchto zmenách nemusia byť HTML súbory zvyčajne vôbec upravované a ak aj áno, obmedzia sa zväčša tieto zmeny na úpravu popisov špecifikujúcich používaný štýl pre daný element (tag "class") alebo na preusporiadanie viacerých sekcií tak, aby vyhovovali novému dizajnu.

Aj vďaka tomu, že informácia o usporiadaní je umiestnená v externom súbore, je celkom jednoduché pridať nový obsah, či už ako modifikáciou existujúcej alebo pridaním novej stránky. Na rozdiel od toho môže byť takáto akcia značne časovo-náročná a vyžadujúca zmeny všetkých inštancií, aby sa docielila globálna zmena manuálne alebo s použitím špecializovaných nástrojov. Avšak niekedy je pre isté webstránky vrámci webového portálu potrebné a želané odlišné zobrazenie krátkodobo alebo aj dlhodobo, ktoré sa dosiahne použitím separátneho súboru so štýlmi.

Kvôli nekonzistentnostiam prehliadačov alebo istým špecifickým dizajnérskym technikám nemusí byť niekedy na prvý pohľad jasná skutočná stavba webstránky. Zatiaľčo je na jednej strane pohodlné mať popis štýlov v jednom separátnom súbore, môže to niekedy viesť k násilnému oddeleniu logiky zobrazenia od samotných elementov, ktoré sa tak majú zobraziť. S ohľadom na rozdielne schopnosti prehliadačov aplikovať isté druhy štýlov sa ľahko dostaneme do situácie, kedy sa stránky nezobrazia správne, čo zvyšuje nutnosť zložitejšej údržby.

Problémy

Hlavným problémom beztabuľkového dizajnu je podpora zo strany prehliadačov, pretože sú značné rozdiely v podpore CSS zobrazenia v množstve rozdielnych prehliadačov, čo je spôsobené chybami v nich alebo zlým pochopením resp. implementáciou zobrazovacej techniky pre ten-ktorý element vývojármi daného prehliadača.

Naviac, podpora CSS ako takého je v starších prehliadačoch veľmi kusá, čo môže spôsobovať značné problémy, ak aj takéto prehliadače musia byť brané do úvahy ako možný nástroj zobrazenia webstránky.

Prechod na beztabuľkový dizajn bol a je stále pomalý aj kvôli software, ktorý dokáže takúto konverziu vykonať. HTML editor ako napr. Adobe Dreamweaver vie zmeniť tabuľkový dizajn na vrstvový a naopak. Hoci by takýto nástroj konverziu trochu uľahčil, sú tu komplikácie s kvalitou takejto konverzie.

Pôvodné CSS sa taktiež nezameralo na rozloženie elementov ale skôr na samotný popis štýlov pre zobrazenie. Nové elementy, akými sú "float" a absolútne alebo relatívne umiestnenie elementov nútilo dizajnérov, ktorí doviedli tabuľkový dizajn do veľmi flexibilnej mriežkovej štruktúry v tradícii Brunelleschiho a Masaccia, prísť s množstvom trikov, ako prinútiť CSS zobrazovať ich stránku podľa predstáv.

Alternatívy

Sú jasné výhody centralizácie štýlov do jedného alebo dvoch CSS súborov. Globálne editovanie alebo jednoduché zmeny sú týmto spôsobom uľahčené. A s príchodom jazykov na strane serveru (akými sú PHP či ASP) sa umožnilo vnoriť CSS a HTML súbory pomocou direktívy "include".

V súčasnosti používajú vysoko-kvalitné webové aplikácie prezentačnú vrstvu alebo systém šablón, ktoré HTML a CSS ako nadstavbu aplikačnej logike jednoduchým spôsobom než by duplikovali značkovací jazyk vo viacerých súboroch na webstránke.

Používanie tabuliek

Termín "beztabuľkový dizajn" bol mnohými interpretovaný ako stratégia, ktorá bezpodmienečne odmieta akékoľvek použitie tabuliek v návrhu webstránok. To viedlo niektorých k vyhýbaniu sa tabuľkám aj na takom mieste, kde ich použitie bolo oprávnené. Používanie alternatívnych mechanizmov nejakých rozdeľovačov na zobrazenie tabuľkových dát je rovnakou návrhovou chybou ako použitie tabuliek na rozdelenie obsahu webstránky. Niektoré zdroje preto na sprehľadnenie pojmov uvádzajú pojem "beztabuľková definícia rozloženia stránky".

Na druhej strane, použitie tabuliek nevyhnutne neznamená nasadenie elementov popísaných v špecifikácii HTML 4.0. CSS samotné definuje "model tabuliek", ktorý dovoľuje uplatnenie sémantiky "tabuľkovej reprezentácie" elementom "display:table". Týmto spôsobom je tabuľkové zobrazenie prenesené z úrovne HTML do CSS. Jeden dôvod na takéto rozlišovanie, ktorý je občas prehliadaný, je nedostatočná podpora CSS modelu tabuliek v prehliadači Internet Explorer 7; avšak Internet Explorer 8 už takúto funkcionalitu podporuje.