Dvě tabulky vedle sebe na HTML stránce

7. dubna 2000

•

Někdy můžete potřebovat umístnit na stránce vedle sebe dvě tabulky, které nejsou vnořeny do jiné a poté umístnit za ně třetí tabulku. Tento článek popisuje úskalí, které vás při provádění tohoto záměru mohou potkat a přináší ideální postup pro takové použití.

Možná se ptáte, proč píši tento článek o problémech dvou nevnořených tabulek umístněných vedle sebe, když je možné je vnořit do tabulky se dvěma sloupci a problémy nejsou prakticky žádné. Jde totiž o rychlost načítání stránky. Pokud máte v jedné tabulce vnořeny dvě další, tato tabulka se zobrazí až v okamžiku, kdy je obsah vnořených tabulek kompletně načten. Na druhé straně – pokud dáte dvě nevnoř ené tabulky vedle sebe, první se zobrazí v okamžiku, když se ještě druhá načítá, což je znatelné urychlení.

Příklad použití dvou tabulek vedle sebe můžete např. nalézt na úvodní stránce Intervalu.cz – levý sloupec s rubrikami se zobrazí dříve, než seznam článků v prostředním sloupci, což čtenáře svádí k přesvědčení, že Interval.cz se rychleji načítá.

Jak na to?

První, co vám řeknu, bude to, jak vůbec umístnit dvě nevnořené tabulky vedle sebe. Uděláte to tak, že do definice tabulky, která má být umístněna nalevo, vložíte parametr align=“left“. Do druhé tabulky nemusíte vkládat nic – tabulky se umístní vedle sebe:

Příklad:

Obsah levé tabulky

Obsah pravé tabulky

Jak je vidět, není to nic složitého. Nicméně – pokud se podíváte na výše uvedený příklad, zjistíte, že v Internet Exploreru nejsou obě tabulky posunuté úplně k sobě – je mezi nimi dvoupixelová mezera. Stejne tak tomu je v Netscape Navigatoru 4.5. Abych se přiznal, nevím, proč tomu tak je, ale řešení je jednoduché. Do druhé tabulky vložte rovněž parametr align=“left“:

Příklad:

Obsah levé tabulky

Obsah pravé tabulky

Tímto by mohl článek skončit, neboť se zdá, že problém je vyřešen. Ale není – pokud budete chtít dát pod tyto dvě tabulky tabulku další, tato tabulka nebude ve druhém příkladu (dvě align=“left“) za nimi, nýbrž vedle nich. Abyste dosáhli umístnění třetí tabulky pod dvě tabulky, které jsou umístněny vedle sebe, museli byste ji ručně poposunovat pomocí <BR>, což je velmi nouzové – a v praxi nepoužitelné – řešení. V případě je třetí tabulka umístněna pod drou tabulkou, nikoli pod oběma) – viz. příklady:

Příklad s použitím jednoho align=“left“:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah levé tabulky
</TD></TR></TABLE>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″>
<TR><TD>
Obsah pravé tabulky
</TD></TR></TABLE>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″>
<TR><TD>
Obsah třetí tabulky umístněné pod dvěma horními.
</TD></TR></TABLE>

Obsah levé tabulky

Obsah pravé tabulky

Obsah třetí tabulky umístněné pod dvěma horními.

Příklad s použitím dvojnásobného align=“left“:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah levé tabulky
</TD></TR></TABLE>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah pravé tabulky
</TD></TR></TABLE>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″>
<TR><TD>
Obsah třetí tabulky umístněné pod dvěma horními.
</TD></TR></TABLE>

Obsah levé tabulky

Obsah pravé tabulky

Obsah třetí tabulky umístněné pod dvěma horními.

Zdálo by se, že nyní jsme v neřešitelné situaci – můžeme použít jedno align=“left“ s tím, že v Internet Exploreru bude mezi tabulkami mezera, nebo dvakrát použít align=“left“ s tím, že třetí tabulku musíme ručně poposunovat pomocí <BR> za dvě tabulky ostatní:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah levé tabulky
</TD></TR></TABLE>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah pravé tabulky
</TD></TR></TABLE>
<BR><BR>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″>
<TR><TD>
Obsah třetí tabulky umístněné pod dvěma horními.
</TD></TR></TABLE>

Obsah levé tabulky

Obsah pravé tabulky

Obsah třetí tabulky umístněné pod dvěma horními.

Správné řešení

Ale je tu ješte třetí způsob, který je správný a o kterém mnoho lidí neví. Do dvou tabulek, které mají být vedle sebe, umístněte align=“left“, za ně vložte tag
<br clear=left> a pak teprve třetí tabulku. Výsledek je tento:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah levé tabulky
</TD></TR></TABLE>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″ ALIGN=“LEFT“>
<TR><TD>
Obsah pravé tabulky
</TD></TR></TABLE>
<br clear=left>
<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“1″>
<TR><TD>
Obsah třetí tabulky umístněné pod dvěma horními.
</TD></TR></TABLE>

Obsah levé tabulky

Obsah pravé tabulky

Obsah třetí tabulky umístněné pod dvěma horními.

Parametr clear v tagu <BR> totiž řeší vzájemné umístnění více elementů na stránce. Syntaxe parametru „clear“ je následující:

V našem příkladě použití <BR clear=“left“> způsobí umístnění třetí tabulky pod dvěma předchozími. Pokud použijete před třetí tabulkou <br clear=“right“>, bude tato třetí tabulka vhledem ke dvěma předchozím zarovnána napravo. Použití <BR clear=“all“> řeší umístnění objektů z obou stran.

V našem případě je tedy jedno, zdali jsme použili <BR clear=“left“> či <BR clear=“all“> – výsledek je stejný. Použití „none“ je totéž, jakoby jste parametr „clear“ v tagu <BR> ani nepoužili.

Závěrem

Pokud tedy potřebujete rychlejší zobrazení stránky v prohlížeči návštěvníka, rozdělte stránku do více nevnořených tabulek. Pokud umístníte dvě nevnořené tabulky vedle sebe, vložte do obou v definic tabulky parametr=“left“, čímž se zbavíte dvoupixelové mezery v IE v případě pouužití pouze jednoho align=“left“. V případě, že za těmito dvěma tabulky má být třetí tabulka s dalším obsahem, vložte před třetí tabulku tag <br clear=left>, čímž docílíte toto, že třetí tabulka nebude umístněna vedle prvních dvou, ale pěkně pod nimi.