HTML tutoriál

HOME HTML Úvod do HTML HTML editory HTML Basic HTML prvky Atributy HTML HTML nadpisy HTML odstavce HTML styly Formátování HTML HTML citace HTML komentáře HTML barvy HTML CSS HTML odkazy HTML obrázky HTML favicon HTML tabulky HTML seznamy HTML Block & Inline HTML třídy ID HTML HTML iframe HTML JavaScript Cesty souboru HTML HTML hlava Rozložení HTML HTML responzivní Počítačový kód HTML Sémantika HTML Průvodce stylem HTML HTML entity HTML symboly HTML Emojis Znaková sada HTML HTML kódování URL HTML vs. XHTML

HTML formuláře

HTML formuláře Atributy formuláře HTML HTML prvky formuláře Typy vstupu HTML Vstupní atributy HTML Atributy vstupního formuláře HTML

HTML grafika

HTML plátno HTML SVG

HTML média

HTML média HTML video Zvuk HTML HTML pluginy HTML YouTube

HTML API

Geolokace HTML HTML Drag/Drop Webové úložiště HTML HTML Web Workers HTML SSE

Příklady HTML

Příklady HTML HTML kvíz HTML cvičení HTML certifikát HTML souhrn Přístupnost HTML

HTML reference

Seznam značek HTML Atributy HTML Globální atributy HTML Podpora HTML prohlížeče HTML události HTML barvy HTML plátno HTML Audio/Video HTML Doctypes HTML znakové sady HTML kódování URL HTML jazykové kódy Zprávy HTTP HTTP metody Převodník PX na EM Klávesové zkratky

HTML tabulky


HTML tabulky umožňují webovým vývojářům uspořádat data do řádků a sloupců.


Příklad

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Definujte HTML tabulku

Tabulka v HTML se skládá z buněk tabulky uvnitř řádků a sloupců

Příklad

Jednoduchá HTML tabulka:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Buňky tabulky

Každá buňka tabulky je definována značkou <td>a .</td>

td znamená data tabulky.

Vše mezi <td>a </td>je obsahem buňky tabulky.

Příklad

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Poznámka: Datové prvky tabulky jsou datové kontejnery tabulky.
Mohou obsahovat všechny druhy prvků HTML; text, obrázky, seznamy, další tabulky atd.



Řádky tabulky

Každý řádek tabulky začíná a <tr>a končí </tr>tagem.

tr znamená řádek tabulky.

Příklad

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

V tabulce můžete mít tolik řádků, kolik chcete, jen se ujistěte, že počet buněk je v každém řádku stejný.

Poznámka: Někdy může mít řádek méně nebo více buněk než jiný. O tom se dozvíte v další kapitole.


Záhlaví tabulek

Někdy chcete, aby vaše buňky byly záhlaví, v těchto případech použijte <th>značku namísto <td>značky:

Příklad

První řádek nechť jsou záhlaví tabulky:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Ve výchozím nastavení je text v <th>prvcích tučný a zarovnaný na střed, ale můžete to změnit pomocí CSS.


HTML cvičení

Otestujte se pomocí cvičení

Cvičení:

Přidejte řádek tabulky se dvěma záhlavími tabulky.

Dvě záhlaví tabulky by měla mít hodnotu „Jméno“ a „Věk“.

<tabulka>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>


Tagy tabulky HTML

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .