Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

Proč je tabulkový layout zastaralý

18. 02. 2004

Webdesign se vyvíjí a staré pravdy přestávají platit. Díky nástupu větších monitorů je dnes tabulkový layout méně použitelný než dříve.

V konferenci Intervalu.cz se objevil zajímavý dotaz: jak navrhnout tabulkový layout s pevnou šířkou tak, aby se stránka při tisku vešla na šířku papíru. Odpověď najdete v každé učebnici webdesignu a je i v mém starém článku Jak zvolit šířku stránky z jara 2001. Co je na tom tedy tak zajímavého?

Zajímavé na tom je, že ona tradiční odpověď je dnes už k ničemu. Bezpečná šířka pro tísk na formát A4 činí 648 pixelů, pro americký Letter 530 pixelů. V časech monitorů s rozlišením 640 x 480 a s bezpečnou šířkou 620 pixelů tedy nebyl problém bezpečnou šírku pro tisk dodržet. Ale dnes?

Nenapadá mne jiné řešení než kaskádové styly (CSS), s jejichž pomocí jde nadefinovat jinak široká tabulka (resp. její sloupce) pro obrazovku a jinak pro tisk. Neobejde se to ovšem bez různých triků obcházejících chybný boxmodel apod., takže navrhnout layout bez tabulek bude asi jednodušší.

Vychází mi z toho zajímavý závěr (a proto je vlastně zajímavý ten původní dotaz). CSS layout není jen modernější řešení tradičních úkolů. Je to jediné řešení nových úkolů. Pokud chcete udělat stránku alespoň stejně dobře, jako před několika lety tabulkami, dnes už se bez CSS neobejdete.

Marek Prokop, 18. 02. 2004 14:48, Pošli komentář

Komentáře

1. Yuhů: Šířku lze definovat procenty

19. 02. 2004 15:57

Pokud se tabulkou udělá tzv. gumový layout, vytiskne se na papír celá a na obrazovku se také vejde celá. Je ale potřeba tabulce nastavit šířku v procentech, nejlépe asi něco málo pod 100 %. Šířky sloupců potom lze definovat v procentech, ale i v pixelech a zbytek šířky nechat dopočítat a doplavat. Takže článek se v tomto mýlí, jde to i tabulkou.

Je ale pravda, že gumový layout na šířku není obecně oblíbený. Ve chvíli, kdy je požadován layout na přesný počet pixelů, je nepochybně nutné použít CSS pozicování nebo obtékání namísto tabulky. V tom má článek naprostou pravdu.

2. Petr Bříza:

19. 02. 2004 20:30

Nepochopil jsem, jaký je rozdíl v tom, zda v CSS definuji šířku divu, nebo tabulky.

Co myslíte chybným boxmodel? Pokud známou chybu MSIE, tak tato chyba se projeví přece i u beztabulkového layoutu. Navíc tabulkou snadno nahradím chybějící podporu max-width v MSIE (šířku definuji u <td>). Tímto způsobem by možná šlo vyřešit zmíněný požadavek. Tabulka by totiž na monitoru byla v plné šířce (např. 1024px) a při tisku by se patřičně zúžila.

3. Kelso:

19. 02. 2004 22:08

O tom rozličnom formátovaní tlače píše Yuhů v príručke: www.jakpsatweb.cz/css_print.htm.

4. Marek Prokop: Proč pevná šířka

19. 02. 2004 23:46

Dušane, článek hovoří jen o pevné šířce tabulky, protože tak prostě zněl původní dotaz. Píše se to hned v první větě: …jak navrhnout tabulkový layout s pevnou šířkou… Navíc je to logické. Jak správně píšeš, kdyby tabulka měla šířku plovoucí, problém by vůbec nevznikl a nikdo by se asi neptal na řešení.

5. Marek Prokop: DIV nebo tabulka

19. 02. 2004 23:46

Pane Břízo, já také nevidím rozdíl mezi aplikací CSS na tabulku nebo jiné prvky, např. DIVy. Přesně to jsem chtěl svým článkem říci. Tazatel se zřejmě CSS bál a předpokládal, že tabulkou to bude jednodušší. Chtěl jsem poukázat na to, že nebude.

6. Yuhů: Máš úplnou pravdu

20. 02. 2004 03:17

Aha, to je pravda. Než jsem dočetl na konec příspěvku, tak jsem původní zadání zapomněl. (Evidentně jsem tuto chybu neudělal sám.)

Možná, že CSS je jediné řešení nových úkolů je trochu moc zevšeobecněný závěr, a tak jsem se odhodlal k reakci. Pevná šířka tabulky se správným tiskem mi totiž přijde jako starý úkol. Akorát se na správný tisk stránek dost často kašlalo (fixní tabulky by se opravdu musely děla užší) a teprve nyní se o tom pořádně uvažuje.

Komentáře k tomu článku jsou uzavřeny.

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.