Značky tabuľky HTML Naučte sa príklady značiek tabuliek HTML so syntaxou

Úvod do značiek html tabuliek

Tabuľka HTML poskytuje spôsob odvodenia alebo definovania údajov, ako sú text, obrázky, odkazy atď., Pokiaľ ide o riadky a stĺpce buniek. HTML tabuľky je možné vytvoriť pomocou

tag. V predvolenom nastavení sú údaje tabuľky zarovnané vľavo. V tejto téme sa dozvieme viac o značkách tabuliek HTML.

Tabuľku je možné vytvoriť pomocou

tagy.

Značka určuje riadky tabuľky, ktoré sa používajú na vytvorenie riadka.

Údaje tabuľky môžu byť štruktúrované v rámci

,	a
tag definuje nadpis tabuľky.	tag určuje dátové bunky tabuľky, ktoré sa používajú na vytvorenie stĺpca.

obsah tabuľky s početnými prvkami tabuľky.

syntax

Nadpis tabuľky 1	Nadpis tabuľky 2
Dátová bunka 1	Dátová bunka 2
Dátová bunka 3	Dátová bunka 4

Príklady značiek tabuliek HTML

Nižšie sú uvedené príklady značiek tabuliek HTML

1. Základné použitie tabuľky



HTML Table Tag Usage



názov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Uložte kód s príponou .html a otvorte ho v prehliadači. Zobrazí sa nasledujúci výstup:

2. Titulok tabuľky

Titulok tabuľky je možné určiť pomocou značky < caption > .

príklad



HTML Table Tag Usage



Toto je popis tabuľky

názov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Vyššie uvedený kód zobrazí nasledujúci výstup:

3. Rozstup buniek v tabuľke

Priestor buniek tabuľky sa dá definovať pomocou atribútu cellspacing. Atribút cellspacing určuje medzeru medzi bunkami tabuľky.

príklad



HTML Table Tag Usage



názov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Vyššie uvedený kód zobrazí nasledujúci výstup:

4. Výplň tabuľky buniek

Výplň buniek tabuľky sa dá definovať pomocou atribútu cellpadding. Atribút cellpadding Vzdialenosť medzi okrajom bunky tabuľky a údajmi.

príklad



HTML Table Tag Usage



názov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Vyššie uvedený kód zobrazí nasledujúci výstup:

5. Atribúty rozpätia stĺpcov a riadkov

Dva alebo viac riadkov tabuľky možno zlúčiť do jedného riadku pomocou atribútu rowspan a stĺpce tabuľky možno zlúčiť do jedného stĺpca pomocou atribútu colspan.

príklad



HTML Table Tag Usage



Stĺpec 1	Stĺpec dva	Stĺpec tri
Riadok jedna	Riadok dva	Riadok tri
	Riadok štyri	Riadok päť
Riadok šesť

Kód zobrazí nasledujúci výstup:

6. Pozadie tabuľky

Pozadie tabuľky je možné vytvoriť pomocou atribútu bgcolor. Ohraničenie buniek tabuľky možno určiť pomocou atribútu border-color.

príklad



HTML Table Tag Usage



názov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Spustite vyššie uvedený kód a zobrazí sa nasledujúci výstup:

7. Výška a šírka tabuľky

Výška a šírka tabuľky sa dá nastaviť pomocou atribútov šírka a výška.

príklad



HTML Table Tag Usage



názov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Vyššie uvedený kód zobrazí nasledujúci výstup:

8. Bunky stolových stolov

prí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ázov	Krajina
Dhoni	India
David Miller	južná Afrika
Joe Root	Anglicko

Spustite vyššie uvedený kód, budete mať nasledujúci výstup:

8. Vnorené tabuľky

Môžete použiť jednu tabuľku v inej tabuľke, ktorá sa nazýva vnorená tabuľka.

Uvažujme nasledujúci príklad vnorenej tabuľky:

príklad



HTML Table Tag Usage



názov Krajina Dhoni India David Miller južná Afrika Joe Root Anglicko

Vyššie uvedený kód zobrazí nasledujúci výstup:

Atribúty tabuľky

• Zarovnať: Tento atribút poskytuje zarovnanie obsahu vnútri prvku.
• bgcolor: Tento atribút určuje farbu pozadia pre tabuľku.
• border: Tento atribút určuje orámovanie pre bunky tabuľky.
• cellpadding: Tento atribút zobrazuje výplň medzi bunkami tabuľky a obsahom tabuľky.
• cellspacing: Tento atribút zobrazuje medzeru medzi bunkami tabuľky.
• frame: Určuje, ktoré časti vonkajších hraníc sú viditeľné.
• pravidlá: Toto určuje, ktoré časti vnútorných hraníc sú viditeľné.
• faul: Tento atribút informuje, že tabuľka je nefunkčná.
• Zhrnutie: Poskytuje typ obsahu tabuľky.
• width: Tento atribút hovorí o šírke tabuľky.
• height: Tento atribút určuje výšku tabuľky.

záver

Doteraz sme študovali rôzne typy značiek tabuliek v HTML. Príklady ukázali použitie štýlu tabuľky, vnorenie jednej tabuľky do druhej tabuľky, nastavenie výšky a šírky tabuľky, pridanie medzier a výplní pre bunky tabuľky, použitie farby pozadia pre tabuľku a mnoho ďalších.

Odporúčané články

Toto je sprievodca značkami tabuliek HTML. Tu diskutujeme príklady značiek tabuliek HTML so syntaxou a atribútmi tabuľky. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

1. Prvky formulára HTML
2. Vytvorte tabuľky v HTML
3. Značky obrázkov HTML
4. Čo je to HTML
5. Rámčeky HTML
6. Bloky HTML
7. Nastavte farbu pozadia v HTML s príkladom