Formátování tabulek v HTML

Atributy buněk - Formát celé tabulky - Šířky sloupců - Přirozené šířky - Zadávání šířky - Konflikt šířek - Rozměry tabulky v praxi - Příklad - Moderní stylování

Formátováním myslím úpravu vzhledu. Dělá se to čtyřmi způsoby:

  1. Formátování buněk přidáním atributů tagu <td> (šířky buněk třeba)
  2. Úpravou celé tabulky použitím atributu u tagu <table> (síla rámečku třeba)
  3. Úpravou formátu obsahu buněk (barva písma třeba), to je jasné
  4. Úpravou okolí tabulky (např. její vycentrování na stránce), to zde nerozvádím

Druhá polovina této stránky se týká šířek tabulky a sloupců.

Atributy buněk

Buňkám tabulky se dají předepisovat rozmanité formátovací vlastnosti:

atribut tagu <td> význam možné hodnoty
align horizontální zarovnání left, center, right, justify (= do bloku)
valign vertikální zarovnání top, middle, bottom, baseline (účaří prvních řádků je zarovnáno)
width minimální šířka buňky počet pixelů, procento šířky tabulky
height minimální výška řádku počet pixelů
style obecný atribut CSS, kterým se dá udělat všechno jakýkoliv popis CSS stylu, ale většinou to nefunguje úplně přesně
nowrap obsah buňky se nebude zalamovat bez hodnoty (prostě se tam jenom napíše <td nowrap>)
background obrázek na pozadí URL obrázku, funguje v IE od verze 3 a v NN až od verze 4
bgcolor barva pozadí jakákoliv barva
 bordercolor barva rámečku
bordercolorlight světlejší a tmavší vykreslovací barva rámečku, přehlušuje bgcolor
bordercolordark

Příklad:

<td width="33%" background="pozadi.gif" nowrap bgcolor="teal" bordercolor="#FF00FF">

Buňka (td) se šířkou 33% (ze šířky tabulky) s obrázkem na pozadí; pokud se obrázek nenajde nebo bude průhledný, bude pozadí zelenomodré (teal). Obsah se nebude zalamovat (nowrap -- to je rizikové vzhledem k nastavené šířce v procentech), rámeček bude mít základní barvu světle fialovou (#ff00ff).

Formát celé tabulky

Globální vlastnosti tabulky už jsme nakousli, teď je zopakuji celé a přidám hodnoty, aby to bylo kompletní.

atribut tagu <table> význam možné hodnoty
align obtékání tabulky ostatním textem, totéž co "align" u "img" (obrázků) right -- tabulka bude vpravo a bude obtékána zleva
left -- obtékání zprava
center -- vystředění tabulky bez obtékání
cellpadding vnitřní okraj buněk počet pixelů
cellspacing vnější okraj buněk počet pixelů
border šířka rámečku okolo tabulky počet pixelů
width šířka tabulky počet pixelů nebo procent šířky stránky
background, bgcolor, bordercolor, bordercolorlight, bordercolordark totéž, co u vlastností buněk

např. 

<table cellpadding="15" border="1" rules="rows" cellspacing="0" frame="void" align="left">

Tabulka má nastaveny rámečky o šířce 1 pixel (border). Vnější rámeček okolo tabulky by se neměl vykreslovat (frame=void). Tabulka bude zarovnána doleva a ostatní text ji asi bude obtékat, pokud nebude moc široká; kdyby měla ještě nastavenou šířku, obtékal by ji jistě.

Šířky sloupců

Problematika šířky buněk a tabulek je překvapivě velmi složitá. Naštěstí existuje několik pravidel, podle kterých se stanovují šířky buněk a tabulek. Řadím podle priority.

Pravidlo šířky sloupce

Sloupec je tak široký, jak široká je nejširší buňka toho sloupce. 

To bylo vidět na předchozích příkladech (viz základy tabulek): sloupce se udělají tak široké, jaký je nejširší obsah buňky v tom kterém sloupci. 

Pravidlo minimální šířky podle obsahu

Pravidlo nastavené šířky

Buňkám a tabulce se dají nadeklarovat šířky, které ale nemusejí v konečném efektu platit. Zadávání šířek popisuji níže.

Konfliktní pravidla

Ve většině případů prohlížeče před vykreslením tabulky vyhodnocují, který sloupce bude jak široký, podle složitých pravidel. 

Přirozené šířky

Tabulku můžete prostě nechat, ať si stanoví šířky sloupců sama podle obsahu. Prostě nebudete zadávat žádné šířky (zadávání popisuji dále). U velmi dlouhých tabulek se to nehodí, ale většinou je přirozené (ne)zadávání šířek výhodou. 

Zadávání šířek

Buňkám a tabulce se dá předepsat šířka a výška explicitně. Jde to několika způsoby:

Zadávání šířky v pixelech

Atribut width se dá použít u buňky (tag <td>) a u tabulky (tag <table>). Např: 
<td width="100">
bude buňka tabulky o šířce 100 obrazovkových bodů. Nebo:

<table width="400">
bude tabulka široká 400 pixelů.

Zadávání šířky v procentech

Prostě se za to číslo napíše procento. Např: 

<td width="20%">
je buňka, která by měla zabrat 20% šířky tabulky. Dvě poznámky: jednak píšu "měla by", protože se může dostat do konfliktu, o tom níže. Druhá poznámka je zdůraznění toho, že 100% je v tomto případě šířka tabulky

Když napíšu:
<table width="90%"> ,
tak tabulka zabere 90% šířky okna (nebo prostě prostoru, do kterého by se mohla vykreslit). Pak je šířka tabulky prostě závislá na prohlížeči a rozlišení.

Výška

Podobným způsobem, atributem height, se dá nastavit výška buňky. Nebudu se tím zabývat, protože vertikálního místa má stránka dost (dá se rolovat), takže nevznikají konflikty. Jenom zmíním, že pokud se tabulce zadá výška v procentech, tak také počítá procenta z výšky okna. 

Pozor na syntaxi: width a height mají ta písmenka t a h na konci přeházená. Mockrát jsem se s tím navztekal, když se mi to nechtělo zobrazovat správně.

Konflikt šířek

V praxi se mohou dostat do konfliktu čtyři údaje a okolnosti: 

V ideálním případě spolu šířky nekolidují. To je když součet šířek buněk je rovný nastavené šířce tabulky, žádná buňka nemá extrémně široký obsah a okno je širší než tabulka. Tento ideální případ je velmi řídký.

V praxi nastává celá škála možných nerovností. Proberu jen ty nejčastější, všechny zmínit asi nedokážu. 

Vždy se ale operuje se součtem šířek sloupců, který se v prohlížeči stanoví tak, že se prostě vezmou všechny buňky ve sloupci, najde se ta nejširší (ať už nejširší deklarací nebo obsahem) -- to je požadovaná šířka sloupce -- načež se to sečte ze všech sloupců.

Šířka tabulky > součet šířek sloupců

Snadnější případ, protože šířka v tabulce přebývá. Tabulka se pak vykreslí v deklarované šířce. Rozdíl šířky, který vlastně nepatří žádnému sloupci, pak rozdělí rovnoměrně mezi sloupce. (Trochu změnu do toho vnášejí nové vlastnosti tabulek, kde se dá k tagu <col> nastavit šířka jako násobek, to teď není důležité).

Šířka tabulky < součet šířek sloupců

Tabulka se většinou vykreslí v požadované šířce. Prostor, který jí chybí, se snaží ubrat rovnoměrně jednotlivým sloupcům. 

Některé sloupce ale nejdou zužovat pod určitou mez, protože mají široký obsah (dlouhé slovo nebo široký obrázek). Takové sloupce se smrsknou na tu minimální šířku, ale víc ne.

Pokud by se maximálně smrsknuly všechny sloupce, ale stále by byl součet minimalizovaných sloupců širší, než požadovaná šířka tabulky, vykreslí se tabulka širší.

Šířka tabulky versus šířka okna

Pokud je šířka tabulky stanovena zápisem v tagu <table>, nemá šířka okna na šířku tabulky vliv. 

Pokud tabulka nemá předepsanou šířku, vykreslí se tak široká, jaký je součet šířek sloupců. Ovšem pouze v případě, že to není více než šířka okna. Pokud by okno bylo užší než součet šířky sloupců, zužují se sloupce rovnoměrně výše popsaným způsobem. Opět ale nejde jít pod minimální šířku, takže občas tabulka přesáhne okno.

Existuje css vlastnost table-layout: fixed, která nerozměrované tabulce zakáže zužovat se podle okna. Je podporována Internet Explorerem 5 a myslím, že i Mozillou. Zápis je 

<table ... style="table-layout: fixed">

Rozměry tabulky v praxi

Možná si říkáte, k čemu je dobré zadávat šířku buňky, když se nakonec stejně přizpůsobí. To je správný postřeh. Ale existují některé standardní metody, jak pracovat efektivně: 

  1. Vůbec šířky nezadávat, prohlížeč si je stanoví sám tak, jak potřebuje. Tuto metodu už jsem vyzdvihoval.
  2. Zadat pouze šířku tabulky v procentech, aby nebyla moc mrňavá, ale samotné buňky nerozměrovat. 
  3. Zadávat šířku všech buněk v procentech tak, aby dohromady dávaly stovku. Šířka tabulky se může nechat také v procentech nebo se vůbec nemusí zadávat.
  4. Zadat pevnou šířku tabulky v pixelech a všechny buňky zadat také v pixelech, aby součet odpovídal. Zkontrolovat, zda není v nějaké buňce příliš široký obsah (a případně tam spojit buňky, je-li to nutné). Toto je nejčastější způsob práce s rozměry tabulky.
    Problémem je stanovit takovou šířku, aby byla čitelná na všech strojích. Obvykle se dává něco kolem 800 pixelů, aby se to vešlo do okna každému. Dávat víc, je jasná formátovací chyba.
    Je vcelku sporné, zda takovou práci s tabulkami lze doporučit.
    Také si možná říkáte, že musí být pěkná otrava psát tam ty šířky ručně. Naštěstí to ale všechny wysiwyg editory umějí automaticky. 

Příklad

Kód a jeho zobrazení:

Velmi dlouhý text, aby se zalomil na další řádky Ahoj (:-)
Nějaký text Jiný text Nic

<table border="1">
<tr>
<td width="100">Velmi dlouhý text, aby se zalomil na další řádky</td>
<td width="30" align="center">Ahoj</td>
<td width="20">(:-)</td>
</tr>
<tr>
<td width="20">Nějaký text</td>
<td width="200">Jiný text</td>
<td width="20">Nic</td>
</tr>
</table>

Jak je vidět, mohu buňkám zadávat různé šířky, ale skutečná výsledná šířka buňky bude stejná, jako nejširší buňka ve sloupci. Na příkladě by měla být vidět i další věc: Pokud se obsah buňky nevejde na jednu řádku, prostě se zalomí. (To funguje pouze u buňky s nastavenou šířkou!)

Moderní stylování

Existují dvě relativně nové (aktualizováno 2004) docela šikovné CSS vlastosti.

Table-layout: fixed - při zadání tagu table počítá šířky sloupců podle prvního řádku tabulky.

Border-collapse: collapse - při zadání tagu table spojuje dvojité rámečky do jednoduché čáry.

Příklad:

<table style="table-layout:fixed; border-collapse: collapse" border="1">
...
</table>

Tabulka bude mít šířky sloupců podle prvního řádku a jednoduché rámečky. Podpora od IE 6, v Mozille a v Opeře 7.

 

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í

Základy Prvky stránek Tvorba webu

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