Tabulkový layout nezrychlíte
- Pokud má dlouhá tabulka hodně řádků, lze její zobrazování podstatně zrychlit pomocí stylu table-layout: fixed.
- Pokud ale uzavřete celou stránku do tabulky s jedním nebo dvěma řádky, což je nejčastější případ tabulkového rozvržení stránky, bude se stránka v Exploreru zobrazovat najednou a pomalu -- bez ohledu na table-layout.
Vítek Dlouhý napsal zajímavý článek o tabulkovém layoutu. Titulek je velmi jasný: 3 stejně vysoké sloupce? Tabulky jsou vhodnější (odkaz přestal fungovat). V článku souhlasím skoro se vším, podstatná myšlenka zní, že třísloupcový layout je za pomoci tabulek prostě jednodušší než páchání hackovaného CSS. Vítek navrhuje stránku uzavřít do tabulky s jedním řádkem a se třemi buňkami, přičemž pomocí CSS styluje až obsah v buňkách. OK, proč ne. Dělával jsem hodně takových webů a fungovalo to.
V čem se ale Vítek (a potažmo i Chose) mýlí, je rychlost vykreslování takové stránky, když se domnívá, že vše vyřeší table-layout. Chose nedávno napsal výborný článek, v němž na příkladu zpopularizoval CSS vlastnost table-layout, která v Exploreru způsobí, že se tabulky vykreslují po řádcích (a jak uvidíte níže, není to navíc tak docela pravda). Když se table-layout: fixed nepoužije, stránka se v Exploreru vykreslí, až když tabulka do prohlížeče dorazí celá. V jiných prohlížečích se to vykreslování po řádcích děje i bez table-layout, Explorer je ale stále nejdůležitější.
Bude to pomalé
Pokud ovšem použiju na třísloupcový design tabulku s jedním řádkem a třemi buňkami, která je pro tabulkový design typická, nespasí mě vůbec nic, ani table-layout: fixed. Explorer totiž čeká na uzavření řádku a nic nekreslí. Kreslí to po řádcích, nikoli po buňkách. A čeká. Takže tudy ne, přátelé.
Tady bych mohl výklad ukončit. Vítek Dlouhý ve svém článku a v příkladu ale nabízí trochu jinou konstrukci stránky. Nadějnou konstrukci. Hlavní text dává do prvního řádku, prostřední buňku s textem nechává přesahovat do řádku nižšího, ve kterém je v postraních buňkách menu. Po zjednodušení to vypadá takhle:
<table style="table-layout:fixed"> <tr> <td> <!-- nic, buňka navíc stylem sražena --> </td> <td rowspan="2"> hlavní text stránky </td> <td><!-- taky nic --></td> </tr> <tr> <td>levé menu</td> <!-- sem přesahuje hlavní text stránky --> <td>pravé menu</td> </tr> </table>
Teoreticky by se nyní měl napřed vykreslit první řádek s obsahem a po něm až druhý řádek. Teoreticky. Jenomže to v Exploreru takhle prostě nefunguje. První řádek stále čeká na ten druhý. Nezjistil jsem proč. Nestouvisí to ani s tím rowspanem, ani se šířkami buněk. Prostě čeká a nic nekreslí.
Možná by to šlo to pomalé zobrazování nějak ohackovat. Kdysi dávno jsem si s tím hrál a mám za to, že kdyby se mezi první a druhý řádek vložilo dalších asi dvacet prázdných řádků (tagů tr s prázdnými td), tak by se to možná zobrazovalo rychleji. Tím by se ale vytratila veškerá krása jednoduchosti.
Chcete-li mít stránky rychlé, doporučuji dělat layout pomocí CSS. Tabulky lze na rychlý layout použít jedině v případě, že velikost celé stránky je relativně malá (žádné desítky kilobajtů), navíc by to měly být stránky statické a bez reklam z cizích serverů (aby na nic nečekaly).
Publikováno 9. června 2004
Článek je původně z weblogu
Reklama
