Značky tabulky HTML - Naučte se příklady značek tabulek HTML se syntaxí

• Úvod do značek tabulky HTML

Úvod do značek tabulky HTML

Tabulka HTML poskytuje způsob, jak odvodit nebo definovat data jako text, obrázky, odkazy atd., Pokud jde o řádky a sloupce buněk. HTML tabulky lze vytvořit pomocí

štítek. Ve výchozím nastavení jsou data tabulky zarovnána. V tomto tématu se dozvíme o značkách tabulek HTML.

Tabulku lze vytvořit pomocí

značky.

tag určuje řádky tabulky, které se používají k vytvoření řádku.

Data tabulky mohou být strukturována uvnitř

,	, a
tag definuje nadpis tabulky.	tag určuje datové buňky tabulky, které se používají k vytvoření sloupce.

obsah tabulky s četnými prvky tabulky.

Syntax

Nadpis tabulky 1	Nadpis tabulky 2
Datová buňka 1	Datová buňka 2
Datová buňka 3	Datová buňka 4

Příklady značek tabulky HTML

Níže jsou uvedeny příklady značek tabulek HTML

1. Základní použití tabulky



HTML Table Tag Usage



název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Uložte kód s příponou HTML a otevřete jej v prohlížeči. Zobrazí se následující výstup:

2. Titulek tabulky

Titulek tabulky lze určit pomocí značky < caption > .

Příklad



HTML Table Tag Usage



Toto je Titulek tabulky

název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Výše uvedený kód zobrazí následující výstup:

3. Rozteč stolních buněk

Prostor buněk tabulky lze definovat pomocí atributu cellspacing. Atribut cellspacing určuje mezeru mezi buňkami tabulky.

Příklad



HTML Table Tag Usage



název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Výše uvedený kód zobrazí následující výstup:

4. Polstrování buněk

Výplň buněk tabulky může být definována pomocí atributu cellpadding. Atribut cellpadding vzdálenost mezi ohraničením buňky tabulky a daty.

Příklad



HTML Table Tag Usage



název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Výše uvedený kód zobrazí následující výstup:

5. Atributy rozpětí sloupců a řádků

Dva nebo více řádků tabulky lze sloučit do jednoho řádku pomocí atributu rowspan a sloupce tabulky lze sloučit do jednoho sloupce pomocí atributu colspan.

Příklad



HTML Table Tag Usage



Sloupec jedna	Sloupec dva	Sloupec tři
Řádek jedna	Řádek dva	Řádek tři
	Řádek čtyři	Řádek pět
Řádek šest

Kód zobrazí následující výstup:

6. Pozadí tabulky

Pozadí tabulky lze vytvořit pomocí atributu bgcolor. Ohraničení buněk tabulky lze určit pomocí atributu ohraničení barvy.

Příklad



HTML Table Tag Usage



název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Spusťte výše uvedený kód a zobrazí níže uvedený výstup:

7. Výška a šířka tabulky

Výška a šířka tabulky lze nastavit pomocí atributů width a height.

Příklad



HTML Table Tag Usage



název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Výše uvedený kód zobrazí následující výstup:

8. Stylingové stolní buňky

Příklad



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



název	Země
Dhoni	Indie
David Miller	Jižní Afrika
Joe Root	Anglie

Spusťte výše uvedený kód, budete mít níže uvedený výstup:

8. Vnořené tabulky

Můžete použít jednu tabulku uvnitř jiné tabulky, která se nazývá vnořená tabulka.

Uvažujme níže uvedený příklad pro vnořenou tabulku:

Příklad



HTML Table Tag Usage



název Země Dhoni Indie David Miller Jižní Afrika Joe Root Anglie

Výše uvedený kód zobrazí následující výstup:

Atributy tabulky

• Zarovnání: Tento atribut poskytuje zarovnání obsahu uvnitř prvku.
• bgcolor: Tento atribut určuje barvu pozadí tabulky.
• border: Tento atribut určuje ohraničení pro buňky tabulky.
• cellpadding: Tento atribut zobrazuje výplň mezi buňkami tabulky a obsahem tabulky.
• cellspacing: Tento atribut zobrazuje mezeru mezi buňkami tabulky.
• frame: Určuje, které části vnějších okrajů jsou viditelné.
• pravidla: Určuje, které části vnitřních ohraničení jsou viditelné.
• $$$: Tento atribut informuje, že je tabulka nefunkční.
• shrnutí: Uvádí, jaký typ obsahu tabulky je přítomen.
• width: Tento atribut říká šířku tabulky.
• height: Tento atribut určuje výšku tabulky.

Závěr

Zatím jsme studovali různé typy značek tabulek v HTML. Příklady ukázaly použití stylingu tabulky, vnoření jedné tabulky do jiné tabulky, nastavení výšky a šířky tabulky, přidání mezer a výplní pro buňky tabulky, použití barvy pozadí tabulky a mnoho dalších.

Doporučené články

Toto je průvodce značkami tabulek HTML. Zde diskutujeme příklady značek tabulky HTML se syntaxí a atributy tabulky. Další informace naleznete také v následujících článcích -

1. Prvky formuláře HTML
2. Vytvořit tabulky v HTML
3. Značky obrázků HTML
4. Co je to HTML
5. Rámce HTML
6. Bloky HTML
7. Nastavte barvu pozadí v HTML s příkladem