HTML-tabeli sildid - Lugege HTML-i tabeli siltide näiteid süntaksi abil

• Sissejuhatus HTML-i tabelisiltidesse

Sissejuhatus HTML-i tabelisiltidesse

HTML-tabel pakub viisi andmete, näiteks teksti, piltide, linkide jms tuletamiseks või määratlemiseks lahtrite ridade ja veergudena. HTML-tabeleid saab luua kasutades

silt. Vaikimisi jäetakse tabeli andmed joondatuks. Selles teemas õpime tundma HTML-tabeli silte.

Tabeli saab luua kasutades

sildid.

tag määrab tabeli read, mida kasutatakse rea tegemiseks.

Tabeli andmeid saab struktureerida

,	ja
tag määratleb tabeli pealkirja.	tag määrab tabeli andmelahtrid, mida kasutatakse veeru valmistamiseks.

tabeli sisu arvukate tabelielementidega.

Süntaks

Tabeli pealkiri 1	Tabeli pealkiri 2
1. andme lahter	Andme lahter 2
Andme lahter 3	Andme lahter 4

HTML-tabeli siltide näited

Siin on allpool toodud HTML-tabelite siltide näited

1. Tabeli põhikasutus



HTML Table Tag Usage



Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Salvestage kood laiendiga .html ja avage see brauseris. See kuvab järgmise väljundi:

2. Tabeli pealdis

Tabeli pealdist saab täpsustada sildi < caption > abil .

Näide



HTML Table Tag Usage



See on tabeli pealdis

Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Ülaltoodud kood kuvab allpool toodud väljundi:

3. Tabeli lahtrite vahe

Tabeli lahtrite ruumi saab määrata atribuudi cellpacing abil. Atribuut cellpacing täpsustab tabeli lahtrite vahelise ruumi.

Näide



HTML Table Tag Usage



Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Ülaltoodud kood kuvab järgmise väljundi:

4. Lauaelementide polster

Tabeli lahtrite polsterduse saab määratleda lahtri padding abil. Lahtri lisamise atribuut vahemaa tabeli lahtri piiri ja andmete vahel.

Näide



HTML Table Tag Usage



Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Ülaltoodud kood kuvab allpool toodud väljundi:

5. Veeru ja rea ​​pikkuse atribuudid

Kahte või enamat tabelirida saab liita üheks reaks atribuudi ridavahe abil ja tabeli veerud saab ühendada atribuudi colspan abil üheks veeruks.

Näide



HTML Table Tag Usage



Esimene veerg	Teine veerg	Kolmas veerg
Esimene rida	Teine rida	Kolmas rida
	Neljas rida	Viies rida
Kuues rida

Kood kuvab järgmise väljundi:

6. Tabeli taust

Tabeli tausta saab luua atribuudi bgcolor abil. Tabeli lahtri piiri saab määrata atribuudi border-color abil.

Näide



HTML Table Tag Usage



Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Täitke ülaltoodud kood ja see kuvab allpool toodud väljundi:

7. Laua kõrgus ja laius

Tabeli kõrguse ja laiuse saab määrata laiuse ja kõrguse atribuutide abil.

Näide



HTML Table Tag Usage



Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Ülaltoodud kood kuvab järgmise väljundi:

8. Lauaelementide kujundamine

Näide



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



Nimi	Riik
Dhoni	India
David Miller	Lõuna-Aafrika
Joe Root	Inglismaa

Täitke ülaltoodud kood, teil on allpool toodud väljund:

8. Pesastatud lauad

Võite kasutada ühte tabelit teise tabeli sees, mida nimetatakse pesastatud tabeliks.

Vaatleme järgmist pesastatud tabeli näidet:

Näide



HTML Table Tag Usage



Nimi Riik Dhoni India David Miller Lõuna-Aafrika Joe Root Inglismaa

Ülaltoodud kood kuvab järgmise väljundi:

Tabeli atribuudid

• joonda: see atribuut pakub elemendi sisu joondamist.
• bgcolor: See atribuut täpsustab tabeli taustavärvi.
• ääris: see atribuut täpsustab tabeli lahtrite piiri.
• cellpadding: see atribuut kuvab tabeli lahtrite ja tabeli sisu vahelise polsterduse.
• cellpacing: see atribuut kuvab tabeli lahtrite vahelise ruumi.
• raam: see täpsustab, millised välispiiride osad on nähtavad.
• reeglid: see täpsustab, millised sisepiiride osad on nähtavad.
• sorteeritav: see atribuut annab teada, et tabel on sorteeritav.
• kokkuvõte: see näitab, millist tüüpi tabeli sisu on olemas.
• laius: see atribuut näitab tabeli laiust.
• kõrgus: see atribuut täpsustab tabeli kõrgust.

Järeldus

Siiani oleme HTML-is uurinud erinevat tüüpi tabelisilte. Näited on näidanud tabeli kujundamist, ühe laua pesemist teise laua sisse, laua kõrguse ja laiuse seadmist, tabeli lahtrite jaoks vahed ja polsterdust, tabeli taustavärvi rakendamist ja palju muud.

Soovitatavad artiklid

See on HTML-i tabeli siltide juhend. Siin käsitleme HTML-tabeli siltide näiteid koos süntaksi ja tabeli atribuutidega. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -

1. HTML-vorminguelemendid
2. Looge HTML-is tabeleid
3. HTML-pildi sildid
4. Mis on HTML
5. HTML-raamid
6. HTML-plokid
7. Seadistage HTML-is taustavärv näitega