HTML- Tabellenrahmen
HTML-Tabellen können Rahmen mit unterschiedlichen Stilen und Formen haben.
So fügen Sie einen Rahmen hinzu
Wenn Sie einer Tabelle einen Rahmen hinzufügen, fügen Sie auch Rahmen um jede Tabellenzelle hinzu:
Um einen Rahmen hinzuzufügen, verwenden Sie die CSS- border
Eigenschaft für
table
, th
und
td
-Elemente:
Beispiel
table, th, td
{
border: 1px solid black;
}
Eingeklappte Tabellenrahmen
Um doppelte Rahmen wie im obigen Beispiel zu vermeiden, setzen Sie die CSS- border-collapse
Eigenschaft auf collapse
.
Dadurch werden die Grenzen zu einer einzigen Grenze zusammenfallen:
Beispiel
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style-Tabellenrahmen
Wenn Sie für jede Zelle eine Hintergrundfarbe festlegen und dem Rahmen eine weiße Farbe geben (wie beim Dokumenthintergrund), erhalten Sie den Eindruck eines unsichtbaren Rahmens:
Beispiel
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Runde Tischränder
Mit der border-radius
Eigenschaft bekommen die Ränder abgerundete Ecken:
Beispiel
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Überspringen Sie den Rand um die Tabelle, indem table
Sie den CSS-Selektor auslassen:
Beispiel
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Gepunktete Tischränder
Mit der border-style
Eigenschaft können Sie das Aussehen der Umrandung festlegen.
Folgende Werte sind erlaubt:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Beispiel
th, td {
border-style: dotted;
}
Randfarbe
Mit der border-color
Eigenschaft können Sie die Farbe des Rahmens festlegen.
Beispiel
th, td {
border-color: #96D4D4;
}