Choseho weblog o webu

Jak na tabulky - postupné načítání tabulek v IE není až takový problém!

09. 05. 2004

Domnívám se, že většina webmasterské komunity u nás si myslí, že se tabulky v IE nedají vykreslovat postupně a zobrazí se až po kompletním načtení. Já bych do tohoto "vosího hnízda" chtěl píchnout, a tento mýtus rozprášit. Možná je to způsobeno tím, že se v dnešní době se na tabulky hledí jako na něco špatného, mrtvého a všichni se soustředí na design pomocí CSS. Což je samozřejmě správně a tabulky se mají používat pouze na tabulková data. A když už tedy máme správně použitou tabulku na data, tak musíme většinou čekat několik sekund, než se tabulka ukáže (a co teprve když jsem připojen přes GRPS). Pokud tabulku správně vytvoříme, tak není nutné čekat, až se celá stáhne, abychom mohli vidět nějaká data.

Způsob vykreslování tabulky v IE

Celý kámen úrazu je ve způsobu, jakým IE standardně vykresluje tabulky. IE totiž vždy nastavuje rozměr tabulky podle obsahu buněk, nehledě na to, zda jsou nadefinované rozměry sloupců nebo řádků. Toto omezení nutí IE tabulku procházet ve dvou krocích - prvně načítá data (zjistí, co tabulka obsahuje) a při druhém průchodu tabulku vykreslí (data už zná, zná i rozměry, takže může vykreslovat).

Jak z toho ven?

Na začátku příspěvku jsem zmiňoval CSS. A styly nám právě poskytují "nástroj", který dokáže říci prohlížeči, jaký způsob vykreslování tabulek má použít. Podobně se chová doctype na určení způsobu renderování stránky, tak vlastnost tabulky table-layout:fixed nám určí způsob vykreslování tabulek. Yuhů na svém blogu již před časem o table-layout:fixed psal a řekl, že IE neumí vykreslovat tabulku postupně.

table-layout:fixed?

Tato vlastnost aplikovaná na tabulku řekne prohlížeči, že má tabulku kreslit rychlejším algoritmem, který tabulku prochází pouze jednou, nikoliv dvakrát. Prohlížeč tabulku projde pouze jednou (zároveň při načítání dat), protože dopředu určí rozměry buněk a potom všechny řádky už vykresluje stejně, nehledě na obsah. Rozměry lze zadat jak na řádek, tak sloupec. Idealní je rozměry tabulky definovat pomocí <colgroup> a <col> což nám ušetří značný HTML kód tabulky. V případě, že se do sloupce data nevejdou dojde ke klasickému zalomení. Když už není ani prostor na zalomení, data začnou "mizet" (overflow:hidden) v buňkách. Hlavní je nadefinovat rozměr tabulky a sloupců (relativní nebo absolutní). Pokud nezadáte rozměry sloupců, tak prohlížeč udělat všechny sloupce stejně široké, přičemž tabulka bude na 100% šířky, kterou bude mít k dispozici.

Ukázka

Již jsem napsal dost, a tak je čas na konkrétní příklad. Na této stránce je klasická tabulka, která se vykreslí až bude celá načtená. Stejnou tabulku jsem vložil do další stránky, ale už s aplikovanou vlastností table-layout:fixed. Na první pohled je patrný rozdíl ve způsobu vykreslování. Tabulky jsem testoval na ideálně pomalém GPRS. Pro pochopení příkladu doporučuji prohlédnout zdrojový kód obou ukázek. Jen pro doplnění - tato vlastnost funguje již od IE 5.X.

Další informace naleznete na stránkách Microsoftu nebo na Jak psát web

.

Autor: Chose| 11:48 - 09. 05. 2004 | Trvalý odkaz | Homepage



© 2004 Josef Šíma - ja@chose.cz