Nauč sa HTML od základov – 5. diel: Tvorba tabuliek v HTML

Vitajte v piatom dieli nášho seriálu o HTML! Dnes sa naučíme, ako vytvárať a používať tabuľky v HTML. Tabuľky sú užitočné pre zobrazenie štruktúrovaných údajov, ako sú čísla, zoznamy produktov, kalendáre alebo výsledky výskumov. V tomto dieli si prejdeme základné prvky HTML tabuliek, naučíme sa, ako ich vytvoriť a ako ich naformátovať.

Základná štruktúra tabuľky

HTML tabuľky sa skladajú z niekoľkých dôležitých značiek:

• <table>: Značka, ktorá definuje začiatok a koniec tabuľky.
• <tr>: Označuje riadok tabuľky.
• <td>: Označuje bunku tabuľky (v ktorej sa nachádzajú údaje).
• <th>: Označuje bunku v hlavičke tabuľky, ktorá obsahuje popis jednotlivých stĺpcov alebo riadkov. Text v bunkách <th> je zvyčajne tučný a zarovnaný na stred.

Príklad jednoduchej tabuľky:

<table border="1">
  <tr>
    <th>Meno</th>
    <th>Vek</th>
    <th>Mesto</th>
  </tr>
  <tr>
    <td>Janko</td>
    <td>25</td>
    <td>Bratislava</td>
  </tr>
  <tr>
    <td>Eva</td>
    <td>30</td>
    <td>Košice</td>
  </tr>
</table>

V tomto príklade:

• <table border="1">: Pridáva rámček okolo tabuľky. V moderných stránkach sa štýlovanie tabuliek zvyčajne robí pomocou CSS, ale pri základnom HTML môžete použiť atribút border na definovanie hrúbky rámčeka.
• <tr>: Vytvára nový riadok.
• <th>: Definuje názvy stĺpcov v hlavičke (napr. „Meno“, „Vek“, „Mesto“).
• <td>: Obsahuje jednotlivé údaje v tabuľke.

Zlúčenie buniek (colspan a rowspan)

V HTML môžete zlúčiť viacero buniek pomocou atribútov colspan a rowspan.

• colspan: Zlúči bunky vodorovne, čím vytvorí väčšiu bunku, ktorá zasahuje do viacerých stĺpcov.
• rowspan: Zlúči bunky zvislo, čím vytvorí väčšiu bunku, ktorá zasahuje do viacerých riadkov.

Príklad použitia colspan a rowspan:

<table border="1">
  <tr>
    <th>Meno</th>
    <th colspan="2">Informácie</th>
  </tr>
  <tr>
    <td>Janko</td>
    <td>25 rokov</td>
    <td>Bratislava</td>
  </tr>
  <tr>
    <td rowspan="2">Eva</td>
    <td>30 rokov</td>
    <td>Košice</td>
  </tr>
  <tr>
    <td>34 rokov</td>
    <td>Bratislava</td>
  </tr>
</table>

• colspan="2": Spája bunky v jednom riadku a pokrýva dva stĺpce. V našom prípade bunky „Informácie“ spájajú dva stĺpce.
• rowspan="2": Spája bunky v dvoch riadkoch. V príklade bunka s menom „Eva“ pokrýva dva riadky.

Styling tabuliek pomocou CSS

Aj keď tabuľky v HTML môžete štýlovať pomocou atribútov ako border alebo width, odporúča sa používať CSS (Cascading Style Sheets) na formátovanie a štýlovanie, pretože to poskytuje väčšiu kontrolu a flexibilitu.

Príklad štýlovania tabuľky pomocou CSS:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Meno</th>
    <th>Vek</th>
    <th>Mesto</th>
  </tr>
  <tr>
    <td>Janko</td>
    <td>25</td>
    <td>Bratislava</td>
  </tr>
  <tr>
    <td>Eva</td>
    <td>30</td>
    <td>Košice</td>
  </tr>
</table>

• border-collapse: collapse;: Spája vnútorné a vonkajšie okraje bunky, čím sa vytvorí jednotný rámček medzi bunkami.
• padding: Pridáva priestor medzi obsah bunky a jej hranicu, čím sa text zobrazuje prehľadnejšie.
• background-color: Pridáva farbu na pozadie hlavičkových buniek (<th>), čím sa vizuálne odlíši hlavička od zvyšku tabuľky.

Alternatívne farby riadkov (Zebra stripes)

Pre zvýšenie čitateľnosti tabuľky je bežnou praxou aplikovať striedavé farby riadkov. Toto sa dá dosiahnuť jednoducho pomocou CSS.

Príklad so striedavými farbami riadkov:

<style>
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

V tomto príklade:

• nth-child(even): Toto pravidlo vyberá každý druhý riadok (párny riadok) a aplikuje naň svetlejšiu farbu pozadia.

Pridanie titulkov k tabuľkám

Tabuľky môžu obsahovať titulok, ktorý pomáha používateľom lepšie pochopiť obsah zobrazený v tabuľke. Na tento účel sa používa značka <caption>, ktorá sa nachádza priamo pod značkou <table>.

Príklad s titulkom:

<table border="1">
  <caption>Zoznam používateľov</caption>
  <tr>
    <th>Meno</th>
    <th>Vek</th>
    <th>Mesto</th>
  </tr>
  <tr>
    <td>Janko</td>
    <td>25</td>
    <td>Bratislava</td>
  </tr>
  <tr>
    <td>Eva</td>
    <td>30</td>
    <td>Košice</td>
  </tr>
</table>

Úloha pre vás

Na základe toho, čo ste sa naučili o tabulkách, vytvorte HTML dokument, ktorý obsahuje tabuľku s týmito prvkami:

• Základná tabuľka s údajmi (napr. zoznam kníh alebo produktov).
• Použitie zlúčenia buniek pomocou colspan alebo rowspan.
• Štýlovanie tabuľky pomocou CSS (rámčeky, farby, zarovnanie).
• Striedavé farby riadkov pre lepšiu čitateľnosť.

Záver 5. časti

V tomto dieli sme sa naučili, ako vytvárať tabuľky v HTML, ako ich štýlovať a ako používať pokročilé techniky, ako sú zlúčenie buniek a striedavé farby riadkov. Tabuľky sú užitočné pre zobrazenie dát a štruktúrovaných informácií, čo z nich robí dôležitý nástroj v arzenáli webového vývojára.

Pokračujte v seriáli:

• 6. diel: Formuláre a vstupné polia v HTML.

V nasledujúcej časti sa budeme venovať formulárom a ich používaniu na zber údajov od používateľov.