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

Detaillierte Erklärung der Datentypen in den JavaScript-Grundlagen

Inhaltsverzeichnis 1. Datentyp 1.1 Warum brauchen...

Natives JS implementiert benutzerdefinierte Bildlaufleistenkomponente

In diesem Artikelbeispiel wird der spezifische JS...

Detaillierte grafische Erklärung zur Verwendung von SVG im Vue3+Vite-Projekt

Heute habe ich bei der Verwendung von SVG in der ...

Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx

Inhaltsverzeichnis Proxy-Weiterleitungsregeln Der...

Analyse der Prinzipien der MySQL Slow Query-bezogenen Parameter

MySQL Slow Query, dessen vollständiger Name „Slow...

So führen Sie Tomcat-Quellcode im Maven-Modus aus

Vorwort Kürzlich habe ich den Startvorgang von To...

Vue implementiert rekursiv ein dreistufiges Menü

In diesem Artikelbeispiel wird der spezifische Co...

So stellen Sie Spring Boot mit Docker bereit

Die Entwicklung der Docker-Technologie bietet ein...

Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen

Google China hat ein Übersetzungstool veröffentlic...