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 des JS-Speicherplatzes

Inhaltsverzeichnis Überblick 1. Stapeln und Aufhä...

12 Arten der Komponentenkommunikation in Vue2

Inhaltsverzeichnis 1. Requisiten 2..synchronisier...

Front-End-Statusverwaltung (Teil 2)

Inhaltsverzeichnis 1. Wiederholen 1.1. Shop (Bibl...

VUE Erste Schritte Erlernen der Ereignisbehandlung

Inhaltsverzeichnis 1. Funktionsbindung 2. Mit Par...

Spezielle Befehle in der MySql-Datenbankabfrage

Erstens: Installation von MySQL Laden Sie die MyS...

Aufbauprinzip des Nexus-Privatservers und Tutorial-Analyse

eins. Warum einen privaten Nexus-Server erstellen...

IE6 BUG und Fix ist eine vorbeugende Strategie

Originalartikel: Ultimatives IE6-Cheatsheet: So b...

Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

Korrespondenz zwischen Flutter und CSS im Shadow-...

Beispiele für die Verwendung des Linux-Touch-Befehls

Detaillierte Erklärung des Linux-Touch-Befehls: 1...

Detaillierte Beispiele für Ersetzen und Ersetzen in MySQL into_Mysql

„Replace“ und „Replace into“ von MySQL sind beide...

Zusammenfassung der mobilen Anpassungslösung von webpack

Inhaltsverzeichnis rem vw An UI-Frameworks von Dr...

Vue implementiert die Seiten-Caching-Funktion

In diesem Artikelbeispiel wird der spezifische Co...