Šíř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:
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.
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.
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">
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
Obsah
Hledání
Základní kurs
Editory
HTML tipy
Provoz webu
CSS styly
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