10 HTML-Tabellen-bezogene Tags

HTML hat 10 tabellenbezogene Tags. Hier ist eine Liste mit einer kurzen Einführung, aber zuerst sollte das Dokument ordnungsgemäß in HTML 4.01/XHTML 1 oder HTML 5 definiert sein:

• <caption> definiert den Tabellentitel (4, 5)
• <col> definiert Attribute für Tabellenspalten (4, 5)
• <colgroup> definiert die Gruppierung der Tabellenspalten (4, 5)
• <table> definiert eine Tabelle (4, 5)
• <tbody> definiert den Tabellenkörper (4, 5)
• <td> definiert eine Zelle (4, 5)
• <tfoot> definiert den Fußbereich der Tabelle (4, 5)
• <th> definiert die Tabellenüberschrift (4, 5)
• <thead> definiert den Tabellenkopf (4, 5)
• <tr> definiert die Zeilen der Tabelle (4, 5)

Eine grundlegende Tabellenstruktur sieht wie folgt aus:

Es enthält einen Titel, eine Kopfzeile, einen Textkörper und eine Fußzeile. Die richtige Reihenfolge der HTML-Elemente ist:

1. <Tabelle>
2. <Beschriftung>
3. <Kopf>
4. <tfuß>
5. <tbody>

Sie können <col> und <colgroup> auch verwenden, um Tabellenspalten oder Gruppenspalten zu definieren:

1. <Tabelle>
2. <Beschriftung>
3. <Spaltengruppe>
4. <Spalte>
5. <Kopf>
6. <tfuß>
7. <tbody>

Nachfolgend sehen Sie ein Beispiel für eine korrekte Tabellenstruktur:

Einige Tipps zu Tabellen

• Gemäß der Erklärung und Verwendung von w3schools muss in einer Tabellendefinition das Element <tfoot> vor dem Element <tbody> erscheinen , damit der Browser die Tabellenfußzeile rendern kann, bevor er alle Daten empfängt. Darüber hinaus schlägt die W3C-HTML- und XHTML-Validierung fehl , wenn diese Reihenfolge nicht eingehalten wird, unabhängig davon, welche DTD Sie deklarieren.
• In HTML 4.01 wurden die Tabellenattribute „align“ und „bgcolor“ verworfen, sodass in HTML 5 keine Tabellenattribute mehr unterstützt werden (tatsächlich werden die Attribute „align“ und „bgcolor“ in der Strict DTD von XHTML 1.0 nicht mehr unterstützt).
• Alle gängigen Browser unterstützen das Tag <colgroup>, aber Firefox, Chrome und Safari unterstützen nur die Span- und Width-Attribute des Colgroup-Elements.
• empty-cells:show|hide in CSS kann festlegen, ob leere Zellen Ränder anzeigen. Beachten Sie, dass dies in der Tabelle und nicht im td/ten Element festgelegt werden muss . Dieses Problem tritt eher im IE6 auf.
• border-collapse:collapse | separate kann in CSS festlegen, ob die Ränder der Tabelle zu einem Rand zusammengeführt werden sollen;
• Die Border-Spacing-Eigenschaft in CSS entspricht der Cellspacing-Eigenschaft der Tabelle.

Um das derzeit empfohlene Entwicklungsmodell der Trennung von Präsentation und Struktur zu erreichen, empfiehlt Front-end Observation, alle präsentationsbezogenen Elemente auf der Seite über CSS zu steuern, anstatt die Präsentation der Seite über HTML-eigene Attribute zu steuern. Tabellen werden am leichtesten übersehen.

Weitere Einzelheiten zu Tabellen finden Sie im W3C-Dokument: w3 Einführung in Tabellen

Zum Schluss habe ich noch eine ganz einfache Frage: Welche CSS-Eigenschaft entspricht der Cellpadding-Eigenschaft der Tabelle?