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- borderEigenschaft für
table, thund
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-radiusEigenschaft 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 tableSie den CSS-Selektor auslassen:
Beispiel
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Gepunktete Tischränder
Mit der border-styleEigenschaft können Sie das Aussehen der Umrandung festlegen.
Folgende Werte sind erlaubt:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Beispiel
th, td {
border-style: dotted;
}
Randfarbe
Mit der border-colorEigenschaft können Sie die Farbe des Rahmens festlegen.
Beispiel
th, td {
border-color: #96D4D4;
}