Tabulka se třemi sloupci – problém v Netscape

Při vytváření tabulky se třemi sloupci a při jejím následném ověřování vzhledu v prohlížečích, jsem narazil na další zajímavou (=negativní) vlastnost Netscape Navigatoru 4.51. Problém je v tom, že Netscape – narozdíl od Exploreru – nehodlá dodržovat stanovené rozměry sloupců.

Představte si, že máte tabulku, která obsahuje tři sloupce. Rozměr celé tabulky je nastaven pomocí parametru WIDTH na 100% velikosti okna prohlížeče a je definován rozměr levého sloupce a sloupce pravého. Rozměr prostředního sloupce není určen a je tedy plovoucí.

Od takové tabulky byste čekali, že se zobrazí tak, že levý a pravý sloupec budou mít zadané rozměry a velikost prostředního sloupce bude plovoucí a bude se nastavovat podle aktuální velikost okna prohlížeče. Není to žádný problém v Internet Exploreru, který s velikostmi sloupců zachází tak, jak se od něj očekává. Nicméně Netscape Navigator nemá jenom problémy se správným určením velikosti rámců, v některých případech má dokonce problémy se správným určením velikosti buněk tabulky.

V případě rámců nás špatné rozměry zase tak nepálí – ve velké většině případů se rámce v HTML stránkách už nepoužívají, ale v případě tabulek to problém je, protože jejich použití je dnes opravdu nezbytností. Jak chcete například bez tabulek udělat vícesloupcovou sazbu?

Příklad takové tabulky, se kterou má Netscape Navigator problémy, je zobrazen níže. Pod tabulkou je jednoduché pravítko pro kontrolu rozměrů levé buňky:

levý sloupec

prostřední sloupec

pravý sloupec

Zdrojový kód této tabulky je následujicí:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“0″ WIDTH=“100%“> <TR>    <TD WIDTH=“140″ BGCOLOR=“#CCCCCC“>levý sloupec</TD>    <TD BGCOLOR=“#666666″><font color=“white“>prostřední sloupec</font></TD>    <TD WIDTH=“140″ BGCOLOR=“#CCCCCC“>pravý sloupec</TD> </TR> </TABLE>

Pro ty, co nemají možnost použít na této stránce Netscape Navigator, přikládám následující ilustrační obrázek, který potvrzuje, že Netscape má skutečně problém, když jsou v tabulce kombinovány relativní rozměry (procenta) a rozměry absolutní (číselné hodnoty).

Řešení – neviditelný obrázek
Řešení problému je poměrně jednoduché – když má Netscape Navigator problémy s mícháním relativních a absolutních rozměrů, jednoduše jeden rozměr vypustíme – v tomto případě to bude absolutní rozměr WIDTH=“140″, kterým definujeme velikost levého a pravého sloupce a místo něj dáme neviditelný obrázek 140×1 pixel. Dále z definice tabulky <TABLE> odstraňte parametr WIDTH=“100%“ a přesuňte jej do prostředního sloupce. Neviditelný obrázek má tloušťku pouhý jeden pixel, aby nezabíral moc místa. Výsledek vypadá takto:

levý sloupec

prostřední sloupec

pravý sloupec

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“0″> <TR>    <TD BGCOLOR=“#CCCCCC“><img SRC=“invisible.gif“ WIDTH=“140″ HEIGHT=“1″ BORDER=“0″><BR>levý sloupec</TD>    <TD BGCOLOR=“#666666″ WIDTH=“100%“><font color=“white“>prostřední sloupec</font></TD>    <TD BGCOLOR=“#CCCCCC“><img SRC=“invisible.gif“ WIDTH=“140″ HEIGHT=“1″ BORDER=“0″><BR>pravý sloupec</TD> </TR> </TABLE>

A jak to vypadá v Netscape Navigátoru? Přesně tak, jak potřebujete:

Pokud máte obdobné problémy se správnými rozměry buněk tabulek v Netscape Navigatoru, zkuste kombinovat rozměry. Zkuste např. vložit neviditelný obrázek, pomocí kterého natvrdo nastavíte rozměr buňky či odstranit parametr WIDTH z definice tabulky <TABLE> a vložit jej přímo do buňky apod.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.