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

Styl tabulky HTML


Použijte CSS, aby vaše tabulky vypadaly lépe.


HTML tabulka - Zebra Stripes

Pokud přidáte barvu pozadí na každý druhý řádek tabulky, získáte pěkný efekt zebřích pruhů.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Chcete-li upravit styl každého dalšího prvku řádku tabulky, použijte :nth-child(even) selektor takto:

Příklad

tr:nth-child(even) {
  background-color: #D6EEEE;
}

Poznámka: Pokud použijete (odd)místo (even), styl se objeví na řádku 1,3,5 atd. místo 2,4,6 atd.


HTML tabulka - vertikální pruhy zebry

Chcete-li vytvořit svislé pruhy zebry, upravte každý druhý sloupec namísto každého druhého řádku .

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Nastavte :nth-child(even)datové prvky tabulky pro takto:

Příklad

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

Poznámka: Pokud chcete mít styl na záhlaví i na běžné buňky tabulky, umístěte :nth-child()selektor na prvky thi prvky.td



Kombinujte vertikální a horizontální pruhy Zebra

Můžete kombinovat styl ze dvou výše uvedených příkladů a budete mít pruhy na každém druhém řádku a každém druhém sloupci.

Pokud použijete průhlednou barvu, získáte překrývající se efekt.

                 
                 
                 
                 
                 

Použijte rgba()barvu k určení průhlednosti barvy:

Příklad

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Horizontální přepážky

Jméno Příjmení Úspory
Petr Griffin 100 $
Lois Griffin 150 dolarů
Joe Swanson 300 dolarů

Pokud zadáte ohraničení pouze ve spodní části každého řádku tabulky, budete mít tabulku s vodorovnými oddělovači.

Přidejte border-bottomvlastnost ke všem trprvkům, abyste získali vodorovné oddělovače:

Příklad

tr {
  border-bottom: 1px solid #ddd;
}

Posuvný stůl

Použijte :hoverselektor trpro zvýraznění řádků tabulky najetím myši:

Jméno Příjmení Úspory
Petr Griffin 100 $
Lois Griffin 150 dolarů
Joe Swanson 300 dolarů

Příklad

tr:hover {background-color: #D6EEEE;}