Oznake HTML tabele - Naučite se primerov oznak tabel HTML s sintakso

• Uvod v oznake Html tabele

Uvod v oznake Html tabele

Tabela HTML ponuja način pridobivanja ali definiranja podatkov, kot so besedilo, slike, povezave itd v smislu vrstic in stolpcev celic. Tabele HTML je mogoče ustvariti z uporabo

oznaka. Podatki tabele so privzeto poravnani. V tej temi bomo spoznali oznake tabel HTML.

Tabelo je mogoče ustvariti z uporabo

oznake.

• The

tag določa vrstice tabele, ki se uporabljajo za oblikovanje vrstice.

Podatki tabele se lahko strukturirajo znotraj

,	, in
označi naslov za tabelo. The	označi podatkovne celice tabele, ki se uporabljajo za izdelavo stolpca. The

vsebino tabele s številnimi elementi mize.

Sintaksa

Razpredelnica tabele 1	Razpredelnica tabele 2
Podatkovna celica 1	Podatkovna celica 2
Podatkovna celica 3	Podatkovna celica 4

Primeri oznak tabel HTML

Tu so primeri spodnjih oznak HTML tabel

1. Osnovna uporaba tabele



HTML Table Tag Usage



Ime	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Kodo shranite s pripono .html in jo odprite v brskalniku. Prikaže se naslednji izhod:

2. Tabela napis

Napis za tabelo lahko določite z oznako < caption > .

Primer



HTML Table Tag Usage



To je napis v tabeli

Ime	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Zgornja koda bo prikazala spodnji izhod:

3. Razmik med celicami v tabeli

Prostor celic tabele je mogoče določiti z atributom celičnega presledka. Atribut Cellpacing določa prostor med celicami tabele.

Primer



HTML Table Tag Usage



Ime	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Zgornja koda bo prikazala naslednji izhod:

4. Tabela s celicami

Obloge celic tabele lahko določimo s pomočjo atributa cellpadding. Atribut atributa celpadding razdalje med mejo celice tabele in podatki.

Primer



HTML Table Tag Usage



Ime	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Zgornja koda bo prikazala spodnji izhod:

5. Atributi razporeda stolpca in vrstice

Dve ali več vrstic tabele je mogoče z uporabo atributa rowspan združiti v eno vrstico, stolpce tabel pa lahko združiti v en stolpec z atributom colspan.

Primer



HTML Table Tag Usage



Stolpec prvi	Drugi stolpec	Tretji stolpec
Prva vrstica	2. vrstica	3. vrstica
	4. vrstica	5. vrstica
Vrstica šesta

Koda bo prikazala naslednji izhod:

6. Ozadje preglednice

Ozadje tabele lahko ustvarite s pomočjo atributa bgcolor. Mejo celice tabele lahko določite s pomočjo atributa barve obroba.

Primer



HTML Table Tag Usage



Ime	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Izvedite zgornjo kodo in prikaže spodnji izhod:

7. Višina in širina mize

Višino in širino tabele lahko nastavite z atributi širine in višine.

Primer



HTML Table Tag Usage



Ime	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Zgornja koda bo prikazala naslednji izhod:

8. Styling namiznih celic

Primer



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	Država
Dhoni	Indija
David Miller	Južna Afrika
Joe Root	Anglija

Izvedite zgornjo kodo, imeli boste spodnji izhod:

8. ugnezdene tabele

Lahko uporabite eno tabelo znotraj druge tabele, se imenuje ugnezdena tabela.

Razmislimo o spodnjem primeru za ugnezdeno tabelo:

Primer



HTML Table Tag Usage



Ime Država Dhoni Indija David Miller Južna Afrika Joe Root Anglija

Zgornja koda bo prikazala naslednji izhod:

Atributi Tabele

• poravnati: Ta atribut zagotavlja poravnavo vsebine znotraj elementa.
• bgcolor: Ta atribut določa barvo ozadja tabele.
• border: Ta atribut določa mejo celic tabele.
• celpadding: Ta atribut prikazuje oblazinjenje med celicami tabele in vsebino tabele.
• presledki celic : Ta atribut prikazuje prostor med celicami tabele.
• okvir: Določi, kateri deli zunanjih meja so vidni.
• pravila: Ta določa, kateri deli notranjih meja so vidni.
• sortable: Ta atribut sporoča, da je tabela razvrstljiva.
• povzetek: Vsebuje vrsto vsebine tabel.
• širina: Ta atribut pove širino tabele.
• višina: Ta atribut določa višino tabele.

Zaključek

Do sedaj smo preučevali različne vrste tabel v HTML. Primeri so pokazali uporabo stila tabele, gnezdenje ene tabele v drugi tabeli, nastavitev višine in širine mize, dodajanje razmikov in oblazinjenja za celice tabele, uporabo barve ozadja za mizo in še veliko več.

Priporočeni članki

To je vodnik za oznake tabel HTML. Tukaj razpravljamo o primerih oznak tabel HTML s skladnjo in atributi tabele. Za več informacij si lahko ogledate tudi naslednje članke -

1. Elementi obrazca HTML
2. Ustvari tabele v HTML
3. Oznake HTML HTML
4. Kaj je HTML
5. Okvirji HTML
6. Bloki HTML
7. Nastavite barvo ozadja v HTML s Primerom