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 - Zastaralý příklad

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

Formátování buněk přidáním stylu tagu <td> (šířky buněk třeba)
Úpravou celé tabulky přidáním stylu tagu <table> (síla rámečku celé tabulky třeba)
Ú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ů.

Stylování buněk

Buňkám tabulky se dají pomocí CSS předepisovat rozmanité formátovací vlastnosti pomocí atributu style u tagu <td>:

atribut tagu <td>	význam	možné hodnoty (místo ...)
style="text-align: ..."	horizontální zarovnání	left, center, right, justify (= do bloku)
style="vertical-align: ..."	vertikální zarovnání	top, middle, bottom, baseline (účaří prvních řádků je zarovnáno)
style="width: ..."	minimální šířka buňky	počet pixelů, procento šířky tabulky
style="height: ..."	minimální výška řádku	počet pixelů
style="background-image: url("...")"	obrázek na pozadí	URL obrázku
style="background-color: ..."	barva pozadí	jakákoliv barva
style="border-color: ..."	barva rámečku	jakákoliv barva
style="border-spacing: ..."	mezera mezi rámečkem a rámečkem sousední buňky (obdoba dřívějšího cellspacing)	vzdálenost v CSS jednotkách, např. 3px
style="padding: ..."	mezera mezi obsahem a rámečkem (obdoba dřívějšího cellpadding)	vzdálenost v CSS jednotkách, např. 3px
style	obecný atribut CSS, kterým se dá udělat všechno	jakýkoliv popis CSS stylu
nowrap	obsah buňky se nebude zalamovat	bez hodnoty (prostě se tam jenom napíše <td nowrap>)

Příklad:

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 nebo poznámka
style="float: ..."	obtékání tabulky ostatním textem	right -- tabulka bude vpravo a bude obtékána zleva left -- obtékání zprava center -- vystředění tabulky bez obtékání
style="width: ..."	šířka tabulky	počet pixelů nebo procent šířky stránky; obecně jakýkoli CSS rozměr
style="margin-left: auto; margin-right: auto;"	tabulka bude ve stránce horizontálně vycentrovaná	Pozor: klasická vlastnost pro zarovnání textu (tedy text-align) tabulku na stránce nevystředí.
style="table-layout: fixed"	při zadání fixed se počítají šířky sloupců podle prvního řádku tabulky (tak to chápu já)	fixed. Viz table-layout
style="border: ..."	šířka rámečku okolo tabulky - ne mezi buňkami	hodnoty jako v CSS vlastnosti border, např. border: 1px solid blue;
style="border-collapse: collapse;"	rámečky dvou sousedních buněk tabulky se slijí do jednoho - jinak jsou dvojité	Collapse je jediná hodnota, nebo se to tam nemusí dávat, což je druhé chování. Viz styl border-collapse
style="empty-cells: hide;"	prázdné buňky nemají okraje ani pozadí	empty-cells: hide; to skryje, výchozí hodnota je show.

např.

Tabulka má nastaveny zelené plné rámečky o šířce 3 pixely (border). Tabulka bude zarovnána doleva a ostatní text ji asi bude obtékat (to je to float), pokud nebude moc široká (široká bude 300px, to je to width). Pokud budou mít buňky rámečky (to se nastavuje u tagů <td>), dvě sousední buňky je budou mít slité (to je to border-collapse: collapse).

Jiný příklad:

Tabulka má šírku 80 procent, což se počítá ze šířky nadřazeného prvku. Typicky tedy ze šířky stránky nebo <div>u, ve kterém je zanořena. Do 100 % zbývá 20 %. Kdyby se tam nezadávaly ty marginy, byla by tabulka nalepena k levému okraji a 20 % prázdna by zůstalo vpravo. Kdyby se tam dalo jenom margin-left: auto (ve smyslu vlevo dej automaticky zbylé místo), tak by se tabulka naopak nalepila k pravému okraji. Když se ale zadá zároveň margin-left: auto; margin-right: auto;, vznikne kouzlo, které tabulku fakticky vystředí, protože na každý okraj připadne 10 %.

Empty-cells

CSS vlastnost empty-cells umí říct, že se pod prázdnou buňkou nemá vykreslovat pozadí a nekreslit kolem ní rámeček (border). Zapisuje se to takhle:

table {empty-cells: hide;}

Není to moc užitečné, ale hodí se vědět.

Zafixování záhlaví

Při zobrazování velkých tabulek je někdy fajn, aby záhlaví sloupců neujíždělo a zůstávalo "přilepené" na stránce, aby bylo vidět, do jakého sloupce jednotlivé buňky patří. Hodí se na to využít CSS vlastnost position s relativně novou hodnotou sticky, tedy "přilepený". Ta funguje tak, že se prvek zobrazuje, dokud je vidět jeho rodičovský prvek (u tabulek většinou <table>). Pak už jen stačí říct CSS vlastností top, že má být nahoře (0px).

<table>
<tr style="position: sticky; top: 0px;">
<th>záhlaví</th><th>záhlaví</th>
</tr>
<tr>
<td>... normální další řádky ...
</tr>
</table>

Podobný příklad na position: sticky s tabulkou mám u popisu CSS vlastnosti position.

Šíř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

Buňka je minimálně tak široká, jak je široké nejdelší slovo nebo obrázek v buňce.
Tabulka nemůže být užší, než nejširší obrázek v jejím obsahu. Tak se někdy mohou přihodit tabulky širší než okno.

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

Níže z lenosti nechávám starší HTML zápis šířky pomocí atributu. Funguje to stejně, když se width přepíše do CSS vlastnosti width.

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:

Obsah buněk
Zadaná šířka všech buněk
Zadaná šířka tabulky
Šířka okna

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

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ě:

Vůbec šířky nezadávat, prohlížeč si je stanoví sám tak, jak potřebuje. Tuto metodu už jsem vyzdvihoval.
Zadat pouze šířku tabulky v procentech, aby nebyla moc mrňavá, ale samotné buňky nerozměrovat.
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.
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.

Zastaralý příklad

Prastarý kód psaný v HTML a jeho zobrazení. Až budu mít někdy prázdniny, tak to přepíšu do CSS.

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!)

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně