Tabulkový layout nezrychlíte

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Články Katalog zdrojů SEM SEO

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.