Formátování tabulek v HTML

Šířky buněk - Další atributy buněk - Formát celé tabulky

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 mě teď taky nezajímá

Šířky buněk

Jak 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. To je někdy výhoda, ale jindy (zvláště u dlouhých tabulek) se to nehodí. Proto se dá buňkám předepsat šířka explicitně. Jde to několika způsoby.

Nejstarší způsob používá atriburu width v tagu td.

Např: <td width="100">

bude buňka tabulky o šířce 100 obrazovkových bodů. Aby byly všechny buňky v jednom sloupci stejně široké, musí se width=100 napsat do každé buňky ve sloupci. To se zdá být zdlouhavé, naštěstí všechny wysiwyg editory umějí vyplnit width samy. Podobným způsobem, atributem height, se dá nastavit výška buňky.

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

Možná si říkáte, k čemu je dobré zadávat šířku buňky, když se nakonec stejně přizpůsobí. Odpověď je taková, že některé starší prohlížeče tabulku s nerozměrovanými buňkami vykreslují pomaleji. (K mé velké lítosti se novější prohlížeče chovají ještě hůře, ale o tom někdy jindy.)

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. Ty mají zase jinou necnost: svádějí autora k tomu, aby dělal všechny tabulky rozměrované pevným počtem obrazovkových bodů (nejčastěji aktuální šířka uživatelova okna). To je pak jasné, že bude-li okno užší nebo širší, nezobrazí se to správně. (Je to vlastně formátovací chyba.) Řešením je zadávání procent, pak se tabulka přizpůsobí šířce okna.

Další příklad

Následující kód se zobrazí takhle:

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

A konečně atribut align="center" vystřeďuje obsah buňky a je jedním z mnoha dalších atributů, které se dají u buňky tabulky použít.

Další 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, midle, 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 rámečku jakákoliv barva
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">

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, bordercolorlight, bordercolordark totéž, co u vlastností buněk

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

Další: nové vlastnosti tabulek, Předchozí: základy tabulek
Vizte též: design pomocí tabulek

Píše Yuhů
dusan@pc-slany.cz
mail formulářem
Jak psát web O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage Hledání

Obsah

Hlavní stránka

Novinky

Download

Zdroje

Hledání


Rozšířené

Základní kurs

Jak udělat stránku

Základy HTML

Publikování

Zásady psaní

Editory

Různé prohlížeče

Editory

FrontPage 2000

FP Editor 98

Word 97

FrontPage Express

HTML tipy

Příprava obrázků

Obrázky

Odkazy

Vychytávky odkazů

Záložky

Aktivní mail

Tabulky

Úprava tabulek

Novinky tabulek

Design tabulkami

Rámy

Formátování rámů

Rámy nepoužívat

Iframe

Formuláře

Formuláře v HTML

Zápis barev

Seznam definic

Formátovací chyby

Provoz webu

Vzdálené služby

Vyhledávače

Katalogy

Správa souborů

Obsah / forma

Čeština

Meta tagy

Nastavení serveru

Používání prohlížeče

CSS styly

CSS styly

Úvod do CSS

Struktura textu

CSS prakticky

Přehled vlastností

Složitější deklarace

Délkové jednotky

Pozicování

Sloupce pozicováním

Okraje objektů

Odlišení prohlížečů

Omezení CSS

Odlišný tisk

Dynamické HTML

Filtry

Příklady filtrů

Různé barvy odkazů

Barva rolovací lišty

 


Jak psát web: http://dusan.pc-slany.cz/internet/

Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz

Sláva kočkám! Poslední aktualizace 27.05.2001