HTML-Tutorial: 10 tischbezogene Tags für HTML

Basierend auf einigen meiner jüngsten Praktiken und nach der Kommunikation mit einigen Lesern über die Verwendung von HTML -Formularen habe ich beschlossen, diesen Artikel zu schreiben. Insgesamt bemerkte ich, dass sie aufgrund irreführender Informationen vorgefasst wurden. Tatsächlich werden viele Leute sagen, dass ich die Aussage sehe, dass ich niemals Formulare verwenden sollte, aber das ist absolut falsch! Dieser Vorschlag dient nur zur Verwendung von HTML -Tabellen, um das Layout der Webseite zu definieren. Die Tabellen eignen sich jedoch perfekt für eine bequeme Anordnung von Zeilen und Spalten mit Dateninformationen. Wenn Sie die Spaltendaten auf einer Seite auf einer Seite anzeigen müssen, müssen Sie sie verwenden! Warum nicht? In diesem Fall ignorieren einige Menschen jedoch die Existenz bestimmter HTML -Tags, die für Tabellen verwendet werden, und wissen nicht, wie sie korrekt verwendet werden sollen.

HTML verfügt über 10 tischbezogene Tags. Hier ist eine Liste mit einer Einführung, aber zuerst sollte das Dokument nachstehend im Folgenden html 4.01/xhtml 1 oder html 5 definiert sein:

• <Caption> Definieren Sie den Tabellentitel (4, 5)
• <Col> Definieren Sie Attribute für Spalten einer Tabelle (4, 5)
• <ColGroup> definiert die Gruppierung von Tabellenspalten (4, 5)
• <tabelle> Tabelle definieren (4, 5)
• <Tbody> Definieren Sie den Tischkörper (4, 5)
• <td> eine Zelle definieren (4, 5)
• <tfoot> Definieren Sie die Tabelle Hinweis (unten) (4, 5)
• <Th> Definieren Sie den Tischkopf (4, 5)
• <kopf> definiert den Tischkopf (4, 5)
• <tr> definiert die Zeilen der Tabelle (4, 5)

Eine grundlegende Tabellenstruktur ist wie folgt:

Es enthält einen Titel, Kopf, Körper und Boden. Die richtige Reihenfolge von HTML -Elementen ist:

1. <tabelle>
2. <Caption>
3. <kopf>
4. <tfoot>
5. <tbody>

Sie können auch <col> und <ColGroup> verwenden, um Spalten von Tabellen oder Gruppenspalten zu definieren:

1. <tabelle>
2. <Caption>
3. <Colgroup>
4. <col>
5. <kopf>
6. <tfoot>
7. <tbody>

Hier ist ein korrektes Beispiel für die Tabellenstruktur:

 <Table Border = 1> <Caption> Tabelle caption Hier </caption> <colGroup span = 1 style = Hintergrund: #dedede;/> < Fußzeile-> <tfoot> <tr> <td> Fuß 1 </td> <td> Fuß 2 </td> <td> Fuß 3 </td> </tfoot> <!-Table Body-> <tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> E </td> <td> f </td> </tr> </tbody> </table>

Die Ergebnisse im Browser sind in der folgenden Abbildung dargestellt:

Einige Tipps auf der Form

• Gemäß der Erklärung und Verwendung von W3Schools muss in einer Tabellendefinition das <Tfoot> -Element vor <Tbody> angezeigt werden , damit der Browser die Tabellennotizen rendern kann, bevor er alle Daten akzeptiert. Wenn es sich nicht um diese Reihenfolge handelt, wird sie nicht durch HTML4 und XHTML von W3C validiert, egal welche Art von DTD Sie deklarieren.
• In HTML 4.01 werden die Eigenschaften der Align und der BGColor der Tabelle nicht bevorzugt, sodass in HTML 5 keine Tabellenattribute gestützt werden (tatsächlich werden die Eigenschaften von Align und BGColor nicht mehr in XHTML 1.0 Strict DTD unterstützt);
• Alle Mainstream -Browser unterstützen das <ColGroup> -Tag, aber Firefox, Chrome und Safari unterstützen nur die Spann- und Breitenattribute des Colgroup -Elements.
• leere Zellen: Show | In CSS verstecken können festlegen, ob eine leere Zelle einen Rand zeigt. Beachten Sie, dass dies in der Tabelle anstelle von TD/TH eingestellt werden muss . Dieses Problem wird in IE6 eher auftreten.
• Grenzkollapse: Zusammenbruch | getrennt in cs
• Die Randabstandseigenschaft in CSS entspricht der Zellspaziereigenschaft der Tabelle.

Um das inzwischen befürwortete Entwicklungsmodell der Leistung und Strukturtrennung zu erkennen, empfiehlt Front-End-Beobachtung, dass alle mit der Präsentationsschicht auf der Seite bezogenen Dinge von CSS gesteuert werden, und verwenden nicht die von HTML bereitgestellten Attribute, um die Leistung der Seite zu steuern, und die Tabelle ist am einfachsten zu ignoriert.

Weitere Informationen zu Tabellen finden Sie in der W3C -Dokumentation: W3 Einführung in Tabellen

Schließlich werde ich Ihnen eine sehr einfache Frage hinterlassen. Welches Attribut von CSS entspricht dem Cellpadding -Attribut der Tabelle?