CSS-Tabellenrand festlegen

CSS ist die Abkürzung für Cascading Style Sheets, mit der der Stil und das Layout von Webseiten festgelegt werden können. Bei der Erstellung von Webseiten sind Tabellen eines der häufigsten und wichtigsten Elemente. Wir müssen wissen, wie man den Rand der Tabelle mit CSS festlegt.

1. Verwenden Sie das Rahmenattribut.

Die häufigste Methode zum Festlegen des Rahmens einer Tabelle ist die Verwendung des CSS-Rahmenattributs.

Das Folgende ist der CSS-Code zum Festlegen des Tabellenrahmens:

table {
border: 1px solid black;
}

Im obigen Code wenden wir ein Rahmenattribut auf das Tabellenelement an. Unter diesen umfasst das Randattribut drei Attributwerte: Randbreite, Randstil und Randfarbe. Der in diesem Beispiel verwendete Wert ist 1 Pixel einfarbig und stellt Folgendes dar:

Rahmenbreite: die Breite des Rahmens, normalerweise angegeben in px-Einheiten;
Rahmenstil: der Stil des Rahmens, der einfarbig oder gepunktet sein kann , gestrichelt und doppelt usw.;
Rahmenfarbe: Die Farbe des Rahmens, die ein bestimmter Farbname, ein hexadezimaler Farbcode oder ein RGB-Farbwert sein kann.

2. Verwenden Sie das Attribut „Rahmenfarbe“

Bei Verwendung des Attributs „Rahmen“ können Sie unabhängige Attributwerte verwenden, um die Dicke, den Stil und die Farbe des Rahmens festzulegen, wie unten gezeigt:

Tabelle {
Rahmenbreite : 1px;
border- style: solid;
border-color: black;
}

Dieser Code hat die gleiche Wirkung wie der vorherige Code, außer dass wir hier jedes Stilattribut des Rahmens separat angeben.

3. Legen Sie verschiedene Randstile fest

Wenn wir möchten, dass die verschiedenen Randstile der Tabelle unterschiedlich sind, können wir dies wie folgt festlegen:

Tabelle {
Randbreite: 1 Pixel;
Randstil: einfarbig
border-color: black ;
border-top-style: gestrichelt;
border-bottom-style: dotted;
}

Durch die Verwendung von border-top-style und border-bottom-style können wir die Stile des Obermaterials festlegen und unteren Ränder der Tabelle unabhängig voneinander. Der obige Code setzt den oberen Rand der Tabelle auf gestrichelt und den unteren Rand auf gepunktet.

4. Legen Sie nur den Rand des Tabellenkopfes fest.

Manchmal möchten wir nur den Rand des Kopfteils der Tabelle festlegen, nicht den Rand der gesamten Tabelle. Wir können den Kopfteil mithilfe der Elemente „ad“, „th“ und „tr“ auswählen und dann den Rahmen nach Bedarf festlegen.

Das Folgende ist der CSS-Code zum Festlegen des Tabellenkopfrands:

thead th {
border: 1px solid black;
}

Im obigen Code haben wir nur das th-Element im thead-Element ausgewählt und dessen The festgelegt Der Rand ist eine durchgezogene 1-Pixel-Linie. Wenn Sie nur den Rand einer bestimmten Zelle im Tabellenkopf festlegen möchten, ersetzen Sie einfach das Feld durch die Klasse oder ID der Zelle und legen Sie es dann fest.

Zusammenfassung

Die oben genannten sind gängige Methoden zum Festlegen des Randes einer Tabelle. Wir können verschiedene Stilattribute wählen, um die Gestaltung der Tischränder nach Bedarf zu realisieren. Wenn wir Rahmenstile verwenden, können wir je nach Bedarf unterschiedliche Stile festlegen. Wenn wir beispielsweise möchten, dass die Rahmenstile des Tabellentitels und der Datenzeilen unterschiedlich sind, können wir ihre Stile separat festlegen. Wenn Sie mehr über CSS-Tabellenkenntnisse erfahren möchten, können Sie sich professionelle Tutorials und Fälle ansehen, um weitere Fähigkeiten und praktische Methoden zu erlernen.

Das obige ist der detaillierte Inhalt vonCSS-Tabellenrand festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!