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

Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow

Eine kurze Erläuterung der HTML-Tabellen-Tags

Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

JavaScript Canvas realisiert den Effekt des Neun-Quadrat-Rasterschneidens

Sicherheitskonfigurationsstrategie für CentOS-Server

MySQL-Trigger: ausführliche Erklärung und einfaches Beispiel

IIS und APACHE implementieren die HTTP-Umleitung auf HTTPS

Einführung in Who-Befehlsbeispiele in Linux

Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)

Was sind die neuen Funktionen von Apache Spark 2.4, das 2018 veröffentlicht wird?

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64

Artikel empfehlen

mysql8.0.20 herunterladen und installieren und aufgetretene Probleme (Abbildung und Text)

MySQL-Anmelde- und Beendigungsbefehlsformat

Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue

Den Linux-Kernel erkunden: Die Geheimnisse von Kconfig

Erläuterung zur Optimierung der Tomcat+MySQL-Konfiguration mit hoher Parallelität

Ubuntu-Installations-Grafiktreiber und CUDA-Tutorial

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

MySQL query_cache_type-Parameter und Verwendungsdetails

Drei Diskussionen zum Iframe Adaptive Height Code

Import-, Export-, Sicherungs- und Migrationsvorgänge für Docker-Images

Mysql5.7.14 Linux-Version Passwort vergessen perfekte Lösung

JS implementiert einfache Addition und Subtraktion von Warenkorbeffekten

js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

Detaillierte Erläuterung der Konfigurationspraxis für die MySQL-Master-Slave-Synchronisierung

Beispielcode zur Implementierung der Ellipsenbahnrotation mit CSS3