Ako vytvárať tabuľky v HTML: Príručka vhodná pre začiatočníkov

Zavedenie

Tabuľka je množina údajov usporiadaná podľa riadkov a stĺpcov. Tabuľky sú užitočné na zobrazenie spojení medzi typmi údajov, ako sú napríklad produkty a ich náklady, zamestnanie a dátumy použitia alebo lety a časy odletov. V tomto kurze vytvoríte tabuľku pomocou HTML, prispôsobíte ju pridaním požadovaného počtu riadkov a stĺpcov a pridáte záhlavia riadkov a stĺpcov, aby bola tabuľka ľahšie čitateľná.

Predpoklady

Znalosť HTML. Ak nie ste oboznámení s HTML alebo si potrebujete pripomenúť, môžete si prečítať prvé tri návody našej série návodov Ako vytvoriť webovú stránku pomocou HTML.
Súbor index.html na precvičovanie vytvárania tabuliek HTML. Ak neviete, ako vytvoriť index.html súbor, postupujte podľa pokynov v našom krátkom návode Ako nastaviť projekt HTML.

Základy tabuliek HTML

Vytvorí sa tabuľka HTML s úvodnou značkou <tabuľka> a uzatváracou značkou </tabuľka>. Vo vnútri týchto značiek sú údaje usporiadané do riadkov a stĺpcov pomocou značiek otváracieho a uzatváracieho riadka tabuľky <tr> a značiek údajov otváracej a uzatváracej tabuľky <td>.

Značky riadkov <tr> tabuľky sa používajú na vytvorenie riadka údajov. Vo vnútri značiek otváracej a uzatváracej tabuľky <tr> sa na usporiadanie údajov v stĺpcoch používajú značky údajov otváracej a uzatváracej tabuľky <td>.

Ako príklad uvádzame tabuľku, ktorá má dva riadky a tri stĺpce:

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Ak chcete preskúmať, ako tabuľky HTML fungujú v praxi, prilepte vyššie uvedený útržok kódu do súboru index.html alebo iného súboru HTML, ktorý používate v tomto kurze.

Uložte a znova načítajte súbor v prehliadači, aby ste skontrolovali výsledky. (Pokyny na načítanie súboru v prehliadači nájdete v tomto kroku nášho návodu na prvky HTML.)

Webová stránka by teraz mala obsahovať tabuľku s tromi stĺpcami a dvoma riadkami:

Ak chcete pridať ďalší riadok, pridajte zvýraznený prvok <tr> do dolnej časti tabuľky:

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Uložte si výsledky a skontrolujte ich v prehliadači. Mali by ste dostať niečo takéto:

Ak chcete pridať ďalší stĺpec, skúste pridať ďalší prvok údajov tabuľky <td> do každého z prvkov riadka tabuľky <tr>:

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4 </td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

Uložte si výsledky a skontrolujte ich v prehliadači. Na webovej stránke by sa mala zobrazovať tabuľka s tromi riadkami a štyrmi stĺpcami:

Pridanie orámovania do tabuľky

Vo všeobecnosti by mali byť tabuľky štylizované pomocou CSS. Ak nepoznáte CSS, môžete pridať nejaký ľahký štýl pomocou HTML pridaním atribútov do elementu <table>. Do tabuľky môžete napríklad pridať orámovanie s atribútom orámovanie:

<table border="1">
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
  </tr>
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
 </tr>
</table>

Pridajte do tabuľky atribút zvýrazneného orámovania a skontrolujte výsledky v prehliadači. (Súbor index.html môžete vymazať a vložiť do útržku kódu HTML vyššie.) Uložte súbor a načítajte ho do prehliadača. Tabuľka by teraz mala mať orámovanie okolo každého riadka a stĺpca takto:

Pridanie nadpisov do riadkov a stĺpcov

Nadpisy je možné pridať do riadkov a stĺpcov, aby sa tabuľky ľahšie čítali. Záhlavia tabuľky sú automaticky štylizované tučným a vycentrovaným textom, aby sa vizuálne odlíšili od údajov tabuľky. Nadpisy tiež uľahčujú prístup k tabuľkám, pretože pomáhajú jednotlivcom používajúcim čítačky obrazovky navigovať v údajoch tabuľky.

Nadpisy sa pridávajú pomocou otváracích a uzatváracích značiek <th>. Ak chcete pridať hlavičky stĺpcov, musíte do hornej časti tabuľky vložiť nový prvok <tr>, do ktorého môžete pridať názvy stĺpcov pomocou značiek <th>.

Vymažte súbor index.html a pridajte riadok záhlaví stĺpcov s nasledujúcim úryvkom kódu:

<table border="1">
  <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
</table>

Uložte súbor index.html a znova ho načítajte v prehliadači. Mali by ste dostať niečo takéto:

Webová stránka by mala zobrazovať jeden riadok hlavičiek stĺpcov. Všimnite si, že hlavička prvého stĺpca je prázdna. Ak chcete, môžete sem pridať hlavičku stĺpca.

Ak chcete pridať hlavičky riadkov, musíte pridať otváracie a uzatváracie značky <th> ako prvú položku v každom prvku riadka <tr> tabuľky. Pridajte hlavičky riadkov a údaje pridaním zvýrazneného útržku kódu nižšie medzi uzatváraciu značku </tr> a uzatváraciu značku <tabuľka> tabuľky v súbore index.html:

<table border="1">
 <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
  <tr>
    <th>Row Header 1</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr> 
    <th>Row Header 2</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
 <tr> 
    <th>Row Header 3</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
</table>

Uložte súbor index.html a znova ho načítajte v prehliadači. Mali by ste dostať niečo takéto:

Teraz by ste mali mať tabuľku s tromi záhlaviami stĺpcov a tromi záhlaviami riadkov.

Techniky responzívnych tabuliek, osvedčené postupy zjednodušenia ovládania a značky používané v tabuľkách HTML

Nastavenie responzívnych tabuliek

Ak chcete, aby boli tabuľky vhodné pre mobilné zariadenia, zvážte tieto techniky:

CSS Overflow pre posúvateľné tabuľky

.table-container {
   overflow-x: auto;
}

<div class="table-container">
<table>
   <tr>
      <th>Column 1</th>
      <th>Column 2</th>
   </tr>
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
</table>
</div>

Bootstrap pre responzívne stoly

<div class="table-responsive">
<table class="table">
   <tr>
      <th>Header</th>
      <td>Data</td>
   </tr>
</table>
</div>

Bootstrap automaticky spôsobí, že tabuľky budú reagovať pomocou .table-responsive.

Najvhodnejšie postupy pre zjednodušenie ovládania

Zlepšenie prístupnosti:

Použitie atribútu scope
```
<th scope="col">Column Name</th>
```
Pridanie štítkov árií pre čítačky obrazovky
```
<table aria-describedby="table-description">
```

Použite <titulok> pre popisy tabuliek

<caption>Product Pricing Table</caption>

Ďalšie vylepšenia štýlu a zjednodušenia ovládania nájdete v téme Štýl tabuľky pomocou CSS.

Značky používané v tabuľkách HTML

Tu je niekoľko bežne používaných značiek tabuľky v HTML:

Štítok	Popis
`<stôl>`	Definuje tabuľku
`<tr>`	Definuje riadok
`<>`	Definuje bunku hlavičky
`<td>`	Definuje dátovú bunku
`<thead>`	Obsah hlavičky skupín
`<tbody>`	Obsah tela skupín
`<tfoot>`	Obsah päty skupín
`<titulok>`	Pridá titulok tabuľky
`<colspan>`	Zlúčenie stĺpcov
`<rozpätie riadkov>`	Zlúčenie riadkov

Často kladené otázky

1. Ako vytvoríte tabuľku v HTML?

Ak chcete vytvoriť tabuľku v jazyku HTML, použite prvok <tabuľka> spolu s prvkami <tr> (riadok tabuľky), <th> (hlavička tabuľky) a <td> (údaje tabuľky). Tu je jednoduchý príklad:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Pokročilejšie možnosti štýlu nájdete v téme Štýl tabuľky pomocou CSS.

2. Ako vytvoriť tabuľku s ponukami v HTML?

Tabuľku ponuky je možné štruktúrovať pomocou prvku <tabuľka> na štruktúrované zobrazenie položiek a cien:

<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Burger</td>
    <td>$5</td>
  </tr>
</table>

Ak chcete, aby bola ponuka vizuálne príťažlivá, môžete použiť štýly CSS. Ďalšie informácie nájdete v článku Štýl HTML pomocou CSS.

Ako vytvoriť tabuľku bez okrajov v HTML?

Orámovanie tabuľky môžete odstrániť nastavením border="0" v značke <table> alebo pomocou CSS:

table {
  border-collapse: collapse;
  border: none;
}
td, th {
  border: none;
}

Ďalšie spôsoby štýlovania tabuliek nájdete v článku Ako vytvoriť webovú stránku pomocou CSS.

4. Ako vytvoríte riadok v tabuľke HTML?

Ak chcete vytvoriť riadok, použite prvok <tr> vo vnútri <tabuľky>:

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
</table>

5. Ako zlúčim bunky v tabuľke HTML?

Použite atribúty colspan alebo rowspan v <td> alebo <th>:

<table border="1">
  <tr>
    <td colspan="2">Merged Cell</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

6. Môžem nastaviť HTML tabuľku ako responzívnu?

Áno! Môžete použiť CSS alebo frameworky ako Bootstrap, aby boli tabuľky responzívne. Napríklad pomocou CSS:

table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

Komplexnejší prístup nájdete v časti Techniky responzívnych tabuliek vyššie.

7. Aké sú osvedčené postupy na vytváranie tabuliek so zjednodušeným ovládaním?

Použite správne sémantické prvky ako <thead>, <tbody> a <tfoot>. Implementujte tiež atribúty prístupnosti, ako napríklad:

< scope="col"> pre hlavičky stĺpcov.
<th scope="row"> pre hlavičky riadkov.
aria-describedby pre asistenčné technológie.

Podrobnosti nájdete v sekcii Osvedčené postupy prístupnosti vyššie.

Záver

V tomto kurze ste vytvorili tabuľku HTML, pridali ďalšie riadky a stĺpce a vytvorili ste nadpisy pre riadky a stĺpce.

Ak máte záujem dozvedieť sa viac o HTML, môžete si pozrieť našu sériu návodov Ako vytvoriť webovú stránku pomocou HTML. Ak sa chcete dozvedieť viac o tom, ako používať CSS na štýlovanie prvkov HTML (vrátane tabuliek), navštívte našu sériu návodov Ako vytvoriť webovú stránku pomocou CSS.