Oznake HTML tablice - Naučite primjere oznaka HTML tablice sa sintaksom

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 1	Naslov tablice 2
Podatkovna ćelija 1	Podatkovna ćelija 2
Podatkovna ćelija 3	Podatkovna ćelija 4

Primjeri HTML oznaka tablice

Evo primjera oznaka HTML tablice danih u nastavku

1. Osnovna upotreba tablice



HTML Table Tag Usage



Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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

Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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



Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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



Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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 prvi	Stupac drugi	Treća kolona
Redak jedan	Drugi redak	Redak tri
	Redak četvrti	Redak 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



Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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



Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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



Ime	Zemlja
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Engleska

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



Ime Zemlja Dhoni Indija David Miller Južna Afrika Joe Root Engleska

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