HTML tabel tags - Lær eksemplerne på HTML-tabel tags med syntaks

• Introduktion til HTML-tabel tags

Introduktion til HTML-tabel tags

HTML-tabellen giver en måde at udlede eller definere data såsom tekst, billeder, links osv. Med hensyn til rækker og kolonner med celler. HTML-tabellerne kan oprettes ved hjælp af

tag. Tabeldataene er som standard venstrejusteret. I dette emne skal vi lære om HTML-tabel tags.

Tabellen kan oprettes ved hjælp af

tags.

• Det

tag specificerer tabellækkene, der bruges til at fremstille en række.

Tabeldataene kan struktureres inden for

,	, og
tag definerer en overskrift til tabellen. Det	tag specificerer tabeldatacellerne, der bruges til at oprette kolonnen. Det

indholdet af tabellen med talrige tabelelementer.

Syntaks

Tabeloverskrift 1	Tabeloverskrift 2
Datacelle 1	Datacelle 2
Datacelle 3	Datacelle 4

Eksempler på HTML-tabel tags

Her er eksemplerne på HTML-tabel tags angivet nedenfor

1. Grundlæggende tabelanvendelse



HTML Table Tag Usage



Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Gem koden med filtypenavnet .html, og åbn den i browseren. Det viser følgende output:

2. Billedtekst

Billedtekst til tabellen kan specificeres ved hjælp af taget < caption > .

Eksempel



HTML Table Tag Usage



Dette er billedtekst

Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovenstående kode viser nedenstående output:

3. Tabelcelleafstand

Pladsen til tabelcellerne kan defineres ved hjælp af attributten celleafstand. Celleafstandsattributten specificerer mellemrummet mellem tabelceller.

Eksempel



HTML Table Tag Usage



Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovenstående kode viser følgende output:

4. Polstring af tabelceller

Polstring af tabelceller kan defineres ved hjælp af attributten cellepolstring. Cellpadding-attributten afstand mellem tabelcellekant og data.

Eksempel



HTML Table Tag Usage



Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovenstående kode viser nedenstående output:

5. Attributter for kolonne og rækkevidde

De to eller flere tabelrækker kan flettes til en enkelt række ved hjælp af rækkeviddeattribut, og tabelkolonner kan flettes til en enkelt kolonne ved hjælp af en colspanattribut.

Eksempel



HTML Table Tag Usage



Kolonne Et	Kolonne to	Kolonne tre
Række et	Række to	Række tre
	Række fire	Række fem
Række seks

Koden viser følgende output:

6. Baggrund for tabel

Tabelens baggrund kan oprettes ved hjælp af attributten bgcolor. Bordcellekanten kan specificeres ved hjælp af attributten kantfarve.

Eksempel



HTML Table Tag Usage



Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Udfør ovenstående kode, og den viser nedenstående output:

7. Højde og bredde på bordet

Bordets højde og bredde kan indstilles ved hjælp af bredde- og højdeegenskaber.

Eksempel



HTML Table Tag Usage



Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovenstående kode viser følgende output:

8. Styling af bordceller

Eksempel



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



Navn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Udfør ovenstående kode, og du får nedenstående output:

8. Indlejrede tabeller

Du kan bruge en tabel inde i en anden tabel kaldes en indlejret tabel.

Lad os overveje nedenstående eksempel til den indlejrede tabel:

Eksempel



HTML Table Tag Usage



Navn Land Dhoni Indien David Miller Sydafrika Joe Root England

Ovenstående kode viser følgende output:

Attributter i tabellen

• align: Denne attribut giver indretningen af ​​indhold i et element.
• bgcolor: Denne attribut specificerer baggrundsfarven for tabellen.
• border: Denne attribut specificerer grænsen for tabelcellerne.
• cellepladning: Denne attribut viser polstring mellem tabelceller og tabelindhold.
• celleafstand: Denne attribut viser afstanden mellem tabelceller.
• ramme: Den specificerer, hvilke dele af de ydre grænser er synlige.
• regler: Dette specificerer, hvilke dele af de indvendige grænser er synlige.
• sorterbar: Denne attribut informerer om, at tabellen er sorterbar.
• resumé: Den indeholder, hvilken type tabelindhold der er til stede.
• bredde: Denne attribut fortæller bordets bredde.
• højde: Denne attribut specificerer bordets højde.

Konklusion

Indtil videre har vi undersøgt de forskellige typer tabel tags i HTML. Eksemplerne har vist brugen af ​​at style bordet, indlejre en tabel i en anden tabel, indstille bordets højde og bredde, tilføje afstand og polstring til bordcellerne, anvende baggrundsfarve på bordet og mange flere.

Anbefalede artikler

Dette er en guide til HTML-tabel tags. Her diskuterer vi eksemplerne på HTML-tabel tags med syntaks og attributter for tabellen. Du kan også se på de følgende artikler for at lære mere -

1. HTML-formelementer
2. Opret tabeller i HTML
3. HTML-billedmærker
4. Hvad er HTML
5. HTML-rammer
6. HTML-blokke
7. Indstil en baggrundsfarve i HTML med eksempel