Jak na tenké orámování tabulky 2.

13. listopadu 2000

•

Asi před půl rokem vyšel na Interval.cz článek, který tvůrcům stránek poradil, jak vytvářet orámování tabulky o síle jednoho pixelu a který tak popřel všeobecný názor, že to vlastně není možné, protože při standardním použití (s parametrem Border=“1“), se vytvořilo orámování o síle dvou pixelů. Dnes vám poradím další tipy související tímto orámováním tabulky.

Již zmiňovaný článek měl u našich čtenářů ohromný úspěch a to ze dvou důvodů. Jak už jsem psal, popřel všeobecně rozšířený názor, že to nejde udělat a tabulky na stránkách hned začaly vypadat mnohem lépe a navíc – popisované řešení fungovalo bez problémů i v Netscape Navigátoru.

Tehdy vlastně byly s orámováním problémy – pokud jste na stránkách použili parametr Border=“1″, vytvořilo se vám vlastně orámování o síle 2 pixelů, místo jednoho. To ještě šlo překousnout, ačkoli „tlustá“ čára kolem tabulky nevypadala moc dobře. Co ale překousnout nešlo, bylo to, že navíc vytvářela dojem 3D. Toto šlo odstranit použitím parametru bordercolor=“barva“, což bylo ale řešení, které fungovalo v Internet Exploreru. Webmasteři se tak mohli z Netscape a jeho šedého, 3D orámování skutečně zbláznit:o) Nicméně – článek to vyřešil a dneska vám přinášíme několik dalších postřehů k tomuto jedno-pixelovému orámování tabulky.

Původní článek Jak na tenké orámování tabulky I. řešil pouze jedno-pixelové orámování kolem celé tabulky, neorámoval tedy řádky a sloupce v tabulce, což by někdo mohl potřebovat. O tom, jak to udělat, si povíme o několik odstavců níže, nyní předvedu pro ty, co daný článek nečetli, že to skutečně jde:

<TABLE CELLSPACING=“0″ CELLPADDING=“1″ BORDER=“0″ BGCOLOR=“BLACK“>
<TR><TD>
<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“0″ BGCOLOR=“WHITE“>
<TR>
<TD>Text v buňce 1</TD>
</TR>
<TR>
<TD>Text v buňce 2</TD>
</TR>
</TABLE>
</TD></TR></TABLE>

Text v buňce 1

Text v buňce 2

Pokud prostudujete kód, zjistíte, že vytvořit orámování o síle jednoho pixelu není žádný problém, použijí se vlastně dvě vnořené tabulky, přičemž ta nadřazená musí mít definované barvu pozadí pomocí Bgcolor=“barva“ (tato barva určuje barvu orámování tabulky) a v ní vnořena tabulka má také definovanou barvu pozadí pomocí Bgcolor=“barva“, v tomto případě bílou. Celý trik spočíval v tom, že se v nadřazené tabulce nastavil Cellpadding=“1″, čím se vnitřní tabulka odsadila od té nadřazené právě o jeden pixel, čímž se vytvořilo dané orámování.

Jak na orámování řádku a sloupců?

Výše uvedený příklad orámoval tabulku pouze dokola. Někdo může potřebovat zobrazit tenkou čáru kolem řádku a sloupců tabulek. Není to žádný problém, stačí trochu modifikovat výše uvedený kód:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“0″ BGCOLOR=“BLACK“>
<TR><TD>
<TABLE CELLSPACING=“1″ CELLPADDING=“2″ BORDER=“0″>
<TR BGCOLOR=“white“>
<TD class=“texttabulka“>Text v buňce 1</TD>
</TR>
<TR BGCOLOR=“white“>
<TD class=“texttabulka“>Text v buňce 2</TD>
</TR>
</TABLE>
</TD></TR></TABLE>

Text v buňce 1

Text v buňce 2

Pokud nevidíte na první pohled změny v kódu, hned vám je řeknu. Jako v minulém případě jsou použity dvě tabulky. Ta naražená má definovanou barvu pozadí, stejně jako ta vnořená, ale pozor – ve vnořené tabulce není parametr Bgcolor=“barva“ umístněn v tagu <Table>, jako v předchozím případě, nýbrž je umístněn v tagu <Tr> a může se dát i do tagu <Td>. Proč to tak musí být, je uvedeno níže. To je první rozdíl.

Ten druhý rozdíl je v tom, že parametr Cellpadding, který byl v prvním příkladu v nadřazené tabulce uveden s hodnotou „1“, má nyní hodnotu „0“, protože v tomto případě není potřeba určovat vzdálenost okraje buněk od obsahu v buněk v nadřazené tabulce, jak tomu bylo v prvním případě.

Třetí rozdíl je ten, že ve vnořené tabulce jsme změnil hodnotu parametru Cellspacing“0″ na Cellspacing=“1″. Ptáte se proč? Parametr Cellspacing totiž určuje vzdálenost mezi buňkami a řádky, kdežto parametr Cellpadding určuje vzdálenost mezi obsahem buňky a jejím okrajem. Z tohoto důvodu nemůže být ve vnořené tabulce umístněn parametr Bgcolor v tagu <Table>, protože ten nastaví barvu CELÉ tabulky – tedy i barvu v „mezeře“ mezi řádky a buňkami vnořené tabulky, což nechceme. Pokud umístníte Bgcolor do řádku <TR> nebo do buňky <TD> vnořené tabulky, nastavíte pouze barvu tohoto řádku či buňky, ale už nikoli barvu mezer mezi jednotlivými řádky a sloupci vnořené tabulky, což je přesně to, co potřebujeme, protože vzniklá mezera „převezme“ barvu tabulky nadřazené, čímž vytvoříme celé orámování tabulky včetně řádků a buněk.

Jak na částečné orámování tabulky

Jak postupovat, když potřebujeme tabulku orámovat pouze částečně, třeba ze všech stran, kromě horní části tabulky? Jde to nastavit pomocí parametru Frame, ale toto nastavení bohužel vůbec nepodporuje Netscape a navíc se jedná o klasické orámování o síle dvou pixelů. Zde na to tedy musíme jinak a bohužel mnohem složitěji:

<TABLE CELLSPACING=“0″ CELLPADDING=“0″ BORDER=“0″ BGCOLOR=“white“>
<TR>
   <TD ROWSPAN=“3″ BGCOLOR=“black“><IMG SRC=“invisible.gif“ WIDTH=“1″ HEIGHT=“1″ BORDER=“0″></TD>
   <TD CLASS=“texttabulka“>Text v buňce 1</TD>
   <TD ROWSPAN=“3″ BGCOLOR=“black“><IMG SRC=“invisible.gif“ WIDTH=“1″ HEIGHT=“1″ BORDER=“0″></TD>
</TR>
<TR>
   <TD CLASS=“texttabulka“>Text v buňce 1</TD>
</TR>
<TR>
   <TD BGCOLOR=“black“><IMG SRC=“invisible.gif“ WIDTH=“1″ HEIGHT=“1″ BORDER=“0″></TD>
</TR>
</TABLE>

	Text v buňce 1
	Text v buňce 1

Musíte si totiž vytvořit tabulku, která bude obsahovat buňky navíc a těmto buňkám pomocí Bgcolor nastavíte barvu a do této buňky vložíte neviditelný obrázek o velikosti 1×1 pixel. Ptáte se, proč obrázek? No, my potřebujeme stanovit rozměr této buňky – ten má být jeden pixel a takové velikosti nedosáhnete použitím například tvrdé mezery. Možná namítnete, že stačí do buňky vložit parametr Width, ale to nestačí – nesmí nám totiž vzniknout prázdná buňka v tabulce, protože Netscape s nimi neumí vůbec pracovat.

Výše uvedená tabulka má tedy vlevo buňku o velikosti 1 pixelu, vpravo buňku o velikosti 1 pixelu a úplně dole buňku (či spíše už řádek) o výšce jednoho pixelu, a tyto všechny tři jsou všechny obarveny černou barvou, čímž vznikne částečné orámování tabulky.

Při použití takové tabulky se pochopitelně neobejdete bez vnořování tabulek, protože pokud chcete mít v takové tabulce text, musíte ho rozhodně nějak odsadit od okrajů tabulky (je totiž moc nalepený k okraji), ale nemůžete to udělat v této tabulce pomocí cellspacing a cellpadding, protože tyto parametry musí mít hodnoty nastavenou na „0“ – jinak totiž nedosáhnete orámování o síle jednoho pixelu, protože byste logicky odsadili i neviditelné obrázky. Na místo, kde se teď nachází „Text v buňce 1″ musíte vnořit tabulku, zde teprve nastavit cellpadding, třeba na 4 pixely (cellpadding=“4“) a teprve do ní vložit text. Nemusíte se toho nijak bát, je to normální použití tabulek, jenom se vám trochu zhorší orientace v tabulkách.

A to je k jedno-pixelovému orámování tabulek dnes vše – už mě totiž nenapadá, co bych ještě na těchto tabulkách mohl vylepšit:o) Doufám, že se vám článek líbil, a věřím, že bude růst počet stránek, které se zbaví tlusté čáry o síle 2 pixelů a použijí hezčí čáru o jediném pixelu, která navíc vypadá v Netscape stejně jako v Internet Exploreru.