HTML Table Borders
HTML-Tabellen können Rahmen unterschiedlicher Stile 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-Eigenschaft border für table, th- und td-Elemente:
Reduzierte Tabellenränder
Um doppelte Ränder wie im obigen Beispiel zu vermeiden, setzen Sie die CSS-Eigenschaft border-collapse auf collapse.
Dadurch werden die Ränder zu einem einzigen Rand zusammengelegt:
Stiltabellenränder
Wenn Sie für jede Zelle eine Hintergrundfarbe festlegen und dem Rand eine weiße Farbe geben (die gleiche wie der Dokumenthintergrund), entsteht der Eindruck eines unsichtbaren Randes:
Beispiel
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Try it Yourself »
Runde Tischränder
Mit der Eigenschaft border-radius erhalten die Ränder abgerundete Ecken:
Überspringen Sie den Rahmen um die Tabelle, indem Sie table aus dem CSS-Selektor weglassen:
Gepunktete Tabellenränder
Mit der Eigenschaft border-style können Sie das Aussehen des Rahmens festlegen.
Die folgenden Werte sind zulässig:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Rahmenfarbe
Mit der Eigenschaft border-color können Sie die Farbe des Rahmens festlegen.
