Ú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 1Nadpis tabuľky 2
    Dátová bunka 1Dátová bunka 2
    Dátová bunka 3Dá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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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 1Stĺpec dvaStĺpec tri
    Riadok jednaRiadok dvaRiadok tri
    Riadok štyriRiadok 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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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ázovKrajina
    DhoniIndia
    David Millerjužná Afrika
    Joe RootAnglicko

    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

    Kategórie:

    Nástroje na vývoj webových aplikácií