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

Záhlaví HTML tabulek


HTML tabulky mohou mít záhlaví pro každý sloupec nebo řádek nebo pro mnoho sloupců/řádků.


EMIL TOBIÁŠ LINUS
     
     
     
     
     
8:00    
9:00    
10:00    
11:00    
12:00    
13:00    
PO ÚT ST SBÍRAT
8:00          
9:00          
10:00          
11:00          
12:00          
PROSINEC
     
     
     
     
     

Záhlaví HTML tabulek

Záhlaví tabulky jsou definována pomocí thprvků, každý thprvek představuje buňku tabulky.

Příklad

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Vertikální záhlaví tabulky

Chcete-li použít první sloupec jako záhlaví tabulky, definujte první buňku v každém řádku jako thprvek:

Příklad

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>


Zarovnat záhlaví tabulky

Ve výchozím nastavení jsou záhlaví tabulek tučná a zarovnaná na střed:

Jméno Příjmení Stáří
Jill Kovář 50
Předvečer Jacksone 94

Chcete-li zarovnat záhlaví tabulky doleva, použijte vlastnost CSS text-align:

Příklad

th {
  text-align: left;
}

Záhlaví pro více sloupců

Můžete mít záhlaví, které se rozprostírá přes dva nebo více sloupců.

název Stáří
Jill Kovář 50
Předvečer Jacksone 94

Chcete-li to provést, použijte colspanatribut na <th>prvku:

Příklad

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Více o colspan a rowspan se dozvíte v kapitole Table colspan & rowspan .


Popis tabulky

Můžete přidat popisek, který slouží jako nadpis pro celou tabulku.

Měsíční úspory
Měsíc Úspory
leden 100 $
Únor 50 dolarů

Chcete-li k tabulce přidat popisek, použijte <caption>značku:

Příklad

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Poznámka: Štítek <caption>by měl být vložen bezprostředně za <table>štítek.


HTML cvičení

Otestujte se pomocí cvičení

Cvičení:

Přidejte popisek tabulky, který říká „Jména“.

<tabulka>
  
  <tr>
    <th>Křestní jméno</th>
    <th>Příjmení</th>
    <th>Body</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</ td>
    <td>50</td>
  </tr>
</table>