HTML-Tabellen-Tags - Lernen Sie die Beispiele für HTML-Tabellentags mit Syntax kennen

• Einführung in HTML-Tabellen-Tags

Einführung in HTML-Tabellen-Tags

Die HTML-Tabelle bietet eine Möglichkeit, Daten wie Text, Bilder, Links usw. in Form von Zeilen und Spalten von Zellen abzuleiten oder zu definieren. Die HTML-Tabellen können mit erstellt werden

Etikett. Standardmäßig sind die Tabellendaten linksbündig. In diesem Thema lernen wir HTML-Tabellentags kennen.

Die Tabelle kann mit erstellt werden

Stichworte.

• Das

tag gibt die Tabellenzeilen an, mit denen eine Zeile erstellt wird.

Die Tabellendaten können innerhalb von strukturiert werden

,	, und
tag definiert eine Überschrift für die Tabelle. Das	tag gibt die Tabellendatenzellen an, mit denen die Spalte erstellt wird. Das

Inhalt der Tabelle mit zahlreichen tischelementen.

Syntax

Tabellenüberschrift 1	Tabellenüberschrift 2
Datenzelle 1	Datenzelle 2
Datenzelle 3	Datenzelle 4

Beispiele für HTML-Tabellen-Tags

Nachfolgend finden Sie Beispiele für HTML-Tabellen-Tags

1. Grundlegende Verwendung von Tabellen



HTML Table Tag Usage



Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Speichern Sie den Code mit der Erweiterung .html und öffnen Sie ihn im Browser. Es wird die folgende Ausgabe angezeigt:

2. Tabellenüberschrift

Die Beschriftung für die Tabelle kann mithilfe des Tags < caption > angegeben werden.

Beispiel



HTML Table Tag Usage



Dies ist die Tabellenüberschrift

Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Der obige Code zeigt die folgende Ausgabe an:

3. Tabellenabstand

Der Bereich der Tabellenzellen kann mit dem Attribut cellspacing definiert werden. Das Attribut cellspacing gibt den Abstand zwischen Tabellenzellen an.

Beispiel



HTML Table Tag Usage



Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Der obige Code zeigt die folgende Ausgabe an:

4. Auffüllen der Tabellenzellen

Die Auffüllung der Tabellenzellen kann mithilfe des Attributs cellpadding definiert werden. Der Abstand der Zellauffüllungsattribute zwischen Tabellenzellenrand und Daten.

Beispiel



HTML Table Tag Usage



Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Der obige Code zeigt die folgende Ausgabe an:

5. Spalten- und Zeilenbereichsattribute

Die zwei oder mehr Tabellenzeilen können mithilfe des Attributs rowspan zu einer einzelnen Zeile zusammengeführt werden, und Tabellenspalten können mithilfe eines Attributs colspan zu einer einzelnen Spalte zusammengeführt werden.

Beispiel



HTML Table Tag Usage



Spalte eins	Spalte zwei	Spalte drei
Zeile eins	Reihe zwei	Reihe drei
	Reihe vier	Reihe fünf
Reihe Sechs

Der Code zeigt die folgende Ausgabe an:

6. Hintergrund für Tabelle

Der Hintergrund der Tabelle kann mit dem Attribut bgcolor erstellt werden. Der Tabellenzellenrand kann mithilfe des border-color-Attributs angegeben werden.

Beispiel



HTML Table Tag Usage



Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Führen Sie den obigen Code aus und es wird die folgende Ausgabe angezeigt:

7. Höhe und Breite der Tabelle

Die Höhe und Breite der Tabelle können mithilfe der Attribute width und height festgelegt werden.

Beispiel



HTML Table Tag Usage



Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Der obige Code zeigt die folgende Ausgabe an:

8. Styling von Tischzellen

Beispiel



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



Name	Land
Dhoni	Indien
David Miller	Südafrika
Joe Root	England

Führen Sie den obigen Code aus. Sie erhalten die folgende Ausgabe:

8. Verschachtelte Tabellen

Sie können eine Tabelle in einer anderen Tabelle verwenden, die als verschachtelte Tabelle bezeichnet wird.

Betrachten wir das folgende Beispiel für die verschachtelte Tabelle:

Beispiel



HTML Table Tag Usage



Name Land Dhoni Indien David Miller Südafrika Joe Root England

Der obige Code zeigt die folgende Ausgabe an:

Attribute der Tabelle

• align: Dieses Attribut ermöglicht die Ausrichtung von Inhalten innerhalb eines Elements.
• bgcolor: Dieses Attribut gibt die Hintergrundfarbe für die Tabelle an.
• border: Dieses Attribut gibt den Rahmen für die Tabellenzellen an.
• Zellauffüllung: Dieses Attribut zeigt die Auffüllung zwischen Tabellenzellen und Tabelleninhalt an.
• Zellenabstand: Dieses Attribut zeigt den Abstand zwischen Tabellenzellen an.
• frame: Gibt an, welche Teile der Außenränder sichtbar sind.
• rules: Hiermit wird festgelegt, welche Teile der Innenränder sichtbar sind.
• sortierbar: Dieses Attribut gibt an, dass die Tabelle sortierbar ist.
• Zusammenfassung: Gibt an, welche Art von Tabelleninhalt vorhanden ist.
• width: Dieses Attribut gibt die Breite der Tabelle an.
• height: Dieses Attribut gibt die Höhe der Tabelle an.

Fazit

Bisher haben wir die verschiedenen Arten von Tabellen-Tags in HTML untersucht. Die Beispiele haben gezeigt, wie man die Tabelle formatiert, eine Tabelle in eine andere verschachtelt, Höhe und Breite der Tabelle einstellt, Abstände und Abstände für die Tabellenzellen hinzufügt, Hintergrundfarben für die Tabelle anwendet und vieles mehr.

Empfohlene Artikel

Dies ist eine Anleitung zu HTML-Tabellen-Tags. Hier diskutieren wir die Beispiele für HTML-Tabellentags mit Syntax und Attributen der Tabelle. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

1. HTML-Formularelemente
2. Erstellen Sie Tabellen in HTML
3. HTML-Bild-Tags
4. Was ist HTML?
5. HTML-Frames
6. HTML-Blöcke
7. Stellen Sie eine Hintergrundfarbe in HTML mit Beispiel ein