1, 63bd76834ec05ac1f4c0ebbeaafb09944bab44fcbc3e3ce76dcfefac0c3ca75b01c3ce868d2b3d9bce8da5c1b7e41e5b3. Komplexe Anwendungen von Tabellen
Zeilengruppierung
Die Tabelle kann in 3 Teile unterteilt werden 1. Tabellenkopfae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a
2. Tabellenkörper92cee25da80fac49f6fb6eec5fd2c22aad3aab25338bc07d1dae75dc4c128764
3. Tabellenfuß 06669983c3badb677f993a8c29d1884529ef2a7480190e02cff1c62c6e19ab01<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>Hinweis: Wenn die Tabellenzeilen nicht gruppiert sind, gehören sie standardmäßig alle zum tbody
2. Unregelmäßige Tabellen
Jede Die Anzahl der Spalten in einer Zeile ist nicht einheitlich.
1. Spalten kreuzen
Spalten zusammenführen, die angegebenen Zellen horizontal nach rechts verschieben, mehrere Zellen zusammenführen (einschließlich sich selbst) Syntax: colspan-Attribut von td
2. Zeilen kreuzen
Zeilen zusammenführen, die angegebene Zelle vertikal nach unten gehen lassen, mehrere Zellen (einschließlich sich selbst) zusammenführen
Syntax: rowspan-Attribut von td
Hinweis : Ob zeilen- oder spaltenübergreifend, die zusammengeführten Zellen müssen aus dem Code gelöscht werden
3 Verschachtelung von Tabellen
in Innerhalb einer Tabelle ist eine andere Tabelle eingebettet
Die verschachtelte Tabelle muss in b6c5a531a458a2e790c1fd6421739d1c
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>HTML-Tabelle tabellenspezifischen Stilattributen
1. Border-Collapse von HTML-Tabellen-Tabellenstilattributen
Attribut: border-collapse Wert:
1.separate: Standardwert, separater Rahmenmodus 1. Reduzieren: Randzusammenführungsmodus
2. Randrand des HTML-Tabellenstilattributs
1. Funktion: Legen Sie den Abstand zwischen benachbarten fest Zellränder (ähnlich dem Zellabstand)2. Attribut: border-spacing
Wert:
1. Nehmen Sie 1 Wert
, was bedeutet, dass der horizontale und vertikale Abstand gleich sind
2. Nehmen Sie 2 Werte
Erster Der durch den ersten Wert dargestellte horizontale Abstand
Der durch den zweiten Wert dargestellte vertikale Abstand
Durch ein Leerzeichen getrennt
3 Anforderungen
Rand- Die Minimierung muss separat sein
Sie muss im getrennten Rahmenmodus gültig sein
3. Titelposition des HTML-Tabellentabellenstilattributs
3ce998821a5062e2e187f46f1a50ab3c
Funktion: Ändern Sie die Titelposition von der Standardposition unter die Tabelle
Attribut: caption-side
Wert:
1. Oben: Standard
2. Unten: Der Titel befindet sich unter der Tabelle
4. Anzeigeregeln für HTML-Tabellen-Tabellenstilattribute
1.Funktion
Gibt an, wie der Browser eine Tabelle anordnet. Es gibt tatsächlich die Algorithmusregeln der Zelle an
Standardalgorithmus: Die Breite der Zelle wird durch den Inhalt bestimmt und ist nicht durch den eingestellten Breitenwert begrenzt.
2. Attribut: Tabellenlayout
Wert:
1. Auto: Standardwert, automatisch, Spaltenbreite wird durch Inhalt bestimmt
2, behoben: festes Tabellenlayout, Spaltenbreite wird durch den eingestellten Wert bestimmt.
3. Automatisches Tabellenlayout und festes Tabellenlayout
1. Automatisches Tabellenlayout (automatisch)
Die Größe der Zelle passt sich der Inhaltsgröße an
Wenn die Tabelle komplex ist, wird das Laden langsamer sein
Geeignet für den Einsatz, wenn die Größe jeder Spalte unsicher ist
Traditionelle Tabellenpräsentationsmethode
2. Feste Tabelle Layout (fest)
Die Größe der Zelle wird unabhängig vom Inhalt durch den eingestellten Wert bestimmt
Dadurch wird die Anzeige der Tabelle beschleunigt und der Browser muss keine Berechnungen durchführen es nach dem Laden der ersten Zeile.
4. Versteckter Anzeigeeffekt
Attribut: Visibility:collapse
wird für Tabellenelemente verwendet, um eine Zeile oder Spalte zu löschen, ohne das gesamte Layout der Tabelle zu beeinflussen
Vielen Dank, dass Sie diesen Artikel gelesen haben. Wenn Sie Fragen oder Fragen dazu haben, können Sie diese unten stellen.
Es gibt einen weiteren Artikel über diese erweiterte Version, bitte klicken Sie hier: Einführung in den Stil des HTML5-Tabellen-Tags (mit einem Beispiel für die CSS-Zentrierung von HTML5-Tabellen)
[ Kleine verwandte Artikel, bearbeitet vom Herausgeber]
Was ist die Funktion des HTML-EM-Tags? Der Unterschied zwischen 907fae80ddef53131f3292ee4f81644b- und 5a8028ccc7a7e27417bff9f05adf5932-Tags
Was bedeutet das HTML-Optgroup-Tag? Analyse der Verwendung und Attributbeispiele des HTML-Optgroup-Tags
