Uvod u oznake tablice Html

HTML tablica pruža način za dobivanje ili definiranje podataka kao što su tekst, slike, veze itd. U smislu redaka i stupaca stanica. HTML tablice mogu se kreirati korištenjem

označiti. Podaci tablice prema zadanim postavkama su poravnati. U ovoj ćemo temi saznati više o oznakama HTML tablice.

Tablica se može stvoriti pomoću

oznake.

tag određuje retke tablice koji se koriste za pravljenje reda.

Podaci tablice mogu se strukturirati unutar

, , i
tag definira naslov tablice.
  		• tag određuje ćelije podataka tablice koja se koristi za izradu stupca.
    • sadržaj tablice
    s brojnim elementima stola.

    Sintaksa














    Naslov tablice 1Naslov tablice 2
    Podatkovna ćelija 1Podatkovna ćelija 2
    Podatkovna ćelija 3Podatkovna ćelija 4

    Primjeri HTML oznaka tablice

    Evo primjera oznaka HTML tablice danih u nastavku

    1. Osnovna upotreba tablice



    HTML Table Tag Usage


















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Spremite kôd s .html nastavkom i otvorite ga u pregledniku. Prikazat će se sljedeći izlaz:

    2. Natpis tablice

    Opis za tablicu može se odrediti upotrebom oznake < caption > .

    Primjer



    HTML Table Tag Usage


    Ovo je naslov tablice
















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Gornji kod prikazat će donji izlaz:

    3. Stolni razmak tablice

    Prostor ćelija tablice može se definirati pomoću atributa cellpacing. Atribut ćelijskog presjeka određuje razmak između ćelija tablice.

    Primjer



    HTML Table Tag Usage


















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Gornji kôd prikazat će sljedeći izlaz:

    4. Tablica sa stanicama za stol

    Obloga stanica tablice može se definirati pomoću atributa cellpadding. Atribut Cellpadding udaljenost između granice ćelije tablice i podataka.

    Primjer



    HTML Table Tag Usage


















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Gornji kod prikazat će donji izlaz:

    5. Atributi raspona stupaca i redaka

    Dva ili više redaka tablice mogu se spojiti u jedan red pomoću atributa rowspan, a stupci tablice mogu se spojiti u jedan stupac korištenjem atributa colspan.

    Primjer



    HTML Table Tag Usage



















    Stupac prviStupac drugiTreća kolona
    Redak jedanDrugi redakRedak tri
    Redak četvrtiRedak pet
    Redni šesti

    Kôd će prikazati sljedeći izlaz:

    6. Pozadina tablice

    Pozadina tablice može se stvoriti pomoću atributa bgcolor. Granica ćelije tablice može se odrediti korištenjem atributa boje obruba.

    Primjer



    HTML Table Tag Usage


















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Izvršite gornji kôd i on će prikazati donji izlaz:

    7. Visina i širina stola

    Visina i širina tablice mogu se postaviti pomoću atributa širine i visine.

    Primjer



    HTML Table Tag Usage


















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Gornji kôd prikazat će sljedeći izlaz:

    8. Stajling ćelijskih stanica

    Primjer



    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;
    )


















    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Izvršite gornji kod, imat ćete sljedeći izlaz:

    8. Gnijezdane tablice

    Možete koristiti jednu tablicu unutar druge tablice koja se naziva ugniježđena tablica.

    Razmotrimo donji primjer za ugniježđene tablice:

    Primjer



    HTML Table Tag Usage























    ImeZemlja
    DhoniIndija
    David MillerJužna Afrika
    Joe RootEngleska

    Gornji kôd prikazat će sljedeći izlaz:

    Atributi tablice

    • poravnanje: Ovaj atribut osigurava poravnanje sadržaja unutar elementa.
    • bgcolor: Ovaj atribut određuje boju pozadine za tablicu.
    • granica: Ovaj atribut određuje granicu za ćelije tablice.
    • cellpadding: Ovaj atribut prikazuje presvlake između stanica tablice i sadržaja tablice.
    • razmak ćelija: ovaj atribut prikazuje razmak između ćelija tablice.
    • okvir: Određuje koji su dijelovi vanjskih granica vidljivi.
    • pravila: ovo određuje koji su dijelovi unutarnjih granica vidljivi.
    • sortirano: Ovaj atribut obavještava da je tablica sortirana.
    • sažetak: Pruža vrstu sadržaja tablice.
    • width: Ovaj atribut označava širinu tablice.
    • visina: Ovaj atribut određuje visinu tablice.

    Zaključak

    Do sada smo proučavali različite vrste oznaka tablica u HTML-u. Primjeri su pokazali uporabu stiliziranja tablice, gniježđenje jednog stola unutar druge tablice, postavljanje visine i širine stola, dodavanje razmaka i obloga za ćelije stola, primjena boje pozadine za stol i još mnogo toga.

    Preporučeni članci

    Ovo je vodič za HTML oznake tablice. Ovdje smo raspravljali o primjerima oznaka HTML tablice sa sintaksom i atributima tablice. Možete također pogledati sljedeće članke da biste saznali više -

    1. Elementi HTML obrasca
    2. Napravite tablice u HTML-u
    3. Oznake HTML slike
    4. Što je HTML
    5. HTML okviri
    6. HTML Blokovi
    7. Postavite boju pozadine u HTML-u s primjerom

    Kategorija:

    Alati za web razvoj