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 zur sauberen Deinstallation von Docker

Zunächst die Informationen zur Serverumgebung: Gr...

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei

Inhaltsverzeichnis 1. Einleitung: 2. Vererbung de...

Eine kurze Analyse der Netzwerkprogrammierfunktionen von Linux

Inhaltsverzeichnis 1. Erstellen Sie einen Socket ...

MySQL 8.0.21 Installationstutorial mit Bildern und Text

1. Laden Sie den Download-Link herunter Klicken S...

js, um einen simulierten Einkaufszentrumsfall zu erreichen

Freunde, die HTML-, CSS- und JS-Frontend lernen, ...

Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden

Inhaltsverzeichnis 1. Was ist eine Komponente? 2....

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Rendering-Pipeline mit externen CSS-Dateien In de...

Datenbankabfrage, welches Objekt welches Feld enthält, Methodenanweisung

Die Datenbank fragt ab, welches Objekt welche Fel...

JavaScript zum Erzielen eines Lupeneffekts

In diesem Artikel wird der spezifische Code für J...

So ändern Sie Flash-SWF-Dateien in Webseiten

Ich denke, dies ist ein Problem, auf das viele Leu...