HTML-tabell taggar - Lär dig exemplen på HTML-tabelltaggar med syntax

• Introduktion till HTML-tabell taggar

Introduktion till HTML-tabell taggar

HTML-tabellen ger ett sätt att härleda eller definiera data som text, bilder, länkar osv i termer av rader och kolumner i celler. HTML-tabellerna kan skapas med

märka. Som standard är tabelldata vänsterjusterad. I det här ämnet kommer vi att lära oss om HTML-tabelltaggar.

Tabellen kan skapas med

taggar.

• De

taggar anger tabellraderna som används för att göra en rad.

Tabelldata kan struktureras inom

,	, och
taggar definierar en rubrik för tabellen. De	tagg specificerar tabelldatacellerna som används för att skapa kolumnen. De

innehållet i tabellen med många bordelement.

Syntax

Tabellrubrik 1	Tabellrubrik 2
Datacell 1	Datacell 2
Datacell 3	Datacell 4

Exempel på HTML-tabelltaggar

Här är exemplen på HTML-tabelltaggar som ges nedan

1. Grundläggande tabellanvändning



HTML Table Tag Usage



namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Spara koden med tillägget .html och öppna den i webbläsaren. Följande utgång visas:

2. Tabelltexter

Bildtexten för tabellen kan anges genom att använda taggen < caption > .

Exempel



HTML Table Tag Usage



Detta är tabelltexter

namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovanstående kod visar utmatningen nedan:

3. Tabellcellavstånd

Tabellcellens utrymme kan definieras med hjälp av attributet cellavstånd. Cellavstånd-attributet anger utrymmet mellan tabellceller.

Exempel



HTML Table Tag Usage



namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovanstående kod visar följande utgång:

4. Polstring av tabellceller

Polstring av tabellcellerna kan definieras genom att använda cellpaddingattributet. Cellpadding-attributet avståndet mellan tabellcellgränsen och data.

Exempel



HTML Table Tag Usage



namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovanstående kod visar utmatningen nedan:

5. Attribut för kolumn och radspänn

De två eller flera tabellrader kan slås samman till en enda rad med att använda radspanattribut och tabellkolumner kan slås samman till en enda kolumn med hjälp av ett kolspanattribut.

Exempel



HTML Table Tag Usage



Kolumn en	Kolumn två	Kolumn tre
Rad en	Rad två	Rad tre
	Rad fyra	Rad fem
Rad sex

Koden visar följande utgång:

6. Bakgrund för tabell

Tabellens bakgrund kan skapas med attributet bgcolor. Tabellcellgränsen kan specificeras med hjälp av attributet kantfärg.

Exempel



HTML Table Tag Usage



namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Kör ovanstående kod så visas nedanstående utgång:

7. Tabellens höjd och bredd

Bordets höjd och bredd kan ställas in med bredd- och höjdattribut.

Exempel



HTML Table Tag Usage



namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Ovanstående kod visar följande utgång:

8. Styling av tabellceller

Exempel



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



namn	Land
Dhoni	Indien
David Miller	Sydafrika
Joe Root	England

Kör ovanstående kod, du kommer att ha följande utgång:

8. Kapslade tabeller

Du kan använda en tabell i en annan tabell kallas ett kapselt bord.

Låt oss överväga exemplet nedan för den kapslade tabellen:

Exempel



HTML Table Tag Usage



namn Land Dhoni Indien David Miller Sydafrika Joe Root England

Ovanstående kod visar följande utgång:

Attribut för tabellen

• justera: Detta attribut ger anpassning av innehåll i ett element.
• bgcolor: Detta attribut anger bakgrundsfärgen för tabellen.
• border: Detta attribut anger gränsen för tabellcellerna.
• cellpadding: Detta attribut visar utfyllningen mellan tabellceller och tabellinnehåll.
• cellavstånd: Detta attribut visar utrymmet mellan tabellceller.
• ram: Den anger vilka delar av yttergränserna som är synliga.
• regler: Här anges vilka delar av de inre gränserna som är synliga.
• sorterbar: Detta attribut informerar om att tabellen är sorterbar.
• sammanfattning: Den ger vilken typ av tabellinnehåll som finns.
• bredd: Detta attribut berättar tabellens bredd.
• höjd: Detta attribut anger tabellens höjd.

Slutsats

Hittills har vi studerat de olika typerna av tabelltaggar i HTML. Exemplen har visat användning av styling av bordet, häckning av ett bord i en annan tabell, inställning av bordets höjd och bredd, lägg till avstånd och stoppning för tabellcellerna, applicering av bakgrundsfärg för bordet och många fler.

Rekommenderade artiklar

Detta är en guide till HTML-tabelltaggar. Här diskuterar vi exempel på HTML-tabell taggar med syntax och tabeller attribut. Du kan också titta på följande artiklar för att lära dig mer -

1. HTML-formelement
2. Skapa tabeller i HTML
3. HTML-bildtaggar
4. Vad är HTML
5. HTML-ramar
6. HTML-block
7. Ställ in en bakgrundsfärg i HTML med exempel