Portál AbcLinuxu, 31. října 2025 18:23
Dlouhou dobu byla využívána a nerozpakuji se říct zneužívána značka <table> k vytváření struktury layoutu webových stránek. To s sebou neslo (a dosud často nese) řadu problémů, především co se týká přístupnosti stránek handicapovaným uživatelům, ale taky strojové analýzy obsahu stránek a podobných šaškáren. Dnes proto každý slušný návrhář webových stránek ví, že se pro layout prostě používá element <div> (ti progresivnější vědí i o různých zajímavých značkách v připravovaném HTML 5). Co když ale potřebujeme vytvořit skutečnou tabulku?
Nedávno se mi dostal od našich spolupracovnáků do ruky návrh layoutu jistých stránek. Kód HTML i CSS v nich je velmi dobře udělaný, „čistý“, podle standardů. Zarazila mě maličkost: struktura, která je tabulkou, je v kódu reprezentována asi nějak takto:
<div class="dataList"> <div class="even"><span class="monthSelect">So 1.9.2007</span></div> <div class="odd"><span class="date">25.8-1.9</span<>a href="#">Rekreace penzistů</a> (Běleč nad Orlicí)</div> <div class="odd"><span class="date">27.8-1.9</span><a href="#">Pobyt pro maminky s dětmi</a> (Volyně) </div> .... </div>
Přiznám se, že mě to docela překvapilo. Vždyť řečeno slovy klasika „tváří se to jako tabulka, vypadá to jako tabulka, funguje to jako tabulka“, tak proč nepoužít <table>? A odtud tedy otáka na místní čtenářstvo: kam, podle vás, element <table> patří; nebo jinak: co je skutečně tabulka? Hlasujte, prosím, v anketě!
        Tiskni
            
                Sdílej:
                 
                 
                 
                 
                 
                 
            
    
 21.12.2007 20:36
Martin Stiborský             | skóre: 26
             | blog: Stibiho bláboly
             | Opava
        21.12.2007 20:36
Martin Stiborský             | skóre: 26
             | blog: Stibiho bláboly
             | Opava
         21.12.2007 20:41
freshmouse             | skóre: 42
             | blog: Bruno Banány
        21.12.2007 20:41
freshmouse             | skóre: 42
             | blog: Bruno Banány
            
         21.12.2007 22:04
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        21.12.2007 22:04
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
         Nekdo prisel s tim, ze TABULKA NA LAYOUT = NEKOREKTNOST. A proc, to kolega v blogpostu docela dobre popsal. Pouziti tabulky pro layout cpe nastavovani vzhledu stranky do markupu a drasticky tim snizuje jeho nejdulezitejsi vlastnost -- semanticnost. Ctecce pro slepce nebo ruznym crawlerum je uplne jedno, jestli je menu nahore dole nebo vzhuru nohama -- zajimaji je ciste informace.
Na pozicovani je tu CSS.
 Nekdo prisel s tim, ze TABULKA NA LAYOUT = NEKOREKTNOST. A proc, to kolega v blogpostu docela dobre popsal. Pouziti tabulky pro layout cpe nastavovani vzhledu stranky do markupu a drasticky tim snizuje jeho nejdulezitejsi vlastnost -- semanticnost. Ctecce pro slepce nebo ruznym crawlerum je uplne jedno, jestli je menu nahore dole nebo vzhuru nohama -- zajimaji je ciste informace.
Na pozicovani je tu CSS.
             22.12.2007 16:12
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 16:12
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         22.12.2007 17:03
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 17:03
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         22.12.2007 18:50
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 18:50
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         27.12.2007 19:06
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        27.12.2007 19:06
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         21.12.2007 22:30
otula             | skóre: 45
             | blog: otakar
             | Adamov
        21.12.2007 22:30
otula             | skóre: 45
             | blog: otakar
             | Adamov
         21.12.2007 21:30
Luboš Doležel (Doli)             | skóre: 98
             | blog: Doliho blog
             | Kladensko
        21.12.2007 21:30
Luboš Doležel (Doli)             | skóre: 98
             | blog: Doliho blog
             | Kladensko
         21.12.2007 21:55
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        21.12.2007 21:55
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         21.12.2007 21:56
Luboš Doležel (Doli)             | skóre: 98
             | blog: Doliho blog
             | Kladensko
        21.12.2007 21:56
Luboš Doležel (Doli)             | skóre: 98
             | blog: Doliho blog
             | Kladensko
         21.12.2007 22:07
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        21.12.2007 22:07
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         21.12.2007 23:23
kotatko             | skóre: 10
             | blog: mafyblog
             | Praha
        21.12.2007 23:23
kotatko             | skóre: 10
             | blog: mafyblog
             | Praha
         21.12.2007 22:35
Přemek Vyhnal             | skóre: 24
             | blog: Toto není blog!
             | Dobřichovice
        21.12.2007 22:35
Přemek Vyhnal             | skóre: 24
             | blog: Toto není blog!
             | Dobřichovice
         21.12.2007 22:41
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        21.12.2007 22:41
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
         21.12.2007 22:53
Luboš Doležel (Doli)             | skóre: 98
             | blog: Doliho blog
             | Kladensko
        21.12.2007 22:53
Luboš Doležel (Doli)             | skóre: 98
             | blog: Doliho blog
             | Kladensko
         21.12.2007 23:11
Petr Tomášek             | skóre: 39
             | blog: Vejšplechty
        21.12.2007 23:11
Petr Tomášek             | skóre: 39
             | blog: Vejšplechty
            
         22.12.2007 10:18
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        22.12.2007 10:18
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        Podle ohlasů stránka formovaná tabulkou navadí. Naopak css někdy dělá paseku díky tomu, jak je interpretuje prohlížeč.Ja myslel, ze ctecky pro nevidome CSS ignoruji. Do jake miry ho berou v uvahu?
 22.12.2007 12:41
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        22.12.2007 12:41
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
         22.12.2007 14:11
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        22.12.2007 14:11
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        Třeba problém: zadavatel chce mermomocí na vrch nadpis v gif. Což čtečka přečte dle nastavení jako třeba "logo.gif". Je možné vyplnit alt a je to, ale alt není moc významný prvek odpovídající významu nadpisu a navíc, někdo si čtení popiseky i vypne. Takže H1 nadpis a ten buď barvou písma stejného jako pozadí, ale to je tam mezera a nebo css, posunout z obrazu a je to. Funguje. Jenže teď jsem se se dozvěděl, že ne všude. A takových je víc.Obrázkové nadpisy (nebo jiné texty) jsou docela častá věc, ale většinou ji webdesigneři řeší špatnou cestou. Dělají to tak, že tam prostě prásknou obrázek (elementem
<img>) a v nejlepším případě mu ještě nastaví atribut alt.
Jenže to je právě špatně. Úplně čistá cesta asi není, ale já to dělám tak, že normálně vytvořím nadpis (například <h1>), nastyluji mu "obrázkovost" (přes background-image, samozřejmě s uvedením rozměrů) a text nadpisu uzavřu ještě do elementu <span>, kterému ve stylu třídy zakážu zobrazení. Čili výsledek je ten, že se normálně zobrazuje příslušný obrázek, ale když se vypnou styly (nebo se CSS soubor nahradí jiným), zobrazí se původní text. Přičemž pro média jako aural nebo braille lze ve standardním stylu nechat textové zobrazení.
            IMHO nejčistší je
<h1><img src="nadpis.png" alt="úvod" ...></h1>
Bohužel jeden hojně rozšířený prohlížeč si s tím neporadí a v případě, že je obrázek nedostupný nebo že uživatel vypne obrázky, nezobrazí místo něj správně ostylovaný nadpis.
 23.12.2007 00:06
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        23.12.2007 00:06
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        někdo si čtení popiseky i vypne
 23.12.2007 17:31
xkucf03             | skóre: 49
             | blog: xkucf03
        23.12.2007 17:31
xkucf03             | skóre: 49
             | blog: xkucf03
            
         23.12.2007 18:22
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        23.12.2007 18:22
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        já to dělám tak, že normálně vytvořím nadpis (napříkladTo IMHO neni uplne nejcistsi. Textovy node by mel IMHO zustat primym potomkem H1. Ja to delam takto:<h1>), nastyluji mu "obrázkovost" (přesbackground-image, samozřejmě s uvedením rozměrů) a text nadpisu uzavřu ještě do elementu <span>, kterému ve stylu třídy zakážu zobrazení.
<h1>text<span></span></h1>
pricemz pozadi ma nastavene SPAN a ma absolutni pozici vzhledem k H1 tak, aby text prekryl. H1 ma take zakazany overflow, aby ten text nevylezal. Efekt je takovy, ze textovou H1 vidi uzivatel, ktery si zakazal CSS, ale i uzivatel, ktery ma CSS povoleno a zakazane pouze obrazky. Pokud vy SPAN schovate CSSkem, tak pokud ja si vypnu obrazky a necham CSS (caste u mobilu), text nevidim.
Pri pouziti XSLT musim akorat do toho SPANu jeste narvat   aby mi z toho procesor neudelal neparovy tag, coz IE6 v pripade SPANu nerozdycha.
             21.12.2007 22:47
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        21.12.2007 22:47
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        Dnes proto každý slušný návrhář webových stránek ví, že se pro layout prostě používá element <div>Ne, takhle to dělají jen návrháři-začátečníci, kteří si někde přečetli, že tabulky jsou fuj a má se to dělat takhle. Ovšem každý trochu lepší návrhář ví, že by logická struktura webu měla být sémantická a proto by se měly přednostně používat ty elementy, které odpovídají významu svého obsahu (tedy např. různé úrovně nadpisů, odstavce, seznamy atd.). <div> se používá jen na "anonymní" obsah, který nemá žádný konkrétní význam z hlediska struktury.
 22.12.2007 11:11
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        22.12.2007 11:11
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        Ovšem každý trochu lepší návrhář ví, že by logická struktura webu měla být sémantická a proto by se měly přednostně používat ty elementy, které odpovídají významu svého obsahu (tedy např. různé úrovně nadpisů, odstavce, seznamy atd.)Akorat ze tvurci HTML5 tady trochu (dost) ujeli -- mam na mysli konkretne element
aside. Moc semanticke mi to nepripadne, davat uz do nazvu informaci o pozici na strance. Crawlerum, cteckam pro nevidome nebo jakymkoliv jinym strojum, co na tu stranku pristupujou je IMHO celkem ukradene kde element je.
             22.12.2007 11:22
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 11:22
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.Podle téhlé definice to IMHO sémantický element je. To, že se často (ne vždy či nutně) umisťuje do postarnního sloupce, je jen doplňková informace. Jinak z HTML 5 jsem také dost rozpačitý.
 22.12.2007 11:27
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 11:27
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        <B> a <I>
             22.12.2007 16:22
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        22.12.2007 16:22
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
         ), ktery by urcoval v jakem semantickem vztahu jednotlive elementy jsou. Rozhodne by to bylo abstraktnejsi a skalovatelnejsi.
 ), ktery by urcoval v jakem semantickem vztahu jednotlive elementy jsou. Rozhodne by to bylo abstraktnejsi a skalovatelnejsi.
             22.12.2007 16:32
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 16:32
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         25.12.2007 19:29
Petr Tomášek             | skóre: 39
             | blog: Vejšplechty
        25.12.2007 19:29
Petr Tomášek             | skóre: 39
             | blog: Vejšplechty
            
        Akorat ze tvurci HTML5 tady trochu (dost) ujeli -- mam na mysli konkretne element aside. Moc semanticke mi to nepripadne, davat uz do nazvu informaci o pozici na strance. Crawlerum, cteckam pro nevidome nebo jakymkoliv jinym strojum, co na tu stranku pristupujou je IMHO celkem ukradene kde element je.
Nepříjde, že by aside bylo označení „vizuální“, či tak něco, ale funkční. To, že se k tomu užije názorného pojmenování je spíš vlastností jazyka, který holt běžně pracuje s metaforou a metonymií (a není na tom nic špatného a to ani v oblasti odborných termínů)...
             22.12.2007 12:43
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        22.12.2007 12:43
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
         22.12.2007 14:09
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 14:09
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         22.12.2007 16:37
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 16:37
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         22.12.2007 16:41
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 16:41
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         22.12.2007 16:58
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
        22.12.2007 16:58
kyknos             | skóre: 18
             | blog: Quid novi?
             | Ranša Rosa
         
             22.12.2007 22:14
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        22.12.2007 22:14
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        Znovu píšu, že při čtení webové stránky je mi sémantičnost naprosto u zadnice. První pro mě má význam relevantnost a kvalita informací na stránce, v tom mi sémantičnost nijak nepomůže.Vy si snad myslite, ze ty webove stranky ctou jen lide. A ze je lide cist budou. Dneska jsou crawlery mozna na nesemanticky markup zvykle, ale vzestup informacniho veku nekonci. V budoucnu bude rychla dostupnost informace v co nejcistsi forme cim dal dulesitejsi a jestli budem delat stranky stylem "vsak co, vypada to dobre, Google to taky sezere, tak co bych se s tim patlal", tak bychom na to taky mohli jednou doplatit. Druha vec je zobrazovaci zarizeni. Mobilni internet se rozsiruje neuveritelnou rychlosti. Myslite si, ze by vas za tu vami opevovanou otabulkovanou stranku meli uzivatele chytrych mobilnich telefonu a PDAcek radi? Zkuste se na to podivat trosku v sirsim kontextu. Ne jen "me se to na mojem monitoru zobrazi hezky, vic me nezajima". Je proste potreba si definovat pravidla, ktera reknou jak ma kod stranky vypadat, aby informace z ni byla co nejjednoduseji extrahovatelna v co nejcistsi podobe.
 23.12.2007 18:12
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        23.12.2007 18:12
Daniel Kvasnička ml.             | skóre: 52
             | blog: The Joys and Sorrows of Being an IT Freak
             | Ostrava
        Opět, párkrát jsem měl mobil, a tam se tabulky zobrazovaly zcela normálně.No je otazka co nazyvate normalne. Kdyz udelate layout tabulkou, tak levy, prostredni a pravy sloupec budou levy, prostredni a pravy i na mobilu. To je sice normalni, ale naprosto necitelne -- jake rozliseni na sirku mobily maji? 240? 320? Uscrollujete se k smrti... Na mobilu bych cekal, ze menu nebude vlevo, ale nad nebo pod dalsim obsahovym blokem.
není překážkou spíš překotný vývoj webu? Používání nových zase nových a zase jiných vymyšleností, skriptů... Jsou stránky, jejiž kod je jen kolekce odkazů, odkud co načíst.Ja myslim, ze pokud autor poskytne i alternativni obsah v cistem a dostatecne semantickem (X)HTML, tak to problem neni. Navic si myslim, ze je to stejne jen otazkou casu, kdy budou mobilni browsery umet JS nebo klidne i Flash.
Znovu píšu, že při čtení webové stránky je mi sémantičnost naprosto u zadnice.
To je od vás hezké, ale na tom vůbec nesejde. Zdroják stránky není určen pro lidi - nebo aspoň ne pro drtivou většinu z nich. Zdroják stránky je určen pro programy a mnoho z nich sémantika jednotlivých elementů zajímá. Proč myslíte, že protokol HTTP/1.0 přinesl hlavičku odpovědi, která je plná informací, které drtivou většinu čtenářů stránek nezajímají a i ten zbytek jen jednou za čas? K čemu třeba takový stavový kód, když čtenáři stačí zobrazit stránku s nápisem "Požadovaný dokument neexistuje"?
 22.12.2007 23:33
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        22.12.2007 23:33
Luk             | skóre: 47
             | blog: Kacířské myšlenky
             | Kutná Hora
        K čemu třeba takový stavový kód, když čtenáři stačí zobrazit stránku s nápisem "Požadovaný dokument neexistuje"?Jeden velmi rozšířený prohlížeč také nakládá se stavovými kódy velmi svérázným způsobem.
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.