Eine kurze Erläuterung der HTML-Tabellen-Tags

Besprechen Sie hauptsächlich seine Struktur und einige wichtige Eigenschaften. Ich werde es auf eine langsam verbesserte Weise einführen.
1) Die Grundstruktur ist wie folgt: <tr> stellt eine Zeile in einer Tabelle dar und <td> stellt eine Spalte in einer Zeile dar. Wenn wir von einer Spalte sprechen, können wir sie uns eigentlich als eine Zelle in Word vorstellen. <th> ist eigentlich eine Zelle, wird aber als Tabellenüberschrift verwendet. Semantisch gesehen: <td> gibt die Dateneinheit in der Tabelle an und <th> gibt den Titel einer Spalte oder Zeile in der Tabelle an.

Code kopieren

Der Code lautet wie folgt:

2) Ein Titel kann ein Zeilentitel oder ein Spaltentitel sein. Wie kann man sie unterscheiden? Sie müssen das Bereichsattribut „scope=row/col“ verwenden.

Code kopieren

Der Code lautet wie folgt:

3) Die Tabelle hat auch einen eigenen Titel <caption>

Code kopieren

Der Code lautet wie folgt:

<Tabelle>
<caption>Tabellentitel</caption>
<tr><th Umfang="col"></th></tr>
<tr><td><td></tr>
</Tabelle>

4) Fügen Sie der Tabelle ein Zusammenfassungsattribut hinzu

Code kopieren

Der Code lautet wie folgt:

<table summary="Dies ist eine tabellarische Zusammenfassung">
<caption>Tabellentitel</caption>
<tr><th Umfang="col"></th></tr>
<tr><td><td></tr>
</Tabelle>

5) Tabellenrahmenmodell und Standardzellenpolsterung.
Es gibt zwei Anzeigemodi für Tabellenränder: getrennt und zusammengeführt. border-collapse: separate/collapse Der Standardstil von IE6 ist separat und sieht dreidimensional aus. In Wirklichkeit hat jede Zelle ihre eigene, unabhängige Grenze. Zusammenführen bedeutet, Grenzen zu teilen.
Tabelle { Rahmen-Collapse: Collapse; }
Standardmäßig gibt es Leerraum zwischen den Zellen. Sie können den Leerraum mithilfe des Rahmenabstands steuern, dies wird jedoch selten verwendet, da IE6 dies nicht unterstützt. IE6
Verwenden Sie den Zellenabstand.

Code kopieren

Der Code lautet wie folgt:

<table summary="Dies ist eine Zusammenfassung des Tabelleninhalts" cellspacing="0">
<caption>Tabellentitel</caption>
<tr><th Umfang="col"></th></tr>
<tr><td><td></tr>
</Tabelle>

6) Fügen Sie einige Zeilen und Spalten hinzu. Und fügen Sie jedem <th> eine ID hinzu.

Code kopieren

Der Code lautet wie folgt:

<table summary="Dies ist eine Zusammenfassung des Tabelleninhalts" cellspacing="0">
<caption>Tabellentitel</caption>
<tr>
<th Umfang="col" id="name">Name</th>
<th scope="col" id="address">Adresse</th>
<th scope="col" id="databirthday">Geburtsdatum</th>
</tr>
<tr>
<td>Muh<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
</Tabelle>

7) Teilen Sie die Tabelle logisch auf <thead><tbody><tfoot>. Nachdem Sie die Tabelle in mehrere logische Bereiche unterteilt haben, können Sie CSS verwenden, um die Leistung besser zu steuern.

Code kopieren

Der Code lautet wie folgt:

<table summary="Dies ist eine Zusammenfassung des Tabelleninhalts" cellspacing="0">
<caption>Tabellentitel</caption>
<Kopf>
<tr>
<th Umfang="col" id="name">Name</th>
<th scope="col" id="address">Adresse</th>
<th scope="col" id="databirthday">Geburtsdatum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Muh<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
<tbody>
</Tabelle>

In meinem Aufsatz gehe ich nur kurz auf die Struktur der Tabelle ein. Ich hoffe, er ist hilfreich.

<<: So erhalten Sie Root-Berechtigungen in einem Docker-Container

>>: Teilen Sie eine Idee zum Aufbau eines Master-Slave-Systems für eine große MySQL-Datenbank

VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)

Eine kurze Erläuterung der HTML-Tabellen-Tags

VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)

MySQL-Primärschlüssel-Benennungsstrategie im Zusammenhang

CentOS 7.6 Installation der MySQL 5.7 GA-Version Tutorial-Diagramm

Implementierung des Vue 3.x-Projekts basierend auf Vite2.x

So aktivieren Sie die Protokollfunktion für langsame Abfragen in MySQL

Tiefgreifendes Verständnis der Matching-Logik von Server und Standort in Nginx

React Native JSI implementiert Beispielcode für RN und native Kommunikation

Drei Möglichkeiten zum Aktualisieren von Iframes

Java-Beispielcode zum Generieren von zufälligen Zeichen

Detaillierte Erklärung der Abkürzung von State in React

Artikel empfehlen

Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)

Tutorial zur HTML-Tabellenauszeichnung (9): Zellabstandsattribut CELLSPACING

Detaillierte Erklärung des Vue-Lebenszyklus

Schritte zur Verwendung der nicht installierten Version von MySQL und Lösungen zum Vergessen des Kennworts

So implementieren Sie die Stapellöschung großer Datenmengen in großen MySQL-Tabellen

mysql-8.0.16 winx64 neuestes Installationstutorial mit Bildern und Text

Häufige Fehler und Lösungen zum Verbinden von Navicat mit einer virtuellen MySQL-Maschine

WeChat-Miniprogramme implementieren Sternebewertung

Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL

So verwenden Sie Vue3-Mixin

Vue implementiert Baumtabelle durch Elementbaumsteuerung

Implementierung der DOM-Operation in React

Die perfekte Lösung für Vue-Routing-Fallback (vue-route-manager)

Detailliertes Tutorial zur Verwendung von Docker zum Erstellen von Gitlab basierend auf dem CentOS8-System

Tipps zum Festlegen von HTML-Tabellenrändern