Podpora jazyků XHTML a CSS v moderních prohlížečích V.

22.07.2007 - PaedDr. Petr Pexa Počet zobrazení: 19538  

V tomto dílu našeho seriálu, který je zaměřen na testování nových verzí prohlížečů Firefox, Opera a Explorer, se po dvou dílech věnovaných především hlavičce webu vrátíme k příkazům jazyků XHTML a CSS, které na stránce generují určité konkrétní objekty.Tentokrát se zaměříme na tvorbu a formátování tabulek.

Podpora CSS vlastností margin a padding

Vlastnost margin by měla nastavit vnější okraj libovolného prvku, tedy i tabulky. Ve všech prohlížečích funguje dobře pro element < table >, ale nefunguje bohužel nikde pro element < td >, nelze ji tedy použít pro nastavení vzdálenosti mezi jednotlivými buňkami v tabulce. Zde je nutné zatím stále používat XHTML atribut "cellspacing" v elementu < table >. Jistou možnost ale nabízí nová CSS vlastnost border-spacing (viz dále), ta ale nefunguje v Exploreru.

Vlastnost padding nastavuje vnitřní okraj bloku. Funguje všude dobře pro element < td >, nefunguje ale v Exploreru pro element < table >, aby bylo možné nastavit vnitřní okraje tabulky. Ve Firefoxu a Opeře se vnitřní okraj tabulky zobrazí (ale nikoliv mezi jednotlivými buňkami).

funkční ukázka

Vlastnost margin můžeme u tabulek (bloků) s pevně danou šířkou také použít (díky nové vlastnosti auto ) pro jejich umístění na střed stránky , což ale funguje jen ve Firefoxu, Opeře a Exploreru 7 (v Exploreru 6 pouze s DTD Strict a bez xml deklarace, v quirk módu totiž Explorer 6 hodnotu auto nepodporuje).

funkční ukázka

Pokud tedy chceme mít tabulku umístěnou na střed stránky ve všech prohlížečích, je nutné navíc použít následující deklaraci (element < div > a jeho vlastnost text-align:center umístí tabulku na střed stránky i v quirk módu Exploreru 6, text-align:center v elementu < table > zarovná na střed obsah všech buněk v tabulce).

funkční ukázka

Podpora CSS vlastnosti border-spacing

Tato nová vlastnost jazyka CSS2 by měla nastavit mezery mezi buňkami v tabulce. Nefunguje ale bohužel v Exploreru ani ve verzi 7, ostatními testovanými prohlížeči je již podporována dobře.

funkční ukázka

mezeru mezi buňkami tedy musíme zatím stále řešit také standardním (X)HTML atributem "cellspacing".

funkční ukázka

Podpora CSS vlastnosti border-collapse

Tato nová vlastnost jazyka CSS2 spojí hodnotou collapse rámečky sousedních buněk tak, aby nebyly v tabulce zobrazeny dvojité čáry. Podpora je již ve všech prohlížečích správná (problematické bylo zobrazení v Opeře 7).

funkční ukázka

Podpora CSS vlastnosti border: hidden

Tato nová vlastnost je určena pro vypnutí konkrétního okraje buňky. Tabulka musí mít podle specifikace na w3.org deklarovaný border-collapse, vlastnost ale přesto nefunguje nikde (mezi buňkami v 1. řádku tabulky v ukázce by neměla být dělící čára).

funkční ukázka

Tuto CSS vlastnost ale nelze chápat jako náhradu (X)HTML atributů "colspan" resp. "rowspan" pro sloučení buněk v tabulce, měla by opravdu pouze odstranit dělící čáru mezi buňkami, nikoliv zobrazit obsah sloučených buněk např. přes více sloupců. Tyto standardní (X)HTML tabulkové atributy zatím adekvátní CSS vlastnost nemají.

funkční ukázka

Podpora CSS vlastnosti empty-cells

Tato nová vlastnost jazyka CSS2 by měla zobrazit díky hodnotě show rámeček i kolem prázdných buněk, bohužel není podporována Explorerem ani ve verzi 7. Tento známý problém s prázdnými buňkami je tedy stále nutné řešit vložením např. tzv. pevné mezery do buňky (entitou &nbsp;).

funkční ukázka

Podpora CSS vlastnosti text-align

Tato vlastnost by měla zajistit zarovnání čísla v buňce na libovolný znak, tedy např. na desetinné znaménko. Zatím nefunguje v žádném z testovaných prohlížečů.

funkční ukázka

Podpora CSS vlastnosti table-layout

Na závěr tohoto dílu věnovaného webovým tabulkám jsme ponechali popis bezpochyby nejpraktičtější nové vlastnosti tabulek, díky níž dojde k jejich rychlejšímu zobrazení určením počtu sloupců hned v prvním řádku. Tato vlastnost řeší známou nevýhodu např. tabulkového layoutu webu či dlouhých tabulek, kdy se vzhledem k nutnosti načtení celého kódu tabulka zobrazí později, protože o počtu sloupců webu může teoreticky rozhodnout až počet buněk v posledním řádku tabulky. V návrhu (X)HTML atributů elementu < table > byl proto kdysi i atribut cols="počet sloupců", ale žádný prohlížeč ho nikdy nepodporoval. Proto mnozí profesionální tvůrci v minulosti často přecházeli od tabulkového layoutu webu k tzv. CSS-div layoutu, kde problém s pomalejším zobrazením webu není. CSS vlastnost table-layout zmíněný problém tedy velmi dobře řeší a podle našeho názoru (i názoru jednoho z nejproslulejších světových webových designérů Jeffrey Zeldmana, viz jeho skvělá publikace Tvorba webů podle standardů XHTML, CSS, DOM, ECMASkript a www.webstandards.org), je možné poněkud méně přehledný kód CSS-div sloupcového layoutu opět nahradit tradičním sloupcovým layoutem, vytvořeným pomocí tabulek.

Hodnota fixed vlastnosti table-layout respektuje zadané rozměry buněk prvního řádku tabulky a z těchto buněk se vypočítají šířky sloupců. Na rozměry buněk dalších řádků (a především na jejich obsah) se nebere ohled. Díky tomu může prohlížeč tabulku vykreslovat rychleji a nemusí čekat na natažení celé tabulky. Aby table-layout dobře fungoval, je potřeba zadat tabulce také pevnou šířku. Tuto skvělou vlastnost již dobře podporují všechny prohlížeče (nefungovala ve starších verzích Opery), kupodivu i Explorer 6.

V ukázce si všimněte, že nastavená šířka buněk 400px ve druhém řádku se nijak neprojevuje a je respektována šířka buněk 100px resp. 200px v řádku prvním.

funkční ukázka