Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Zusammensetzung der Tabellenbeschriftung
Die Tabelle in HTML besteht aus dem Tag <table> und der Browser interpretiert das Tag als Tabelle. Die Zeilen in einer Tabelle werden mit dem Tag <tr> definiert. Der <tr>-Tag ist eine Unterklasse des <table>-Tags. Durch das Setzen mehrerer <tr>-Tags kann die Tabelle in mehrere Zeilen aufgeteilt werden. Mit dem Tag <td> werden die Spalten einer Tabelle definiert. Der Tag <td> ist eine Unterklasse des Tags <tr>, daher muss jede Zeile eine entsprechende Anzahl von Tags <td> aufweisen, um die Spalten zu unterteilen und eine vollständige Tabelle zu bilden.
Die Beschriftungskombinationsbeziehung der Tabelle lautet:

Sie können beliebige HTML-Tags wie Texte, Bilder, Listen, Absätze, Formulare, horizontale Linien usw. in die Tabelle einfügen und diese sogar für das Seitenlayout verwenden. Das Tabellenlayout weist jedoch Probleme auf, wie beispielsweise übermäßige Code-Redundanz, Nichteinhaltung von HTML-Standards und Suchmaschinenunfreundlichkeit. Es wird daher empfohlen, möglichst keine Tabellen für das Seitenlayout zu verwenden, es sei denn, eine Tabelle wird auf der Seite wirklich benötigt.
Die verbleibenden <th>, <thead>, <tbody> und <tfoot> werden aufgrund der schlechten Browserunterstützung selten verwendet.

Tabellen- und Rahmeneigenschaften
Die Tabelle selbst kann das Rahmenattribut definieren, um die Breite des Tabellenrahmens zu bestimmen. Der Wert dieses Attributs wird standardmäßig in digitalen Einheiten angezeigt. Beispielsweise hat border="1" einen Wert in px. Hinweis: Fügen Sie nach dem Grenzwert keine weiteren Einheiten hinzu, da der Wert sonst nicht richtig erkannt werden kann.

Tabellenüberschrift
In einer <table> können Sie die Tabellenüberschrift mit dem <th>-Tag festlegen. Das <th>-Tag der Tabellenüberschrift steht auf derselben Ebene wie das <tr>-Tag, und die Tabellenüberschrift erscheint normalerweise vor dem <tr>-Tag. Bei einer Tabelle ist eine Kopfzeile nicht notwendig und kann nach Bedarf eingefügt werden. Der Text innerhalb des <th>-Tags wird automatisch fett dargestellt.

Zellen zusammenführen
Das Zusammenführen von Zellen wird in vertikales und horizontales Zusammenführen unterteilt. Beim Zusammenführen müssen Sie feststellen, ob in anderen Zeilen und Spalten entsprechende Zahlen von Zellen vorhanden sind.
Das Attribut colspan wird verwendet, um Zellen horizontal zusammenzuführen. Sein Wert ist eine Zahl, die die Anzahl der zusammenzuführenden Zellen angibt. Beispielsweise bedeutet colspan="2", dass zwei Zellen rechts zusammengeführt werden.
Das Attribut rowspan dient zum vertikalen Zusammenführen von Zellen. Es ist das gleiche Attribut wie beim horizontalen Zusammenführen. Die Anzahl der zusammenzuführenden Zellen wird ebenfalls in numerischer Form angegeben. Beispielsweise bedeutet rowspan="2", dass zwei Zellen nach unten zusammengeführt werden.
Beispiel-Demonstrationscode:

Beispiel Demonstrationseffekt:

Zellränder
Tabellen verfügen über eine dem Polsterstil ähnliche Polsterfunktionalität. Durch Definieren des Cellpadding-Attributs im <table>-Tag können Sie die Polsterung für alle darunter liegenden <td>-Elemente festlegen. Der Parameterwert des Attributs „cellpadding“ ist eine Zahl, die die Größe des Rands bestimmt. Beispielsweise bedeutet „cellpadding="10", dass der innere Rand aller <tr>-Tags in der Tabelle 10 Pixel beträgt.

Zellenabstand
Der Abstand zwischen den Zellen dient zum Festlegen des äußeren Rands des <tr>-Tags, der dem Rand im CSS-Stil ähnelt. Durch Definieren des Cellspacing-Attributs im <table>-Tag wird der äußere Rand für alle td-Elemente unter seinem Tag festgelegt. Dieses Attribut bestimmt auch die Größe des Randes in Form einer Zahl. Beispielsweise bedeutet cellspacing="10", dass der Rand aller <tr>-Tags in dieser Tabelle 10px beträgt.

Legen Sie einen Hintergrund für die Tabelle fest
Die Tabelle kann über die Hintergrundeigenschaft ein beliebiges Bild als Hintergrund für die Tabelle oder Zelle festlegen. Seine Verwendung ist dem Hintergrund in CSS sehr ähnlich. Durch Festlegen des entsprechenden Bildpfads für den Hintergrund kann die Zelle das entsprechende Bild anzeigen. Beispiel: background = "table_bg.gif"

Ausrichtung von Tabelleninhalten
Die Tabellenausrichtung wird in horizontale und vertikale Ausrichtung unterteilt. Dabei handelt es sich um das Align-Attribut und das Valign-Attribut. Durch Einfügen dieser beiden Attribute in die entsprechenden <td>-Tags kann die Ausrichtung von Text oder Bildern in der Zelle abgeschlossen werden.
Es gibt drei Werte für die horizontale Ausrichtung: links, zentriert und rechts. Es gibt auch drei Werte für die vertikale Ausrichtung: oben, mittig, unten und Grundlinie.
Die Grundlinienausrichtung darf nicht wörtlich verstanden werden. Tatsächlich bedeutet die Grundlinienausrichtung, dass der Text im oberen mittleren Teil der Tabelle statt in der Mitte erscheint. Wenn der Text nicht groß ist, ist der Effekt ähnlich wie in der Mitte, aber etwas höher als in der Mitte.

PS: Tabellenlayout-Anweisung in CSS
Mit dieser Anweisung können Sie den Stil der Tabellenanzeige festlegen, beispielsweise

Es können drei Werte angenommen werden:
* auto (Standard)
* behoben
* erben
auto bedeutet, dass die Größe der Zelle durch ihren Inhalt bestimmt wird. Fix bedeutet, dass die Größe der Zelle fix ist und von der ersten Zelle mit einer bestimmten Größe bestimmt wird. Wenn keine Zelle eine bestimmte Größe hat, wird sie von der Standardgröße der ersten Zelle bestimmt. Wenn der Inhalt in der Zelle die Größe der Zelle überschreitet, wird dies durch den Overflow-Befehl in CSS gesteuert. Microsoft behauptet, dass mit diesem Befehl Tabellen 100-mal schneller angezeigt werden können.
Um die Anzeige der Tabelle zu beschleunigen, ist es übrigens am besten, die Breite und Höhe der Tabelle vorab in CSS (bzw. den Breite- und Höhe-Attributen des Tabellen-Tags) anzugeben.