1. Tabuľky

2. 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

3. 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>

4. 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

5. 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:

6. 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)

7. 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ú

8. 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

9. 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

10. 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

11. 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%:

12. 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%:

13. 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)

14. 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>

15. 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>

16. 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

17. 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>

18. 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>

19. 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:

20. „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>

21. 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“

22. Ď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