Tabulky HTML
Tabulky
Tabulka je rozdělena na několik oddělených částí. Je rozdělena stejně jako základní struktura HTML obsahuje hlavičku, tělo a patičku.
1. Hlavičku ani patičku definovat nemusíme, jednoduše ji můžeme vynechat. Tzn. tabulka se bude skládat pouze z definice tabulky a jejího těla.
2. Nebo můžeme použít pouze hlavičku bez patičky a naopak.
Celkově shrnuto, tabulku tvoří značka TABLE pro definici tabulky, THEAD pro hlavičku, TFOOT pro patičku a TBODY pro tělo. Jednotlivé řádky vytváří značka TR a buňky TD. Pro zvýraznění místo TD používáme TH.
<table>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tfoot>
<tr><td></td>
</tr>
</tfoot>
<tbody>
<tr><td></td>
</tr>
</tbody>
</table>
V takto vytvořené tabulce nejsou žádné rámečky nebo stínování. Pro zobrazení rámečku použijeme parametr border
<table border=“1“>
Rámeček
kolem buněk a tabulky pomocí HTML
Parametr border, bordercolor slouží k nastavení barvy rámečku nepatří však ke specifikaci HTML, ale podporují jej všechny prohlížeče kromě Opery.
Každé tabulce můžeme přidělit rámeček. Velikost zapisujeme v pixelech.
Pomocí parametru border př. <table
border=“2“>
Pomocí frame ve značce table si můžeme vybrat, které okraje tabulky se mají objevit.
void-bez rámečku
border-úplný rámeček
above-pouze horní
below-pouze dolní
lhs-pouze levý
rhs-pouze pravý
hsides-horní a spodní
vsides-levý a pravý
Parametr s podobnou funkcí existuje i uvnitř tabulky. Parametr rules se zapisuje to značky <table> a má k dispozici hodnoty:
none-bez rámečku
all-rámeček kolem všech buněk
groups-rámeček se zobrazí pouze kolem částí tabulky (např. kolem hlavičky označené značkou <thead> a tělem tabulky označeným značko <tbody>)
cols-rámeček se vykreslí pouze kolem sloupců tabulky
rows-rámeček se vykreslí jenom kolem řádků tabulky.
Nastavení vnitřních okrajů tabulky
Parametry cellpadding a cellspacing
Existuje vzdálenost mezi rámečkem tabulky a rámečkem buněk, popř. vzdálenost mezi rámečky sousedních buněk (cellspacing)
Vzdálenost mezi obsahem buňky a jejím okrajem, popř. Rámečkem(cellpadding).
Oba parametry zapisujeme do značky <table>
Nemusí se zadávat.
Výchozí hodnota pro vzdálenost je 2pixely. Pokud chceme toto nastavení potlačit
zadáme nulovou hodnotu.
<table
cellspacing=“0“>
Šířka a výška tabulky
Parametry width a height
Width umožňuje nastavení šířky tabulky. Height výšky tabulky, tento parametr není součástí specifikace HTML avšak jej podporují všechny prohlížeče.
Nastavení velikosti buněk pomocí height v HTML je zavržené, proto se doporučuje používat odpovídající vlastnosti CSS( jsou to také width a height)
Pokud není zadána výška ani šířka pak se buňky přizpůsobí obsahu.
<table width=“px/%“>
Barva pozadí tabulky
Pomocí parametru bgcolor mění barvu pozadí celé tabulky.
Zarovnání tabulky
Pomocí parametru align. Zarovnání celé tabulky vzhledem k poloze ostatních elementů na stránce. Tento parametr nabývá tří hodnot:
left – doleva, right – doprava, center – střed
<table align=“center“>
Zarovnání obsahu buněk
Parametr align provádí u značky <tr> horizontální zarovnání na řádku. Nabývá tří hodnot:
left, right, center, justify(do bloku)
<tr align=“center“>
<td align=“center“>
Parametr valign zarovnává vertikálně a nabývá hodnot.
Top – zarovnává k hornímu okraji
Bottom – k dolnímu okraji
Middle – zarovnává na střed
<tr valign=“bottom“>
<td valign=“bottom“>
Barva pozadí na jednom řádku resp. u dané buňky
Pro obarvení všech buněk na jednom řádku použijeme stejný parametr bgcolor jako u značky <table> akorát jej napíšeme do značky <tr>
<tr bgcolor=“barva“>
<td bgcolor=“barva“> barva pozadí u dané buňky
Šířka a výška buňky
Na rozdíl od <table> v tomto případě můžeme zapisovat jak šířku width, tak výšku height buňky.
<td height=“px“, width=“px“>
Sloučení buněk
Při tvorbě rozvržení stránek založeném na tabulkách můžeme využít slučování.
Pro sloučení buňky se sousedícími buňkami vpravo použijeme parametr colspan a určíme počet sloupců, přes které se buňka rozáthne.
<td colspan=“3“>
Pro sloučení buňky se sousedícími buňkami pod ní použijeme parametr rowspan a určíme počet řádků.
<td rowspan=“2“>
Úprava rámečku
Barva se mění pomocí vlastnosti bordercolor
<table bordercolor=“barva“>
Bordercolordark tento parametr umožňuje upravit tmavší část rámečku.
Bordercolorlight určuje barvu světlejší části rámečku
THEAD, TFOOT a TBODY
<thead align=“left“> <tfoot
align=“center“><tbody align=“justify“>
<thead valign=“top“> <tfoot
valign=“bottom“><tbody valign=“middle“>
Titulek tabulky
Pomocí značky <caption>. Musí následovat hned po definici tabulky. Pomocí parametru align určujeme zarovnání titulku.
left, right, top – titulek se zobrazí nad tabulkou, bottom - titulek se zobrazí pod tabulkou
Colgroup a col
Pomocí těchto značek formátujeme celé sloupce.
Colgroup definuje skupinu sloupců, pro něž platí některé stejné hodnoty. Musí být vložena za titulek tabulky, zároveň před hlavičku či tělo tabulky.
Obě značky mají skoro stejný význam s tím rozdílem, že nepárovou col je možné vnořovat pod značku colgroup.
<colgroup span=“počet_sloupců“>,<col
span=“počet_sloupců“>
Počet sloupců, které budou do skupiny sloupců zahrnuty. Implicitně je hodnota nastavena na jeden sloupec.
Nastavení šířky buněk
spadající pod jeden sloupec
<colgroup width=“px/%“>
Zarovnání obsahu všech
buněk, které jsou součástí sloupců zahrnutých do skupiny.
align left, right,
center, justify