Detaillierte Erklärung der Rahmen- und Regelattribute der Tabelle in HTML

Detaillierte Erklärung der Rahmen- und Regelattribute der Tabelle in HTML

Die Rahmen- und Regelattribute des Tabellentags können die Anzeige des Rahmens steuern. Die Rahmeneigenschaft steuert die Sichtbarkeit der vier äußersten Ränder der Tabelle, während die Regeln die Sichtbarkeit der inneren Ränder der Tabelle steuern.
Die möglichen Werte und Bedeutungen des Frame-Attributs sind wie folgt:
* void – der Standardwert. Gibt an, dass der äußerste Rand der Tabelle nicht angezeigt wird.
* Box – Zeigt vier Ränder gleichzeitig an.
* Rahmen – Zeigt vier Rahmen gleichzeitig an.
* oben – nur den oberen Rand anzeigen.
* unten – Nur den unteren Rand anzeigen.
* lhs – Nur den linken Rand anzeigen.
* rhs – Nur den rechten Rand anzeigen.
* hsides – zeigt nur die beiden horizontalen Ränder.
* vsides – zeigt nur die beiden vertikalen Ränder.
Es gibt fünf mögliche Werte für das Regeln-Attribut:
* keine – Der Standardwert. Keine Grenze.
* Gruppen – fügen Sie Zeilen- oder Spaltengruppen Ränder hinzu.
* Zeilen – fügen Sie den Zeilen Ränder hinzu.
* cols – fügt den Spalten Ränder hinzu.
* alle - allen Zeilen und Spalten (Zellen) Rahmen hinzufügen


Codebeispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Tabelle   Grenze = "1"   Breite = "600"   Rahmen = "hsides"   Regeln = "Gruppen" >   
  2.       < caption > Meine ultimative Tabelle </ caption >   
  3.       < Spaltengruppe   Spanne = "1"   Breite = "200" > </ colgroup >   
  4.       < Spaltengruppe   Spanne = "3"   Breite = "400" > </ colgroup >   
  5.   
  6. < thead >   
  7.       < tr >   
  8.            < td > Zelle 1-1 </ td >   
  9.            < td > Zelle 1-2 </ td >   
  10.            < td > Zelle 1-3 </ td >   
  11.            < td > Zelle 1-4 </ td >   
  12.       </tr>   
  13. </ thead >   
  14. < tFuß >   
  15.       < tr >   
  16.            < td > Zelle 4-1 </ td >   
  17.            < td > Zelle 4-2 </ td >   
  18.            < td > Zelle 4-3 </ td >   
  19.            < td > Zelle 4-4 </ td >   
  20.       </tr>   
  21. </ tfoot >   
  22. < tbody >   
  23.       < tr >   
  24.            < td > Zelle 2-1 </ td >   
  25.            < td > Zelle 2-2 </ td >   
  26.            < td > Zelle 2-3 </ td >   
  27.            < td > Zelle 2-4 </ td >   
  28.       </tr>   
  29.       < tr >   
  30.            < td > Zelle 3-1 </ td >   
  31.            < td > Zelle 3-2 </ td >   
  32.            < td > Zelle 3-3 </ td >   
  33.            < td > Zelle 3-4 </ td >   
  34.       </tr>   
  35. </ tbody >   
  36. </ Tabelle >   

Der Anzeigeeffekt im Browser ist wie folgt:
201678140942598.jpg (599×127)

<<:  Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

>>:  Vor- und Nachteile des Tabellenlayouts und warum es nicht empfohlen wird

Artikel empfehlen

CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]

CSS-Schreibreihenfolge 1. Positionsattribute (Pos...

Schreiben Sie eine dynamische Uhr auf einer Webseite in HTML

Verwenden Sie HTML, um eine dynamische Web-Uhr zu...

Implementierung eines CSS-Textschatten-Effekts zur allmählichen Unschärfe

Textschatten Fügen Sie dem Text einen Schatten hi...

So erstellen Sie einen Redis-Cluster mit Docker

Inhaltsverzeichnis 1. Erstellen Sie ein Redis-Doc...

Docker-Datenverwaltung und Netzwerkkommunikationsnutzung

Sie können Docker installieren und einfache Vorgä...

Vue implementiert rekursiv ein dreistufiges Menü

In diesem Artikelbeispiel wird der spezifische Co...

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

Die aktuelle Umgebung ist: Centos 7.5 docker-ce 1...

Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy

Beim Konfigurieren des Nginx-Reverse-Proxys könne...

Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs

Bei der Frontend-Entwicklung stehen wir in direkt...

So überprüfen Sie die Festplattennutzung unter Linux

1. Verwenden Sie den Befehl df, um die gesamte Fe...