Tabuľky
Teória :) Tabuľky sa skladajú z buniek, ktoré sú umiestnené do riadkov a stĺpcov V jazyku HTML je preto potrebné rozlíšiť, nie len to, kde sa začína a končí tabuľka ale aj to, kde sa začína a končí riadok tabuľky a aké bunky do daného riadku patria
Značky Základnou značkou pre vytvorenie tabuľky je značka <table>...</table> Ako sme si už spomínali, tabuľka sa skladá z riadkov, ktoré sa vkladajú značkou <tr>...</tr> V riadkoch sa nachádzajú bunky, ktoré vkladáme značkou <td>...</td> Špeciálnym typom buniek sú hlavičkové bunky <th>...</th>
Preklad značiek (z angličtiny) table – tabuľka tr (table row) – riadok tabuľky td (table data cell) – údajová bunka v tabuľke th (table header cell) – hlavička bunka v tabuľke
Príklad tabuľky 2x2 <table> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> Ak neveríte, že je text v tabuľke, stlačte Ctrl+A, čím sa vyberie celý obsah stránky:
Atribúty tagu <table> border="1" – hrúbka rámčeka align="center" – nastavenie zarovnania tabuľky (left-vľavo, right-vpravo, center – v strede) cellpadding="1" – vnútorný okraj bunky (vzdialenosť textu od okraja bunky) cellspacing="1" – vonkajší okraj bunky (vzájomná vzdialenosť buniek tabuľky) widht, height – šírka a výška bunky (podobne ako u obrázkov sa môže zadávať buď ako bezrozmerné číslo – rozmer bude v pixeloch, alebo ako číslo so znakom percento – tabuľka sa roztiahne na x% zo stránky)
Atribút border <table border="1"> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> Takto bude vyzerať tabuľka s atribútom border nastaveným na hodnotu 20: Poznámka: Od tejto chvíle atribút border nebudem uvádzať, ale tabuľku budem pre názornosť zobrazovať ako orámovanú
Atribút align <table align="center"> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> center left right
Atribút cellpadding <table cellpadding="0"> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> 10 20
Atribút cellspacing <table cellspacing="0"> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> 10 20
Atribút width <table width="350"> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> Takto bude vyzerať tabuľka s atribútom width nastaveným na hodnotu 100%:
Atribút height <table height="250"> <tr> <td>Ľavá horná</td> <td>Pravá horná</td> </tr> <td>Ľavá dolná</td> <td>Pravá dolná</td> </table> Takto bude vyzerať tabuľka s atribútom height nastaveným na hodnotu 100%:
Atribúty tagu <td> a <th> align="center" – nastavenie vodorovného (horizontálneho) zarovnania obsahu bunky (left-vľavo, right-vpravo, center – v strede) valign="center" – nastavenie zvislého (vertikálneho) zarovnania obsahu bunky (top-hore, bottom-dole, middle-v strede) widht, height – šírka a výška bunky (podobne ako u obrázkov sa môže zadávať buď ako bezrozmerné číslo – rozmer bude v pixeloch, alebo ako číslo so znakom percento – tabuľka sa roztiahne na x% zo stránky) colspan="2" – spojenie buniek horizontálne (číslo udáva počet spojených stĺpcov v riadku) rowspan="2" – spojenie buniek vertikálne (číslo udáva počet spojených riadkov v stĺpci)
Atribúty align a valgin <table> <tr> <td align="left" valign="top">A</td> <td align="center" valign="top">B</td> <td align="right" valign="top">C</td> </tr> <td align="left" valign="middle">P</td> <td align="center" valign="middle">Q</td> <td align="right" valign="middle">R</td> <td align="left" valign="bottom">X</td> <td align="center" valign="bottom">Y</td> <td align="right" valign="bottom">Z</td> </table>
Atribút width <table> <tr> <td width="10%">A</td> <td width="30%">B</td> <td width="60%">C</td> </tr> <td>P</td> <td>Q</td> <td>R</td> <td>X</td> <td>Y</td> <td>Z</td> </table>
Atribút height <table> <tr> <td height="10%">A</td> <td>B</td> <td>C</td> </tr> <td height="30%">P</td> <td>Q</td> <td>R</td> <td height="60%">X</td> <td>Y</td> <td>Z</td> </table> Tu som trošku zmenšil veľkosť písma, aby bolo vidno zmeny výšky buniek pri zmene hodnôt atribútu height
Atribút colspan <table> <tr> <td colspan="2">AB</td> <td>C</td> </tr> <td>P</td> <td>Q</td> <td>R</td> <td>X</td> <td colspan="2">YZ</td> </table>
Atribút rowspan <table> <tr> <td rowspan="2">AP</td> <td>B</td> <td>C</td> </tr> <td>Q</td> <td rowspan="2">RZ</td> <td>X</td> <td>Y</td> </table>
Pozor na počty buniek Ak používate atribúty colspan a rowspan, tak ich píšeme vždy do tej bunky, kde chceme spájanie začať (pre colspan v ľavej bunke, pre rowspan v hornej bunke) Ak ste mali v pôvodnej tabuľke v riadku 5 buniek a 2 z nich chcete spojiť atribútom colspan, výsledný počet buniek v riadku bude 4 (1 veľká spojená + 3 malé nespojené) a teda v riadku potom musí byť <td>...</td> už len 4-krát Podobne to platí aj pre spájanie atribútom rowspan a teda musíte v ďalších riadkoch odobrať príslušný počet buniek Ak na to zabudnete, tabuľky budú vyzerať takto:
„Zabudnuté“ bunky X X <tr> <td colspan="2">A</td> <td>B</td> <td>C</td> </tr> <td>P</td> <td>Q</td> <td>R</td> <td>X</td> <td>Y</td> <td>Z</td> <tr> <td rowspan="2">A</td> <td>B</td> <td>C</td> </tr> <td>P</td> <td>Q</td> <td>R</td> <td>X</td> <td>Y</td> <td>Z</td>
Zvláštnosti width a height Ak atribúty width a height nezadáte, prehliadač prispôsobí šírky a výšky jednotlivých buniek ich obsahu Ak máme napr. trojstĺpcovú tabuľku a atribút width zadáme len do dvoch stĺpcov, šírka tretieho stĺpca sa automaticky dopočíta Atribút width stačí nastaviť len v prvej bunke stĺpca – ostatné bunky v stĺpci sa tejto voľbe prispôsobia Atribút height stačí nastaviť len v prvej bunke riadku – ostatné bunky v riadku budú túto voľbu akceptovať Súčet percentuálnych hodnôt šírok/výšok by nemal presiahnuť 100%, inak sa rozmery tabuľky budú správať „zvláštne“
Ďalšie atribúty Značky <table>, <td> a <th> majú aj ďalšie atribúty Nakoľko budú ďalšie hodiny venované štúdiu jazyka kaskádových štýlov (CSS), rozhodol som sa ich neuvádzať, aby sa vám na neskorších hodinách nemiešali vlastnosti v HTML s vlastnosťami v CSS Ďalšie atribúty pre tabuľky a bunky si ale môžete nájsť na stránke JakPsatWeb.cz