Tabulky

Když zavítáme na stránku nějakého vyhledávače či stránku nějaké firmy, uvidíme stránku obvykle členěnou do sloupců jako například u novin. K tomu se obvykle používají tabulky nebo struktrura formátovaná pomocí CSS, která vzeešla z upořádání, které bylo tvovřeno pomocí tabulek.

Základní zápis:

 <table>
   <thead>
<tr>
  <td>
  </td>
</tr>
   </thead>
   <tbody>
<tr>
  <td>
  </td>
</tr>
   </tbody>
   <tfoot>
<tr>
  <td>
  </td>
</tr>
   </tfoot>
 </table>

Párové značky THEAD, TBODY a TFOOT slouží k určení množiny buněk, které budou považovány za hlavičku, tělo a patu tabulky. Na jejich pořadí nezáleží, což umožňuje definovat hlavičku a patičku tabulky výše a potom definovat oblast pro tělo tabulky. Toto řešení se obvykle požívá, je-li potřeba rozšiřovat tělo tabulky třeba pomocí PHP. Jinak není nutno tyto značky používat.

Význam jednotlivých značek:

TABLE - značka pro tabulku
TR - značka pro řádek tabulky
TD - značka pro buňku tabulky
TH - značka pro buňku tabulky (vytuční obsah)

Do buňky tabulky lze vložit jakýkoliv text či HTML značku včetně další tabulky.

Parametry značky table

 <Table
BGCOLOR=“barva_pozadí(lze použít i background)“ 
CELLSPACING="číslo" 
CELLPADDING="číslo" 
WIDTH="číslo/procenta" 
ALIGN="LEFT/RIGHT/CENTER" 
BORDER="číslo" 
RULES="NONE/BASIC/COLS/ROWS/ALL" 
FRAME="VOID/ABOVE/HSIDES/VSIDES/BELOW/RHS/LHS"
> </table>

 <table border="5" bgcolor="yellow" align="center" width="80%">
   <caption>Nadpis tabulky </caption>
   <tr>
  <td> 1. řádek 1. buňka  </td>
    </tr>
   <tr>
  <td> </td> <td>2. řádek 2. buňka </td>
   </tr>
   <tr>
  <td align="center"> <p>xxx </p> <h1> align=center  </h1> </td>
  <td>
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
   x <br />x <br />
    </td>
    <td valign="top"> <h1> valign=top  </h1> </td>
    <td> <h1> valign-neurčeno  </h1> </td>

    </tr>
 </table>

 <br /> <br /> <br /> <br /> <br /> <br /> <br />

 <table width="50%" cellspacing="0" cellpadding="0" rules="none">

 <caption> <h2>Tab II: Úsporná tabulka </h2> </caption>

    <tr> <td>xxxxxxxxxxx </td> </tr>

 </table>
 <table width="50%" cellspacing="0" cellpadding="0" border="1">

 <caption> <h2>Tab III: Demonstrace cellpadding </h2> </caption>

    <tr> <td>xxxxxxxxxxx </td> <td>xxxxxxxxxxx </td> </tr>

 </table>

Pozn: Některé parametry tabulky (např. bordercolor) už nejsou v HTML4 definovány, ale přesto níže tyto parametry pro představu uvádím, neboť v CSS se tyto vlastnosti dají definovat.

BGCOLOR="barva" určuje barvu pozadí tabulky. Pokud v tabulce současně uvedeme tagy bgcolor (barva) a background (obrázek), přednost má bgcolor.
BORDERCOLOR="barva" určuje barvu orámování tabulky
BORDERCOLORDARK="barva" definice barvy tmavšího stínu orámování tabulky. Parametr není příliš využíván.
BORDERCOLORLIGHT="barva" definice barvy svělejšího stínu orámování tabulky. Parametr není příliš využíván.
BACKGROUND="obrazek.gif" na pozadí tabulky může být definován obrázek, který se naskládá na celé ploše tabulky v prohlížeči. Je nutno zadat cestu a název souboru.
WIDTH="150/100%" velikost tabulky. Hodnotu je možné zadávat v pixelech nebo v procentech. Pokud zadáme 100%, tabulka bude roztažena přes celou obrazovku.
ALIGN="LEFT/RIGHT/CENTER" zarovnání tabulky. LEFT – tabulka bude zarovnána nalevo, RIGHT –- tabulka bude zarovnána napravo, CENTER – tabulka bude zarovnána na střed
VALIGN="TOP/MIDDLE/BOTTOM/BASELINE" vertikální zarovnání textu v políčkách tabulky. Pokud není definováno, je implicitně nastaveno na střed. Parametr není příliš využíván
BORDER="2" orámování tabulky. Barva orámování se mění tagy bordercolor, bordercolordark a bordercolorlight. Doporučuji parametr border pokaždé uvádět, protože není-li definován, jeho implicitní hodnota činí v IE a Opeře 0 pixelů a v NN 2 pixely.
RULES="NONE/BASIC/COLS/ROWS/ALL určuje zobrazení vnitřních rámečků. NONE odstraní všechny vnitřní, oddělující rámečky, BASIC zobrazí vodorovné linky, ROWS zobrazí linky mezi všemi řádky tabuky, COLS zobrazí linky mezi všemi sloupci tabulky a ALL zobrazí všechny linky v tabulce.
FRAME="VOID/ABOVE/HSIDES/VSIDES/BELOW/RHS/LHS" definuje zobrazení orámování tabulky. VOID odstraní všechny vnější rámečky, ABOVE zobrazí orámování nad horním okrajem tabulky, HSIDES zobrazí orámování nad a pod tabulkou, VSIDES zobrazí orámování vlevo a vpravo, BELOW zobrazí orámování dolního okraje tabulky, RHS zobrazí orámování na pravé straně tabulky a LHS zobrazí orámování na levé straně tabulky.

Pozn: V HTML jsou k tabulkám definovány značky pro výchozí formátování sloupců. Jedná se o značky COLGROUP a COL. Vysvětlení značek najdeme na doporučených stránkách. V HTML4 jsou pro značku TABLE definovány tyto parametry: summary, width, bordur, frame, rules, cellspacing, cellpadding. Přestože některé parametry již nemají být podporovány, internetové prohlížeče je podporují, a proto zde uvádím všechny.

Parametry značky td

ALIGN definuje vodorovné zarovnání textu ve všech buňkách celé řady. Pokud zarovnání neuvedeme, použije se Výchozí zarovnání doleva.
VALIGN oproti předchozímu parametru je to definice svislého zarovnání textu v buňkách.
Height výška buňky
Width šířka buňky
VALIGN="TOP/MIDDLE/BOTTOM/BASELINE"

Tabulka [parametry: colspan,rowspan]

COLSPAN="číslo" Velmi důležitý parametr, který umožňuje spojení jednotlivých buněk - odstraňuje tedy „přepážky“ mezi nimi. Pokud není tento parametr přítomen, je implicitně nastavena hodnota jedna. Pokud je číslo vyšší, pak se buňka rozkládá přes více sloupců od aktuální buňky směrem doprava.
ROWSPAN="číslo" Rovněž velmi důležitý parametr, který umožňuje spojení jednotlivých řádků tabulky.

 <table border="5" bgcolor="orange" align="center" width="600px">
   <tr> <td>[1.1] </td> <td>[1.2] </td> </tr>
   <tr> <td colspan="2">[2.1] </td> </tr>
   <tr> <td rowspan="3">[3.1] </td> <td>[3.2] </td> </tr>
   <tr> <td>[4.2] </td> </tr>
 </table>

Určení parametry sloupce

Pokud potřebujeme nastavit stejné parametry pro celý sloupec tabulky použijeme značku COLGROUP

Parematry značky

WIDTH šířka buněk
ALIGN horizontální zarovnání
VALIGN< vertikální zarovnání/li>

http://www.w3schools.com/tags/tag_colgroup.asp

http://www.jakpsatweb.cz/tabulky-nove.html

Samizdatová skripta