HTML-tabellabels - Leer de voorbeelden van HTML-tabellabels met syntaxis

• Inleiding op HTML-tabellabels

Inleiding op HTML-tabellabels

De HTML-tabel biedt een manier om gegevens zoals tekst, afbeeldingen, koppelingen enz. Af te leiden of te definiëren in termen van rijen en kolommen met cellen. De HTML-tabellen kunnen worden gemaakt met behulp van

label. Standaard worden de tabelgegevens links uitgelijnd. In dit onderwerp gaan we meer te weten over HTML-tabeltags.

De tabel kan worden gemaakt met behulp van

-tags.

• De

tag geeft de tabelrijen aan die worden gebruikt om een ​​rij te maken.

De tabelgegevens kunnen binnen worden gestructureerd

,	en
tag definieert een kop voor de tabel. De	tag geeft de tabelgegevenscellen aan die worden gebruikt om de kolom te maken. De

inhoud van de tabel met talloze tafelelementen.

Syntaxis

Tabelrubriek 1	Tabel Kop 2
Gegevenscel 1	Gegevenscel 2
Gegevenscel 3	Gegevenscel 4

Voorbeelden van HTML-tabeltags

Hier zijn de voorbeelden van HTML-tabeltags die hieronder worden gegeven

1. Gebruik van de basistabel



HTML Table Tag Usage



Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

Sla de code op met de extensie .html en open deze in de browser. Het zal de volgende uitvoer weergeven:

2. Tabelbijschrift

Het bijschrift voor de tabel kan worden opgegeven met behulp van de tag < caption > .

Voorbeeld



HTML Table Tag Usage



Dit is Table Caption

Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

De bovenstaande code geeft de onderstaande uitvoer weer:

3. Tabelcelafstand

De ruimte van de tabelcellen kan worden gedefinieerd met behulp van het kenmerk cellspacing. Het kenmerk cellspacing geeft de ruimte tussen tabelcellen aan.

Voorbeeld



HTML Table Tag Usage



Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

De bovenstaande code geeft de volgende uitvoer weer:

4. Opvulling van tabelcellen

De opvulling van de tabelcellen kan worden gedefinieerd met behulp van het kenmerk cellpadding. De eigenschap celpadding tussen tabelcelrand en gegevens.

Voorbeeld



HTML Table Tag Usage



Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

De bovenstaande code geeft de onderstaande uitvoer weer:

5. Kolom- en rijbereikattributen

De twee of meer tabelrijen kunnen worden samengevoegd tot een enkele rij met behulp van het rowspan-kenmerk en tabelkolommen kunnen worden samengevoegd tot een enkele kolom met behulp van een colspan-kenmerk.

Voorbeeld



HTML Table Tag Usage



Kolom één	Kolom twee	Kolom drie
Rij één	Rij twee	Rij drie
	Rij vier	Rij vijf
Rij zes

De code geeft de volgende uitvoer weer:

6. Achtergrond voor tabel

De achtergrond van de tabel kan worden gemaakt met behulp van het kenmerk bgcolor. De rand van de tabelcel kan worden opgegeven met behulp van het kenmerk border-colour.

Voorbeeld



HTML Table Tag Usage



Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

Voer de bovenstaande code uit en deze geeft de onderstaande uitvoer weer:

7. Hoogte en breedte van de tafel

De hoogte en breedte van de tabel kunnen worden ingesteld met behulp van breedte- en hoogtekenmerken.

Voorbeeld



HTML Table Tag Usage



Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

De bovenstaande code geeft de volgende uitvoer weer:

8. Stylingtabelcellen

Voorbeeld



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



Naam	land
Dhoni	Indië
David Miller	Zuid-Afrika
Joe Root	Engeland

Voer de bovenstaande code uit, u krijgt de onderstaande uitvoer:

8. Geneste tabellen

U kunt de ene tabel gebruiken in een andere tabel die een geneste tabel wordt genoemd.

Laten we het onderstaande voorbeeld voor de geneste tabel bekijken:

Voorbeeld



HTML Table Tag Usage



Naam land Dhoni Indië David Miller Zuid-Afrika Joe Root Engeland

De bovenstaande code geeft de volgende uitvoer weer:

Attributen van de tabel

• align: dit kenmerk zorgt voor de uitlijning van inhoud binnen een element.
• bgcolor: dit kenmerk geeft de achtergrondkleur voor de tabel aan.
• border: dit kenmerk geeft de rand voor de tabelcellen aan.
• cellpadding: dit kenmerk geeft de opvulling tussen tabelcellen en tabelinhoud weer.
• cellspacing: dit kenmerk geeft de ruimte tussen tabelcellen weer.
• frame: het geeft aan welke delen van de buitenranden zichtbaar zijn.
• regels: dit geeft aan welke delen van de binnenranden zichtbaar zijn.
• sorteerbaar: dit kenmerk geeft aan dat de tabel kan worden gesorteerd.
• samenvatting: het geeft aan welk type tabelinhoud aanwezig is.
• width: dit kenmerk geeft de breedte van de tabel aan.
• hoogte: dit kenmerk geeft de hoogte van de tabel aan.

Conclusie

Tot nu toe hebben we de verschillende soorten tabel-tags in HTML bestudeerd. De voorbeelden hebben het gebruik laten zien van het stileren van de tafel, het nestelen van een tafel in een andere tafel, het instellen van hoogte en breedte van de tafel, het toevoegen van afstand en opvulling voor de cellen van de tafel, het toepassen van achtergrondkleur voor de tafel en nog veel meer.

Aanbevolen artikelen

Dit is een gids voor HTML-tabeltags. Hier bespreken we de voorbeelden van HTML-tabeltags met syntaxis en attributen van de tabel. U kunt ook de volgende artikelen bekijken voor meer informatie -

1. HTML-formulierelementen
2. Maak tabellen in HTML
3. HTML-afbeeldingstags
4. Wat is HTML
5. HTML-frames
6. HTML-blokken
7. Stel een achtergrondkleur in HTML in met Voorbeeld