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

Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung

Detaillierte grafische Erklärung zur Installation der MySQL-Datenbank und zur Konfiguration eines Java-Projekts unter Linux

1. MySQL-Datenbank installieren ① Herunterladen, ...

Eine kurze Erläuterung der HTML-Tabellen-Tags

Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung

Vollständiger Code zur Implementierung des beliebten Astronauten-Zifferblatts basierend auf JavaScript

Docker implementiert Container-Portbindung am lokalen Port

Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt

Beispiele für die Verwendung von HTML-Marquee-Tags

Lösen Sie das Problem, dass Nginx nach der Konfiguration von proxy_pass 404 zurückgibt

jQuery-Plugin für ein nahtloses Karussell

So überprüfen Sie die Speichernutzung unter Linux

PageSpeed Optimierung im Überblick

Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT

Artikel empfehlen

Natives JS zur Implementierung eines einfachen Rechners

Anleitung zur Verwendung von env in vue cli

Beispiel für die Konfiguration mehrerer virtueller Hosts in nginx

Node verwendet koa2, um eine einfache JWT-Authentifizierungsmethode zu implementieren

9 praktische Tipps zum Erstellen von Webinhaltsseiten

Detaillierte grafische Erklärung zur Installation der MySQL-Datenbank und zur Konfiguration eines Java-Projekts unter Linux

Einige Möglichkeiten zur Lösung des Problems des in Jenkins integrierten Docker-Plugins

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

MySQL zeigt die maximale Anzahl von Verbindungen an und ändert die maximale Anzahl von Verbindungen

Verwenden Sie MySQL, um Port 3306 zu öffnen/ändern und Zugriffsberechtigungen in der Ubuntu/Linux-Umgebung zu öffnen

Docker richtet Port-Mapping ein, kann aber nicht auf die Lösung zugreifen

Auszeichnungssprache – CSS-Stil für Webanwendungen

So wenden Sie TypeScript-Klassen in Vue-Projekten an

Springboot + Vue-Cropper realisiert den Effekt des Avatar-Ausschneidens und -Hochladens

Ein einfaches Beispiel zum Erstellen einer dünnen Linientabelle in HTML