Tabuľky

Ako už samotný názov napovedá, jedná sa o tabuľky.

Každá tabuľka je definovaná značkami <table>, <tr> a <td>. Pri tabuľkách je možné použiť aj ďalšie značky na ich dodefinovanie.

  • <table> – tabuľka ako taká
  • <tr> – riadok tabuľky
  • <td> – stĺpec tabuľky vrámci riadku tabuľky
  • <th> – stĺpec tabuľky vrámci riadku tabuľky obsahujúci nadpis stĺpca
  • <thead> – hlavička tabuľky
  • <tbody> – telo tabuľky
  • <tfoot> – pätička tabuľky

Jednoduchá tabuľka

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
1 2 3
4 5 6

Klasická tabuľka

<table>
    <tr>
        <td>ZLOŽENIE VÝROBKU</td>
        <td>100 g</td>
        <td>1 dávka</td>
    </tr>
    <tr>
        <td>Energia</td>
        <td>1 688 KJ</td>
        <td>1 351 KJ</td>
    </tr>
    <tr>
        <td>Energia</td>
        <td>404 kCal</td>
        <td>323 kCal</td>
    </tr>
    <tr>
        <td>Tuky</td>
        <td>12,8 g</td>
        <td>10,24 g</td>
    </tr>
    <tr>
        <td>- z toho nasýtené tuky</td>
        <td>4,7 g</td>
        <td>3,76 g</td>
    </tr>
    <tr>
        <td>Sacharidy</td>
        <td>35,12 g</td>
        <td>28,09 g</td>
    </tr>
    <tr>
        <td>- z toho cukry</td>
        <td>8,04 g</td>
        <td>6,43 g</td>
    </tr>
    <tr>
        <td>Vláknina</td>
        <td>8,27 g</td>
        <td>6,61 g</td>
    </tr>
    <tr>
        <td>Bielkoviny</td>
        <td>32 g</td>
        <td>25 g</td>
    </tr>
    <tr>
        <td>Sodík</td>
        <td>1 050,56 mg</td>
        <td>844,8 mg</td>
    </tr>
</table>
ZLOŽENIE VÝROBKU 100 g 1 dávka
Energia 1 688 KJ 1 351 KJ
Energia 404 kCal 323 kCal
Tuky 12,8 g 10,24 g
– z toho nasýtené tuky 4,7 g 3,76 g
Sacharidy 35,12 g 28,09 g
– z toho cukry 8,04 g 6,43 g
Vláknina 8,27 g 6,61 g
Bielkoviny 32 g 25 g
Sodík 1 050,56 mg 844,8 mg

Tabuľka so všetkými náležitosťami

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>KS</th>
            <th>Cena</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Klávesnica</td>
            <td>1ks</td>
            <td>20.99€</td>
        </tr>
        <tr>
            <td>Myš</td>
            <td>1ks</td>
            <td>38.75€</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sumár:</td>
            <td>2ks</td>
            <td>59.74€</td>
        </tr>
    </tfoot>
</table>
Produkt KS Cena
Klávesnica 1ks 20.99€
Myš 1ks 38.75€
Sumár: 2ks 59.74€

Komplikovaná tabuľka

<table>
    <tr>
        <td colspan="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td colspan="3" rowspan="2">Lorem ipsum dolor sit amet, consectetur.</td>
    </tr>
    <tr>
        <td colspan="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
    <tr>
        <td colspan="3">Lorem ipsum dolor sit amet.</td>
        <td colspan="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
    <tr>
        <td colspan="2">Lorem ipsum dolor sit amet.</td>
        <td colspan="5">Lorem ipsum dolor sit amet.</td>
    </tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Pre skúšanie ako sa dá tabuľka jednotlivo upravovať a aký má byť jej výsledný HTML kód si vyskúšajte tento online tabuľkový generátor.


Testové otázky

  • Aké sú hlavné značky tabuľky?
  • Aké sú značky, ktoré sa vzťahujú k tabuľke?
  • Ako spojím viacero riadkov?
  • Ako spojím viacero stĺpcov?
  • Čo mi definujú jednotlivé tabuľkové značky?