Tabuľka
Tabuľka
Štruktúra celej tabuľky:
<table>
<tr>
<td>bunka A1</td>
<td>bunka A2</td>
</tr>
<tr>
<td>bunka B1</td>
<td>bunka B2</td>
</tr>
</table>
Prvok table – tabuľka
Syntax:
<table border=”…” cellpadding=”…” cellspacing=”…” datapagesize=”…” frame=”…” id=”…” rules=”…” style=”…” summary=”…” title=”…” width=”…” >
…vlastný obsah tabuľky…
</table>
Parametre prvku table:
border – vytvorí rámček o hrúbke zadaného čísla v pixeloch
cellspacing – vzdialenosť buniek v tabuľke v pixloch
cellpadding – vzdialenosť obsahu buniek od okraja bunky v pixloch
class – definícia externého štýlu
datapagesize – určuje, koľko záznamov zobraziť v tabuľke z externého zdroja dát (XML)
frame – vzhľad vonkajšieho rámčeka
- void –bez vonkajšieho rámčeka
- above – iba horný okraj rámčeka
- bellow – iba dolný okraj rámčeka
- hsides – rámček nad a pod tabuľkou
- vsides – rámček v pravo a ľavo tabuľky
- lhs – rámček v ľavo tabuľky
- rhs – rámček v pravo tabuľky
id – identifikátor prvku
rules – vnútorné čiary rámčeka
- none – bez vnútorných rámčekov
- rows – všetky čiary medzi riadkami
- cols – všetky čiary medzi stĺpcami
- all – všetky čiary
style – definícia štýlu pre tabuľku
summary – definuje popis tabuľky pre zariadenia popisujúce nevizuálne určenie a tvar tabuľky (brailove písmo…)
title – popis tabuľky
width – šírka tabuľky v px alebo %
Prvok tr – riadok tabuľky
Syntax:
<tr align=”…” char=”…” charoff=”…” id=”…” style=”…” title=”…” valign=”…” >
…vlastný obsah riadku…
</tr>
Parametre prvku tr:
align – vodorovné zarovnanie textu v riadkoch: left | right | center
class – definícia externého štýlu
char – znak podľa ktorého sú zarovnávané dáta v tabuľke, atribút align musí byť nastavený na hodnotu char
charoff – určuje posun od znaku určujúceho zarovnanie
id – identifikátor prvku
style – definícia štýlu riadka
title – popis riadka
valign – zvislé zarovnanie
- top – hore
- bottom – dole
- middle – na stred, implicitne
- baseline – zarovnané na spoločnú základňu
Prvok td a th – bunka tabuľky a hlavičky tabuľky
Syntax td:
<td abbr=”…” axis=”…” char=”…” charoff=”…” colspan=”…” headers=”…” id=”…” rowspan=”…” scope=”…” style=”…” title=”…” valign=”…” >
…vlastný obsah bunky…
</td>
Syntax th:
<th abbr=”…” axis=”…” char=”…” charoff=”…” colspan=”…” headers=”…” id=”…” rowspan=”…” scope=”…” style=”…” title=”…” valign=”…” >
…vlastný obsah bunky…
</td>
Parametre prvku td a th:
abbr – stručný obsah bunky
axis – určuje kategóriu do ktorej obsah bunky patrí, hodnota atribútu sú čiarkou oddelené kategórie
class – definícia externého štýlu
char – definícia zarovnávacieho znaku
charoff – posun od zarovnávacieho znaku
colspan – umožňuje spojiť zadaný počet buniek vedľa seba v riadku
headers – určuje ktoré bunky z hlavičky sa vzťahujú k danej bunke
id – identifikátor bunky
rowspan – umožňuje spojiť zadaný počet buniek nad sebou (pod aktuálnou bunkou, v ďalšom riadku musíme spojenú bunku vynechať
scope – určuje, pre ktoré bunky sú údaje v aktuálnej bunke hlavičkou
- col – aktuálna bunka je hlavičkou pre stĺpec buniek pod ňou
- row – aktuálna bunka je hlavičkou pre zvyšok buniek v riadku
- colgroup – aktuálna bunka je hlavičkou pre aktuálny colgroup
- rowgroup – aktuálna bunka je hlavičkou pre aktuálny rowgroup
style – definícia štýlu pre bunku
title – popis bunky
valign – zvislé zarovnanie :
- top – hore
- bottom – dole
- middle – na stred, implicitne
- baseline – zarovnané na spoločnú základňu
Prvok col – definícia stĺpca, prvok colgroup – formátovanie stĺpcov v tabuľke
Syntax col:
<col align class char charoff id span style title valign width />
Syntax colgroup:
<colgroup align=”…” char=”…” charoff=”…” id=”…” span=”…” style=”…” title=”…” valign=”…” width=”…” >
… definícia stĺpcov pomocou <col>…
</colgroup>
Parametre prvku col a colgroup:
align – vodorovné zarovnanie textu v stĺpci: left | right | center
class – definícia externého štýlu
char – definícia zarovnávacieho znaku
charoff – posun od zarovnávacieho znaku
id – identifikátor prvku
span – udáva počet stĺpcov kde sa pravidla opakujú
style – definícia štýlu pre stĺpec (stĺpce)
title – popis bunky
valign – zvislé zarovnanie
- top – hore
- bottom – dole
- middle – na stred, implicitne
- baseline – zarovnané na spoločnú základňu
Príklad na použitie colgroup a col:
<colgroup span=”3″ width=”100px”></colgroup>
<colgroup> <col width=”200px”>
<col width=”*”> </colgroup>
<tr>
<td> Stlpec 2 – 100px</td>
<td> Stlpec 3 – 100px</td>
<td> Stlpec 4 – 2 diely</td>
<td> Stlpec 5 – 1 diel</td>
</tr>
</table>
Výsledkom bude takáto tabuľka:
| Stlpec 1 – 100px | Stlpec 2 – 100px | Stlpec 3 – 100px | Stlpec 4 – 2 diely | Stlpec 5 – 1 diel |
Prvok caption – nadpis tabuľky
Syntax:
<caption id=”…” style=”…” title=”…” >
Nadpis tabuľky
</caption>
Parametre prvku caption:
class – definícia externého štýlu
id – identifikátor prvku
style – definícia štýlu pre bunku
title – popis bunky
Prvok thead, tbody, tfoot – hlavička, telo a päta tabuľky
Syntax thead:
<thead align=”…” char=”…” charoff=”…” id=”…” style=”…” title=”…” valign=”…” >
Hlavička tabuľky (definície riadkov v hlavičke)
</thead>
Syntax tbody:
<tbody align=”…” char=”…” charoff=”…” id=”…” style=”…” title=”…” valign=”…” >
telo tabuľky (definície riadkov v tele)
</tbody>
Syntax tfoot:
<tfoot align=”…” char=”…” charoff=”…” id=”…” style=”…” title=”…” valign=”…” >
päta tabuľky (definície riadkov v päte)
</tfoot>
Parametre prvkov thead, tbody, tfoot:
align – vodorovné zarovnanie textu v stĺpci: left | right | center
class – definícia externého štýlu
char – definícia zarovnávacieho znaku
charoff – posun od zarovnávacieho znaku
id – identifikátor prvku
style – definícia štýlu pre bunku
title – popis bunky
valign – zvislé zarovnanie
- top – hore
- bottom – dole
- middle – na stred, implicitne
- baseline – zarovnané na spoločnú základňu
Príklad:
| <table width=”200″ border=”1″ cellspacing=”2″ cellpadding=”5″> | ||||||||||||||||
| <tr align=”left”>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr> <td colspan=”2″>E — F</td> <td>G</td> <td>H</td>
</tr> <td>I</td> <td>J</td> <td rowspan=”2″>
K<br />|<br />O</td> <td>L</td> </tr> <td>M</td> <td>N</td> <td>P</td>
</tr> |
|
|||||||||||||||
Popis:
Nastavené parametre cellpading=”5″ a cellspacing=”2″ nám zaručujú, že medzera medzi bunkami bude vo všetkých smeroch 2 pixely a odsadenie textu v nútri každej bunky od hrany bunky 5 pixelov. Viditeľné je to v prvom riadku, kde je zarovnanie v bunkách nastavené v prvku <tr> na align=”left”, kde si môžme všimnúť vzdialenosť textu od okraja buniek.
Čiernym napísaný text v príklade sú údaje vložené v jednotlivých bunkách. Tučne zvýraznené sú prvky <br /> , ktoré sú tiež súčasťou obsahu buniek, no zároveň sa pri zobrazovaní interpretujú ako HTML prvky. Týmto spôsobom je možné veľmi jednoducho dosiahnuť formátovanie stránky. Napríklad pri formulároch, keď do jednej bunky vložíme popisy políčok a do druhej samotné prvky formuláru, budú zarovnané pekne pod sebou, namiesto toho, aby sa prispôsobovali dĺžke popisov pred nimi.