Eine kurze Erläuterung der HTML-Tabellen-Tags

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:

<Tabelle>
<tr><th></th></tr>
<tr><td><td></tr>
</Tabelle>

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:

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

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

Artikel empfehlen

Tutorial-Diagramm zur LAN-Netzwerkkonfiguration für virtuelle Maschinen von VMWare 15.X

Ich habe kürzlich an mehreren virtuellen Maschine...

Lassen Sie sich die tiefe Kopie von js verstehen

Inhaltsverzeichnis js tiefe Kopie Methode der Dat...

Vollständiges Tutorial zur Installation von Apache, MySQL, PHP, LAMP auf Ubuntu 18.04

1. Installieren Sie Apache $ sudo apt update &...

Analyse der MySQL-Transaktionsmerkmale und Ebenenprinzipien

1. Was ist eine Transaktion? Eine Datenbanktransa...

MySQL weist eine Riddle-Sicherheitslücke auf, die zum Verlust von Benutzernamen und Passwörtern führen kann

Die Riddle-Sicherheitslücke, die auf die MySQL-Ve...

MySQL wählt den passenden Datentyp für die ID

Inhaltsverzeichnis Zusammenfassung der Distribute...

nginx löst das Problem der langsamen Bildanzeige und des unvollständigen Downloads

Vorne geschrieben Kürzlich berichtete mir ein Les...

Detaillierte Erklärung der HTML-Formularelemente (Teil 1)

HTML-Formulare werden verwendet, um verschiedene ...

Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen

Einführung Verwenden Sie einfaches jQuery+CSS, um ...

Detaillierte Verwendung des Linux-Textsuchbefehls find

Der Befehl „Find“ wird hauptsächlich zum Suchen v...

Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Kürzlich habe ich auf der Grover-Website eine lus...

Eine kurze Analyse der CSS-Selektorgruppierung

Selektorgruppierung Angenommen, Sie möchten, dass...

Detaillierte Erläuterung der MySQL-Methode für verzögerte Replikationsbibliotheken

Einfach ausgedrückt besteht die verzögerte Replik...

Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines

Dieser Artikel veranschaulicht anhand von Beispie...

Detaillierte Erläuterung des MySQL MVCC-Mechanismusprinzips

Inhaltsverzeichnis Was ist MVCC Mysql-Sperre und ...