Testovací stránka

Testování problematických (X)HTML a CSS příkazů pro tabulky

(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)

Barva u elementu <table> - čáry v 1. tabulce by měly být barevné. V IE, Safari a Firefoxu OK (i když u každého jinak, IE a Safari zobrazí všechny 4 strany stejnou barvou, Firefox dvojbarevně), Opera barvu čar ale v XHTML nepodporuje vůbec (není podporován atribut "bordercolor"). Barvu rámečků je tedy nutné řešit CSS vlastností border-color (viz 2. tabulka). Ve Firefoxu je barva v první tabulce (XHTML deklarace) jen u vnějšího rámečku, v IE a Safari i uvnitř, u druhé tabulky (CSS deklarace) jsou kromě Safari všude barevné jen vnější rámečky. V každém prohlížeči jsou také použity jiné odstíny zvolené barvy pro horní/levý a dolní/pravý rámeček. Pokud ale nepoužijeme deklaraci DTD (DOCTYPE ..), druhá tabulka zobrazena barevně ve Firefoxu není!
Pokud použijeme i vlastnosti border-style a border-width (viz 3. tabulka), má pak rámeček všude stejnou barvu a u všech prohlížečů dojde k vypnutí vnitřních čar v tabulce (je nutné tedy nastavit styl i pro buňky v tabulce, viz tabulka čtvrtá, pouze tyto dvě varianty se tedy zobrazují ve všech prohlížečích stejně).
Pokud má tabulka (či jiný objekt) čáry s šířkou 1px a typu dotted (tečkované), jsou v IE6 zobrazeny čárkovaně (v IE7 a IE8 již opraveno), silnější čáry typu dotted jsou v IE tvořeny kosočtverci (v Opeře, Safari a Firefoxu 2 čtverečky, ve Firefoxu 3 opravdu tečkami, viz tabulka pátá).

1. <table border="10" bordercolor="red">

aaaaa bbbbb

aaaaa bbbbb

2. <table border="10" style="border-color:red">

aaaaa bbbbb

aaaaa bbbbb

3. <table style="border-style:solid; border-width:10px; border-color:red">

aaaaa bbbbb

aaaaa bbbbb

4. <table style="border-style:solid; border-width:10px; border-color:red"> <td style="border-style:solid; border-width:1px; border-color:red">

aaaaa bbbbb

aaaaa bbbbb

5. <table style="border-style:dotted; border-width:1px; border-color:red"> <td style="border-style:dotted; border-width:5px; border-color:red">

aaaaa bbbbb

aaaaa bbbbb
Podpora CSS vlastností margin a padding: vlastnost margin (měla by nastavit vnější okraj bloku) funguje všude dobře pro <table>, ale nefunguje 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 nabízí ale nová CSS vlastnost border-spacing (viz dále), ale ta zase nefunguje v Internet Exploreru 6 a 7 (v "osmičce" ano!).
Vlastnost padding (vnitřní okraj bloku) funguje všude dobře pro <td>, nefunguje ale v IE6 a 7 pro element <table>, aby bylo možné nastavit vnitřní okraje tabulky. Ve Firefoxu, Safari, IE8 a Opeře se vnitřní okraj tabulky zobrazí, ale nikoliv mezi jednotlivými buňkami.

<table style="margin:30px; padding:20px"> <td style="margin:50px; padding:20px">

a a

a a

Vlastnost margin ale můžeme u tabulek (bloků) s pevně danou šířkou použít např. na jejich umístění na střed stránky, což již funguje dobře všude (v IE6 ale pouze s DTD Strict a bez xml deklarace, v quirk módu totiž IE6 nepodporuje hodnotu auto):

<table style="margin: 0px auto; width: 200px">

aaaaa bbbbb

aaaaa bbbbb

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

<div style="text-align: center"> <table style="margin: 0px auto; width: 200px; text-align: center"> … obsah tabulky … </table> </div>

aaaaa bbbbb

aaaaa bbbbb

Podpora CSS vlastnosti border-spacing: nefunguje v IE6 a 7 (v IE8 již ano!), mezeru mezi buňkami tedy musíme stále řešit i HTML atributem "cellspacing" (viz druhá tabulka).

<table style="border-style:solid; border-width:1px; border-color:black; border-spacing:10px">

aaaaa bbbbb

aaaaa bbbbb

<table cellspacing="10" style="border-style:solid; border-width:1px; border-color:black; border-spacing:10px">

aaaaa bbbbb

aaaaa bbbbb

Podpora CSS vlastnosti border-collapse: již všude OK (zlobilo v Opeře 7), vlastnost spojí rámečky sousedních buněk.

<table style="border-style:solid; border-width:1px; border-color:black"> <td style="border-style:solid; border-width:1px; border-color:black">

aaaaa bbbbb

aaaaa bbbbb

<table style="border-collapse: collapse; border-style:solid; border-width:1px; border-color:black"> <td style="border-style:solid; border-width:1px; border-color:black">

aaaaa bbbbb

aaaaa bbbbb

Podpora CSS vlastnosti border:hidden pro vypnutí konkrétního okraje buněk: tabulka musí mít deklarovaný border-collapse, nefunguje přesto nikde (mezi buňkami v 1. řádku by neměla být dělící čára).

<table style="border-collapse: collapse; border-style:solid; border-width:1px; border-color:black"> <td style="border-left: hidden; border-style:solid; border-width:1px; border-color:black"> <td style="border-right: hidden; border-style:solid; border-width:1px; border-color:black">

aaaaa bbbbb

aaaaa bbbbb

"colspan"

"rowspan"

"target"

<table style="border-collapse: collapse; border-style:solid; border-width:1px; border-color:black"> <tr> <th colspan="2" style="border-style:solid; border-width:1px; border-color:black"> <th> </tr> <tr> <td style="border-style:solid; border-width:1px; border-color:black"> <td> <td style="border-style:solid; border-width:1px; border-color:black"> <td> </tr> </table>

aaaaa
aaaaa	bbbbb

Podpora CSS vlastnosti empty-cells: nefunguje v IE6 a 7 (v IE8 již ano!), vlastnost by měla zobrazit rámeček i u prázdných buněk v tabulce.

<table style="border-style:solid; border-width:1px; border-color:black"> <td style="empty-cells:show; border-style:solid; border-width:1px; border-color:black">

bbbbb

aaaaa

Podpora CSS vlastnosti text-align pro zarovnání čísla v buňce na desetinné znaménko: nefunguje nikde.

td { text-align: "," }

11,22 bbbbb

111,222 aaaaa

Podpora CSS vlastnosti caption-side pro nastavení pozice titulku tabulky: v moderních prohížečích již funguje (v Exploreru 7 nikoliv).

caption { caption-side: bottom }

Titulek
aaaa bbbbb

bbbb aaaaa

*Titulek*
aaaa	bbbbb
bbbb	aaaaa

Podpora CSS vlastnosti table-layout (rychlejší zobrazení tabulek díky určení počtu sloupců v 1. řádku tabulky). Tato vlastnost by měla řešit známou nevýhodu tabulkového layoutu webu, kdy se vzhledem k nutnosti načtení celého kódu web zobrazí (na rozdíl od CSS-div layoutu) 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 atributů elementu <table> byl proto i atribut cols="pocet_sloupcu", ale žádný prohlížeč ho nepodporuje).
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 pevnou šířku. Tuto skvělou vlastnost již dobře podporují všechny testované prohlížeče (nefungovala ve starších verzích Opery), kupodivu i IE6!

<table style="table-layout:fixed; width:300px; border-collapse:collapse; border-style:solid; border-width:1px; border-color:black"> <tr> <td style="width:100px; border-style:solid; border-width:1px; border-color:black"> <td> <td style="width:200px; border-style:solid; border-width:1px; border-color:black"> <td> </tr> <tr> <td style="width:150px; border-style:solid; border-width:1px; border-color:black"> <td> <td style="width:150px; border-style:solid; border-width:1px; border-color:black"> <td> </tr> </table>

aaaaaa

bbbbb

Podpora CSS vlastnosti table-layout (rychlejší zobrazení tabulek díky určení počtu sloupců v 1. řádku tabulky).

Podpora CSS vlastnosti table-layout (rychlejší zobrazení tabulek díky určení počtu sloupců v 1. řádku tabulky). Tato vlastnost by měla řešit známou nevýhodu tabulkového layoutu webu, kdy se vzhledem k nutnosti načtení celého kódu web zobrazí (na rozdíl od CSS-div layoutu) později, protože o počtu sloupců webu může teoreticky rozhodnout až počet buněk v posledním řádku tabulky.

11,22	bbbbb
111,222	aaaaa