BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

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:

Beispiel

table, th, td {
  border: 1px solid black;
}
Try it Yourself »

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:

     
     
     

Beispiel

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
Try it Yourself »

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:

     
     
     

Beispiel

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}
Try it Yourself »

Überspringen Sie den Rahmen um die Tabelle, indem Sie table aus dem CSS-Selektor weglassen:

     
     
     

Beispiel

th, td {
  border: 1px solid black;
 border-radius: 10px;
}
Try it Yourself »

Gepunktete Tabellenränder

Mit der Eigenschaft border-style können Sie das Aussehen des Rahmens festlegen.

     
     
     

Die folgenden Werte sind zulässig:

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

Beispiel

 th, td {
  border-style: dotted;
}
Try it Yourself »

Rahmenfarbe

Mit der Eigenschaft border-color können Sie die Farbe des Rahmens festlegen.

     
     
     

Beispiel

 th, td {
  border-color: #96D4D4;
}
Try it Yourself »


Kommentare