Tabulky

Úvod   Popisky tagů   Úprava buňek tabulky   Popis atributů   (Ne)Vykreslování mřížky   Hodnoty atributů FRAME a RULES

Úvod

    Tabulky jsou velmi efektivní pro design stránek, nebo pro vytvoření sloupcové vazby. Vytvořím jednoduchou tabulku s jedním řádkem a dvěma sloupci a s popiskem, který je v záhlaví tabulky.:
<table>
<caption>Popisek tabulky</caption>
<tr>
<td>1. sloupec</td>
<td>2. sloupec</td>
</tr>
</table>
Na stránce to vypadá asi takhle:

Popisek tabulky
1. sloupec 2. sloupec


V dalším příkladu přidáme něco navíc:

<table border="1" cellpadding="2" cellspacing="0">
<caption>Popisek tabulky</caption>
<tr>
<td>1. sloupec</td>
<td>2. sloupec</td>
</tr>
</table>
Na stránce to vypadá asi takhle:

Popisek tabulky
1. sloupec 2. sloupec


V dalším příkladu přidáme zase něco navíc:

<table border="1" cellpadding="2" cellspacing="0">
<caption>Popisek tabulky</caption>
<tr>
<td colspan="2">1. sloupec</td>
</tr>
</table>
Na stránce to vypadá asi takhle:

Popisek tabulky
1. sloupec


   V následující tabulce jsou popsány jednotlivé tagy:

TAG Popis
<body> Tag, který začíná tabulku (párový)
<tr> Tag, který začíná řádek (párový)
<td> Tag, který začíná sloupec tabulky v daném řádku
<th> Tag, který zarovná a ztuční text
<caption> Záhlaví tabulky (implicitně nahoře, s atributem align="bottom" dole)


a jednotlivé atributy:

Atribut Popis
border nastavení šířky vnějšího rámečku
cellpadding vzdálenost textu od rámečku
cellspacing vnější okraj buňek
rowspan kolik řádek zabírá aktuální buňka
colspan kolik sloupců zabírá aktuální buňka
width a height šířka a výška v pixelech nebo v procentech


    Jinak do tabulek můžete psát cokoliv, vkládat obrázky i třeba vnořit další tabulky. Slučování buňek se dělá výše uvedenými atributy colspan a rowspan, kdy zadáte kolik sloupců resp. řádku zabere daná buňka. Nezapomeňte nato, že prohlížeče nezobrazí tabulku po částech, ale až jí celou přečtou (nevykreslují po buňkách), proto nedávejte třeba celou stránku do tabulky, jinak uživatel bude dlouho koukat na prázdnou stránku, než se načte.

Úprava buňek tabulky

    Zadávání šířky tabulky se dělá pomocí atributu width, který se udává buďto v pixelech nebo v procentech. Tzn., že jestli chcete, aby byla tabulka široká vždy tak, jak je dlouhý text zadáte do tagu <table> atribut width="100%", tedy v procentech (maximálně však do šířky stránky, nebo okna, nebo podle toho, kde je umístěna, protože se přizpůsobuje šířce), pokud, ale chcete, aby byla jen 200 pixelů široká, zadáte width="200". viz příklad:

100 % procent široká:
Popisek tabulky
1. sloupec dddd dddd dddd dddd 2. sloupec


200 pixelů široká:
Popisek tabulky
1. sloupec dddd dddd dddd dddd 2. sloupec


    Jinak šířka sloupce je tak široká, jak je nejširší obsah buňky v tom daném sloupci. Šířku můžete zadávat samozřejmě i do sloupců, ale pamatujte, že výsledná šířka bude stejná jako ta nejširší buňka ve sloupci. A pokud se obsah buňky nevejde do jednoho řádku, tak se zalomí, pokud to nezakážete příkazem nowrap, nebo jste třeba nezadali šířku. Viz příklad: v prvním sloupci jsem použil nowrap

Popisek tabulky
1. sloupec dddd dddd dddd dddd 2. sloupec


Pro upřesnění uvedu další atributy:

Atributy

Atribut pro <td> Popis
align horizontální zarovnání (left, right, center, justify)
valign vertikální zarovnání (top, midle, bottom, baseline)
width minimální šířka buňky (v pixelech nebo v procentech)
height minimální výška buňky (v pixelech nebo v procentech)
style atribut CSS
nowrap zakázání zalamování obsahu buňky
background obrázek na pozadí
bgcolor barva pozadí
bordercolorlight světlejší vykreslovací barva rámečku
bordercolordark tmavší vykreslovací barva rámečku
Atribut pro <table> Popis
align obtékání tabulky textem (right, left, center)
cellpadding vnitřní okraj buněk v pixelech
cellspacing vnější okraj buňek v pixelech
border šířka rámečku buňky
width šířka tabulky
background obrázek na pozadí
bgcolor barva pozadí
bordercolorlight světlejší vykreslovací barva tabulky
bordercolordark tmavší vykreslovací barva tabulky

Vykreslování mřížky

    Toto se týká jen prohlížeče explorer 4 a výše, jiné prohlížeče to zatím nepodporují, tak se musíte rozmyslet jestli chcete mít stránky jen pro Explorer a na jiných jinak, nebo na všech prohlížečích stejně.
    Atributy Frame a Rules mohou určit jestli se NEmá nějaká část mřížky u tabulky vykreslit, přičemž atribut Frame je pro vnější část tabulky a atribut Rules pro vnitřní. Jo, a musíte mít nastavený nenulový atribut border !. Příklad:

aa aa aa
aa aa aa
aa aa aa


Tady jsem nechal jen boční strany tabulky příkazem frame="vsides" a řádky příkazem rules="rows". Celý kód tagu <table> vypadá takto:
<table border="1" cellpadding="0" cellspacing="0" width="100%" frame="vsides" rules="rows">
Více vám napoví tabulka hodnot atributů frame a rules:

FRAME Popis
void tabulka nemá rámeček
border rámeček okolo celé tabulky
box rámeček okolo celé tabulky
hsides horní a dolní strana
vsides boční strany
above horní okraj
lhs levá strana tabulky
below spodní okraj
RULES Popis
none mřížka nebude vykreslena
all mřížka bude všude
rows mřížka mezi řádky
cols mřížka mezi sloupci
Ještě existují další, ale ty stejně nevyužijete.

Nahoru
Příbuzná témata:  Definice 

Jestliže máte dotaz, tak mi napište: biaggi@biaggi.cz

Poslední aktualizace: 29. 9. 2001











Tvorba internetových stránek od 1.000 Kč



Výroba www stránek od 1.000 Kč
reklama

Programování HTML

Menu :  Html  CSS  Ostatni  Odkazy