align horizontální zarovnání left, center, right, justify (= do bloku) width minimální šířka buňky počet pixelů, procento šíky tabulky

Transkript

1 Dvojí použití tabulek Na internetových stránkách se tabulky používají ve dvou případech: 1. Jestliže je potřeba udělat klasickou tabulku. 2. Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba). Formátováním myslím úpravu vzhledu. Dělá se to čtyřmi způsoby: 1. Formátování buněk přidáním atributů tagu <td> (šířky buněk třeba) 2. Úpravou celé tabulky použitím atributu u tagu <table> (síla rámečku třeba) 3. Úpravou formátu obsahu buněk (barva písma třeba), to je jasné 4. Úpravou okolí tabulky (např. její vycentrování na stránce), to zde nerozvádím Atributy buněk Buňkám tabulky se dají předepisovat rozmanité formátovací vlastnosti: atribut tagu <td> význam možné hodnoty align horizontální zarovnání left, center, right, justify (= do bloku) valign vertikální zarovnání top, middle, bottom, baseline (účaří prvních řádků je zarovnáno) width minimální šířka buňky počet pixelů, procento šíky tabulky height minimální výška řádku počet pixelů style nowrap background bgcolor bordercolor bordercolorlight bordercolordark obecný atribut CSS, kterým se dá udělat všechno obsah buňky se nebude zalamovat obrázek na pozadí barva pozadí barva rámečku světlejší a tmavší vykreslovací barva rámečku, přehlušuje bgcolor jakýkoliv popis CSS stylu, ale většinou to nefunguje úplně přesně bez hodnoty (prostě se tam jenom napíše <td nowrap>) URL obrázku, funguje v IE od verze 3 a v NN až od verze 4 jakákoliv barva Příklad: <td width="33%" background="pozadi.gif" nowrap bgcolor="teal" bordercolor="#ff00ff"> - 1 -

2 Buňka (td) se šířkou 33% (ze šířky tabulky) s obrázkem na pozadí; pokud se obrázek nenajde nebo bude průhledný, bude pozadí zelenomodré (teal). Obsah se nebude zalamovat (nowrap -- to je rizikové vzhledem k nastavené šířce v procentech), rámeček bude mít základní barvu světle fialovou (#ff00ff). Formát celé tabulky Globální vlastnosti tabulky už jsme nakousli, teď je zopakuji celé a přidám hodnoty, aby to bylo kompletní. atribut tagu <table> význam možné hodnoty align obtékání tabulky ostatním textem, totéž co "align" u "img" (obrázků) right -- tabulka bude vpravo a bude obtékána zleva left -- obtékání zprava center -- vystředění tabulky bez obtékání cellpadding vnitřní okraj buněk počet pixelů cellspacing vnější okraj buněk počet pixelů border šířka rámečku okolo tabulky počet pixelů width šířka tabulky počet pixelů nebo procent šířky stránky background, bgcolor, bordercolor, bordercolorlight, bordercolordark totéž, co u vlastností buněk např. <table cellpadding="15" border="1" rules="rows" cellspacing="0" frame="void" align="left"> Tabulka má nastaveny rámečky o šířce 1 pixel (border). Vnější rámeček okolo tabulky by se neměl vykreslovat (frame=void). Tabulka bude zarovnána doleva a ostatní text ji asi bude obtékat, pokud nebude moc široká; kdyby měla ještě nastavenou šířku, obtékal by ji jistě. Šířky sloupců Problematika šířky buněk a tabulek je překvapivě velmi složitá. Naštěstí existuje několik pravidel, podle kterých se stanovují šířky buněk a tabulek. Řadím podle priority. Pravidlo šířky sloupce Sloupec je tak široký, jak široká je nejširší buňka toho sloupce. To bylo vidět na předchozích příkladech (viz základy tabulek): sloupce se udělají tak široké, jaký je nejširší obsah buňky v tom kterém sloupci. Pravidlo minimální šířky podle obsahu - 2 -

3 Buňka je minimálně tak široká, jak je široké nejdelší slovo nebo obrázek v buňce. Tabulka nemůže být užší, než nejširší obrázek v jejím obsahu. Tak se někdy mohou přihodit tabulky širší než okno. Pravidlo nastavené šířky Buňkám a tabulce se dají nadeklarovat šířky, které ale nemusejí v konečném efektu platit. Zadávání šířek popisuji níže. Konfliktní pravidla Ve většině případů prohlížeče před vykreslením tabulky vyhodnocují, který sloupce bude jak široký, podle složitých pravidel. Přirozené šířky Tabulku můžete prostě nechat, ať si stanoví šířky sloupců sama podle obsahu. Prostě nebudete zadávat žádné šířky (zadávání popisuji dále). U velmi dlouhých tabulek se to nehodí, ale většinou je přirozené (ne)zadávání šířek výhodou. Zadávání šířek Buňkám a tabulce se dá předepsat šířka a výška explicitně. Jde to několika způsoby: Zadávání šířky v pixelech Atribut width se dá použít u buňky (tag <td>) a u tabulky (tag <table>). Např: <td width="100"> bude buňka tabulky o šířce 100 obrazovkových bodů. Nebo: <table width="400"> bude tabulka široká 400 pixelů. Zadávání šířky v procentech Prostě se za to číslo napíše procento. Např: <td width="20%"> je buňka, která by měla zabrat 20% šířky tabulky. Dvě poznámky: jednak píšu "měla by", protože se může dostat do konfliktu, o tom níže. Druhá poznámka je zdůraznění toho, že 100% je v tomto případě šířka tabulky. Když napíšu: <table width="90%">, tak tabulka zabere 90% šířky okna (nebo prostě prostoru, do kterého by se mohla vykreslit). Pak je šířka tabulky prostě závislá na prohlížeči a rozlišení. Výška Podobným způsobem, atributem height, se dá nastavit výška buňky. Nebudu se tím zabývat, protože vertikálního místa má stránka dost (dá se rolovat), takže nevznikají konflikty. Jenom zmíním, že pokud se tabulce zadá výška v procentech, tak také počítá procenta z výšky okna

4 Pozor na syntaxi: width a height mají ta písmenka t a h na konci přeházená. Mockrát jsem se s tím navztekal, když se mi to nechtělo zobrazovat správně. Konflikt šířek V praxi se mohou dostat do konfliktu čtyři údaje a okolnosti: Obsah buněk Zadaná šířka všech buněk Zadaná šířka tabulky Šířka okna V ideálním případě spolu šířky nekolidují. To je když součet šířek buněk je rovný nastavené šířce tabulky, žádná buňka nemá extrémně široký obsah a okno je širší než tabulka. Tento ideální případ je velmi řídký. V praxi nastává celá škála možných nerovností. Proberu jen ty nejčastější, všechny zmínit asi nedokážu. Vždy se ale operuje se součtem šířek sloupců, který se v prohlížeči stanoví tak, že se prostě vezmou všechny buňky ve sloupci, najde se ta nejširší (ať už nejširší deklarací nebo obsahem) -- to je požadovaná šířka sloupce -- načež se to sečte ze všech sloupců. Šířka tabulky > součet šířek sloupců Snadnější případ, protože šířka v tabulce přebývá. Tabulka se pak vykreslí v deklarované šířce. Rozdíl šířky, který vlastně nepatří žádnému sloupci, pak rozdělí rovnoměrně mezi sloupce. (Trochu změnu do toho vnášejí nové vlastnosti tabulek, kde se dá k tagu <col> nastavit šířka jako násobek, to teď není důležité). Šířka tabulky < součet šířek sloupců Tabulka se většinou vykreslí v požadované šířce. Prostor, který jí chybí, se snaží ubrat rovnoměrně jednotlivým sloupcům. Některé sloupce ale nejdou zužovat pod určitou mez, protože mají široký obsah (dlouhé slovo nebo široký obrázek). Takové sloupce se smrsknou na tu minimální šířku, ale víc ne. Pokud by se maximálně smrsknuly všechny sloupce, ale stále by byl součet minimalizovaných sloupců širší, než požadovaná šířka tabulky, vykreslí se tabulka širší. Šířka tabulky versus šířka okna Pokud je šířka tabulky stanovena zápisem v tagu <table>, nemá šířka okna na šířku tabulky vliv. Pokud tabulka nemá předepsanou šířku, vykreslí se tak široká, jaký je součet šířek sloupců. Ovšem pouze v případě, že to není více než šířka okna. Pokud by okno bylo užší než součet šířky sloupců, zužují se sloupce rovnoměrně výše popsaným způsobem. Opět ale nejde jít pod minimální šířku, takže občas tabulka přesáhne okno. Existuje css vlastnost table-layout: fixed, která nerozměrované tabulce zakáže zužovat se podle okna. Je podporována Internet Explorerem 5 a myslím, že i Mozillou. Zápis je <table... style="table-layout: fixed"> - 4 -

5 Rozměry tabulky v praxi Možná si říkáte, k čemu je dobré zadávat šířku buňky, když se nakonec stejně přizpůsobí. To je správný postřeh. Ale existují některé standardní metody, jak pracovat efektivně: 1. Vůbec šířky nezadávat, prohlížeč si je stanoví sám tak, jak potřebuje. Tuto metodu už jsem vyzdvihoval. 2. Zadat pouze šířku tabulky v procentech, aby nebyla moc mrňavá, ale samotné buňky nerozměrovat. 3. Zadávat šířku všech buněk v procentech tak, aby dohromady dávaly stovku. Šířka tabulky se může nechat také v procentech nebo se vůbec nemusí zadávat. 4. Zadat pevnou šířku tabulky v pixelech a všechny buňky zadat také v pixelech, aby součet odpovídal. Zkontrolovat, zda není v nějaké buňce příliš široký obsah (a případně tam spojit buňky, je-li to nutné). Toto je nejčastější způsob práce s rozměry tabulky. Problémem je stanovit takovou šířku, aby byla čitelná na všech strojích. Obvykle se dává něco kolem 800 pixelů, aby se to vešlo do okna každému. Dávat víc, je jasná formátovací chyba. Je vcelku sporné, zda takovou práci s tabulkami lze doporučit. Také si možná říkáte, že musí být pěkná otrava psát tam ty šířky ručně. Naštěstí to ale všechny wysiwyg editory umějí automaticky. Příklad Kód a jeho zobrazení: Velmi dlouhý text, aby se zalomil na další řádky Nějaký text Jiný text Ahoj (:- ) Ni c <table border="1"> <tr> <td width="100">velmi dlouhý text, aby se zalomil na další řádky</td> <td width="30" align="center">ahoj</td> <td width="20">(:-)</td> </tr> <tr> <td width="20">nějaký text</td> <td width="200">jiný text</td> <td width="20">nic</td> </tr> </table> - 5 -

6 Jak je vidět, mohu buňkám zadávat různé šířky, ale skutečná výsledná šířka buňky bude stejná, jako nejširší buňka ve sloupci. Na příkladě by měla být vidět i další věc: Pokud se obsah buňky nevejde na jednu řádku, prostě se zalomí. (To funguje pouze u buňky s nastavenou šířkou!) Vykreslování mřížky - FRAME a RULES Mřížka a rámeček se kolem buněk tabulky normálně vykreslují. Nové atributy frame a rules umožňují předepsat, že některé čáry (např. čáry mezi sloupečky) se vykreslovat nebudou. Atribut FRAME přitom kontroluje zobrazení vnějšího okraje tabulky, RULES popisují zobrazování vnitřních čar. Frame - vykreslení rámečku Jako hodnotu atributu frame můžu zadat několik hodnot: <table frame= popis void border (standardní hodnota) box hsides vsides above below lhs rhs tabulka nemá rámeček rámeček je okolo celé tabuly horizontální strany (= horní a dolní) vertikální okraje (= pravý a levý) zobrazí se pouze horní okraj tabulky pouze spodní okraj levá strana tabulky pravá strana tabulky Aby to fungovalo, musím navíc zadat nenulovou šířku okraje (border), jinak se nezobrazí nic. Příklad: <table border="2" cellpadding="6" cellspacing="0" width="90%" frame="hsides"> Tato tabulka by neměla mít zobrazen pravý a levý okraj. Rules - vykreslení mřížky Atribut RULES se používá úplně stejně jako FRAME. Přestože má méně možných hodnot, připadá mi využitelnější: <table rules= hodnota none all (standardní hodnota) rows cols mřížka nebude vykreslena mřížka bude mezi všemi buňkami tabulky mřížka bude pouze mezi řádky (nejzajímavější hodnota) mřížka je pouze mezi sloupci tabulky - 6 -

7 groups mřížka bude pouze mezi oddíly tabulky (taby tbody a thead) a mezi skupinami sloupců (tab colgroup), viz níže Kupříkladu ukážu, jak tato tabulka začínala: <table border="2" cellpadding="6" cellspacing="0" width="90%" frame="vsides" rules="rows"> Tato tabulka by meměla mít zobrazen horní a spodní rámeček a mřížku by měla mít pouze mezi řádky. Opět je nutné mít nenulový atribut border, jinak se samozřejmě nevykreslí vůbec nic. Pokud se vám nezobrazily efekty, které popisuji, patrně používáte prohlížeč, který je nepodporuje. Z toho mimo jiné vyplývá, že se na tyto efekty nikdy nemůžete spolehnout. Naštěstí jde o takovou jenom libůstku, jejíž nefunkčnost zase tak nebolí. Formátování sloupců - <col> Kdo někdy ručně zadával šířky a zarovnání buněk v nějaké větší tabulce, asi mu vadilo, jak je to pracné. Přitom v každém sloupečku se zadávají všem buňkám stejné hodnoty! Trochu nám situaci usnadnily wysiwyg editory, které tam ty atributy (width="236" align="center" třeba) doplnily automaticky, ale stejně je pak ten kód příliš "nafouknutý". Čas dozrál na jednoduché formátování sloupců. Jsou na to nové tagy <col> a <colgroup> (ten jenom očas)

8 Příklad: A B C D E F Tabulka má tento kód: <table border="2" cellpadding="6" cellspacing="0" width="300"> <col align="left" width="20"> <col align="center"> <col align="right"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> </table> Krátký popis: tagy <col> se dávají hned za tag <table> a mělo by jich být tolik, kolik je sloupců. Každý jeden tag popisuje formátování jednoho sloupce. Použitelné atributy u <col> jsou šířka width, align, bgcolor, valign a style. Možná by fungovaly i jiné, ale na to se nelze spolehnout. Šířku lze kromě pixelů (zápis bez jednotky) a procent zadávat též v násobku: např. sloupec <col width="3*"> bude z případného zbylého místa nárokovat 3 díly pro sebe (z celkového součtu dílů nárokovaných všemi sloupci). Pokud se má třeba pět sousedních sloupců formátovat stejně, je možné u <col> použít atribut span: <col span="5" align="right">. Namísto tagu <col> je možno použít tag <colgroup>. (Dokonce by se to správně mělo dělat vždy.) Jediný rozdíl spočívá ve vykreslování mřížky, pokud u tabulky použiji atribut rules="groups". (Další teoretický rozdíl je v tom, že za tag <colgroups> se dají vnořovat <col>.) Skupiny řádků Existují párové tagy: <tbody>, <thead> a <tfoot>. Mohou se jimi logicky oddělovat řádky, které patří k sobě. Hlavbní uplatnění to má při vykreslování mřížky. V budoucnosti se takto budou pravděpodobně vymezovat hlavičky a patičky, které se budou tisknout na každé stránce nebo budou při rolování zůstávat na obrazovce. Nic z toho ale dnešní prohlížeče nepodporují (aktualizováno 2003). Jediný viditelný efekt dělá <tfoot>: vykresluje skupinu řádků na konci tabulky, i když je uveden na začátku (IE 5+), může to být kontraproduktivní

9 Shrnující příklad Čaj Druh Názor lipový bylinky slaďoučký třezalky bylinky na spaní Cherry tea Šípkový znám ještě další černý s ovocnou vůní vlastně ovocný různých druhů nic moc jedině s cukrem přijďte popít Tato tabulka se v HTML zapíše takto: <table border="2" cellpadding="6" cellspacing="0" rules="groups"> <colgroup span="2" align="center" valign="bottom" width="40"> <colgroup bgcolor="#00ffff"> <thead> <tr><td>čaj</td><td>druh</td><td>názor</td></tr> </thead> <tbody bgcolor="red" align="right"> <tr><td>lipový</td><td>bylinky</td><td>slaďoučký</td></tr> <tr><td>třezalky</td><td>bylinky</td><td>na spaní</td></tr> </tbody> <tbody> <tr><td>cherry tea</td><td>černý s ovocnou vůní</td><td>nic moc</td></tr> <tr><td>šípkový</td><td>vlastně ovocný</td><td>jedině s cukrem</td></tr> </tbody> <tfoot> <tr><td>znám ještě další</td><td>různých druhů</td><td>přijďte popít</td></tr> </tfoot> </table> Poprvé jsme si zkusili vykreslování mřížky po oddílech (rules="groups"). Opravdu důležitou věcí je spojení dvou prvních sloupců do jedné skupiny atributem span="2". Za pozornost stojí vertikální zarovnání na spodek (normálně je na střed) u prvního a druhého sloupce a barva pozadí sloupce třetího. Dále atributy tagu <tbody>, které tak zformátují několik řádků najednou (kdyby se to dalo k <tr>, tak to ovlivní jen jeden řádek). U buněk "slaďoučký" a "na spaní" si všiměte, že barva pozadí je převzata z <tbody> a nikoliv z <colgroup>. Co nefunguje V příručkách a textech o HTML se objevují některé nové možnosti formátování tabulek, které jsou sice v normě HTML, ale prostě nikde nefungují. Jedná se o: Zobrazování patičky automaticky na konci tabulky Zarovnání sloupce na znak desetinné čárky: <col align="charoff" char=","> - 9 -

10 Design pomocí tabulek a proč ho nepoužívat Mnoho profesionálů v oblasti webdesignu si bez tabulek neumí představit návrh hezkých stránek. Ale takové zkrášlení s sebou přináší jistou nefunkčnost, protože se to pomalu zobrazuje. Pominu-li tuto nepříjemnost, dá se s tabulkami rozumně kouzlit. Zúžení obsahu Mnoha čtenářům vadí, když jsou moc široké stránky. Špatně se to čte, protože se pletou řádky. Mimochodem právě to je důvod, proč se v novinách používá sloupcová sazba. Nejčastější způsob, jak text zúžit, je uzavřít ho do tabulky, která má jen jedinou buňku. Tabulce se předepíše šířka (atributem width="šířka v pixelech" u <table> nebo <td>). Potom se bude text zobrazovat ve sloupečku uvedené šířky. Běžně se používají šířky od 400 do 700 obrazovkových bodů (pixelů). Šířka nad 800 je hloupost, protože 800 je šířka nejčastěji používaného zobrazení. Problém šířky + vychytávka Pokud má uživatel menší rozlišení nebo malé okno, musí si s textem v široké tabulce při čtení posunovat doprava doleva. Asi to znáte a dáte mi za pravdu, že to je na pěst. Naštěstí existuje řešení. Spočívá v tom, že tabulce se šířka nezadá, ale buňce s textem ano: <table border="1" cellpadding="6" cellspacing="0"> <tr> <td width="500"><font size="6">tento text...</td> </tr> </table> Tento příklad si můžete zobrazit v prohlížeči. Je v něm sloupeček textu, který má šířku 500 pixelů, pokud je v širším okně. Pokud by byl v okně užším než 500 pixelů, zúží se. Pokud používáte nějaký wysiwyg editor, musíte si dávat bacha, aby vám nevložil šířku i do tagu <table>. Design jako rám Protože rámy (frames) s sebou přinášejí řadu nevýhod, je někdy vhodné místo nich používat tabulku, která vypadá jakoby sestavená z rámů. Myslím, že je to jasné: tabulka obsahuje dvě buňky, přičemž ta levá (s pevnou šířkou) obsahuje nějaké odkazy a ta pravá vlastní text stránky. Hlavička stránky třeba s logem Nějaké odkazy odkaz odkaz Hlavní text stránky, který je obvykle mnohem delší a širší než levý sloupec s odkazy. Hlavní efekt spočívá v použitém obrázkovém nebo barevném pozadí. Jsou dvě možnosti:

11 1. Jednodušší způsob používá dva obrázky (zvolené nelépe tak, aby navazovaly) a spočívá v nastavení pozadí buňkám: <td background="pozadi.gif">. 2. Starší, elegantnější a poněkud složitější způsob (který se dá využít i u beztabulkových designů) používá jako pozadí jediný uzoučký obrázek gif, který je velmi široký. V levé části má kresbu stejné šířky, jakou bude mít levá buňka tabulky. Ještě je také dobré nastavit opakování jenom v ose y. Můžete si zobrazit příklad, který opakuje i v ose x. 3. Ještě musím zmínit, že buňky takové "rámové" tabulky musejí mít nastaveno vertikální zarovnání (valign) nahoru (top). Složitější příklad Nejčastější pojetí tabulkové úpravy je toto: Hlavička Levý sloupec Obsahuje zpravidla hodně odkazů Obsah Obsah stránky, vlastní text, který je důležitý. Pravý sloupec Patička Někdy stránka nemá pravý sloupec nebo patičku, časté variace se týkají rohů stránek.. Zjednodušeně vypadá v HTML tabulková úprava sloupců takto: <table width="760"> <tr> <td colspan="3" > Hlavička </td></tr> <tr><td rowspan="2" width="150">levý sloupec</td> <td width="500">obsah</td> <td rowspan="2" width="110">pravý sloupec</td> </tr> <tr> <td>patička </td> </tr> </table> Všimněte si zadaných šířek. Tabulka je široká 760 pixelů, což se každému vejde do okna i s rolovací lištou. Samozřejmě se tam musí dopsat spousta formátovacích parametrů; zejména se jedná o vertikální zarovnání a barvu pozadí. To se dá udělat pomocí html atributů i pomocí CSS. Rychlost Pomalost zobrazování Prohlížeče zobrazí tabulku až po té, co dorazí na klienta celá. Neumí to vykreslovat po buňkách. Pokud třeba celou stránku uzavřete do tabulky, čtenář kouká celou věčnost na prázdnou stránku. Proč to tak je: prohlížeč se bojí, že v tabulce najde něco strašně širokého, kvůli čemuž by musel měnit šířku sloupců. Takže raději zobrazí tabulku až po té, co se ujistí, že našel nejširší objekty. Z toho vyplývá, že si nelze dovolit zavírat do tabulek texty, které se načítají déle

12 Kvůli tomu vlastně nelze s úspěchem použít design-jako-rám pomocí tabulek. Takovými designy je dnešní web (doplněno 2003) přeplněný. Tabulkový design je jeden z důvodů, proč se web zdá být tak pomalým. Naštěstí existují některá řešení. Řešení pomalého zobrazování Rozlišovat projekty Pokud stavíte pro nějakou firmu komerční prezentaci, tak tam ty tabulky klidně můžete použít, protože 1. na firemní stránky stejně nikdo nekouká 2. akorát majitel firmy, ale ten to má v cache paměti, takže se mu to zobrazuje rychle 3. firmy platí za krásu a ne za funkčnost, takže se bez tabulek asi neobejdete. Rozměrovat obrázky Jde pouze o částečné řešení. U obrázků v tabulkách je uvedení rozměrů naprostou nutností. Když se totiž rozměry neuvedou, musí prohlížeč načíst celý obrázek (což může trvat dlouho), zatímco se vůbec nic z té tabulky nezobrazuje, protože prohlížeč čeká, jak bude ten obrázek velký a jestli se mu tam vůbec vejde. Obzvlášť varuji před počitadly: ty se většinou stahují dlouho (protože se na serveru počítají) a nemají explicitně uvedenou šířku. Použít více tabulek Normálně ten text rozdělte do více tabulek. Ta první nechť je kratší, zobrazí se rychle a čtenář může číst, zatímco se stahuje ta druhá tabulka. Ale pozor! Velice špatně se takové stránky aktualizují. Lépe řečeno skoro to nejde. Toto řešení se tedy dá použít jen u stránek, které se dlouhodobě nebudou měnit, nebo u serverem generovaných stránek (CGI, PHP, ASP). Je to k vidění např. na serveru Lupa.cz. Je to pouze čátečné řešení problému pomalého zobrazování. Obtékané tabulky Moje oblíbené řešení pro částečnou sloupcovou sazbu. Na začátek stránky umístím tabulku obtékanou zleva (align="right") s nějakým textem, který logicky patří od bočního textu. Rychlost zobrazování je uspokojivá, protože obsah té tabulky je malý. MaKr mi navíc poradil, že když se takové tabulce nastaví velmi velká výška (height="10000" třeba), tak to vypadá, jako kdyby to byl jako rám. CSS pozicování Pozicovací vlastnosti kaskádových stylů umožňují umístit nějaký blok textu nebo prostě cokoliv na jakékoliv místo dokumentu. Dá se tak udělat i sloupcová úprava. Problém je snad jen v tom, že tyto vlatnosti jsou různými prohlížeči interpretovány různě, takže je to potřeba děsně dlouho ladit,

13 přičemž stejně není nic zaručeno. (Doplněno 2003: většinové prohlížeče už to podporují velmi dobře.) Na druhou stranu tento postup neodporuje duchu HTML, jako to dělají tabulky. CSS obtékání Pětkové verze prohlížečů umějí správně vykreslovat css vlastnost float, takže se design dá postavit z divů, které se nechají obtékat. Sloupcová úprava Mnoho dnešních zpravodajských serverů má na stránce jedinou tabulku. Ta obsahuje v prostředním sloupci obsah, v levém odkazy a v pravém také odkazy. <table><tr> <td>levý sloupec</td> <td>obsah stránky jakkoliv složitý</td> <td>pravý sloupec</td></tr> </table> Neexistuje žádný způsob, jak donutit prohlížeč, aby obsah z jedné buňky přeléval do jiné podle délky obsahu. Do buněk se to musí rozdělovat ručně. Je to na pěst. Vnořené tabulky Do buňky tabulky můžete vložit cokoliv, takže i třeba další tabulku. Sami určitě přijdete na to, kdy se to hodí, většinou je to potřeba u komplikovaných layoutů. Já osobně nemám zanořované tabulky moc rád, protože je to nepřehledné a pekelně to zatěžuje klienta. Příznivci této technologie rádi pracují ve FrontPagi nebo ve Wordu, kteréžto programy se tváří, že s vnořenými tabulkami pracují levou zadní, což je sice pravda, ale autor většinou neví, ve které tabulce zrovna co deklaruje. Začátečníci jsou navíc uchváceni takovou tužtičkou, která tabulky kreslí, ale přináší to jenom komplikace. Jednou jsem opravoval takové zvěrstvo z FrontPage, kde byl na jednom místě text uvnitř pěti vnořených tabulek. Není asi třeba zdůrazňovat, že je to lajdáctví. Neznám důvod, proč zanořovat více jak dvě tři tabulky. Při tvorbě dynamických stránek (PHP, ASP) je někdy potřeba, aby se obsah nenačítal po řádcích, ale po sloupcích. Jediné rozumné řešení jsou právě vnořené tabulky, v tomto případě je to na místě