Erstellen Sie eine HTML-Tabelle mit abgerundeten Ecken mit CSS

Naila Saad Siddiqui 20 Juni 2023

CSS CSS Table

In dieser kurzen Programmieranleitung geht es um CSS-Styling zum Erstellen einer Tabelle mit runderen Ecken auf einer HTML-Seite.

Erstellen Sie eine HTML-Tabelle mit abgerundeten Ecken mit CSS

Die Eigenschaft, die die Ecken eines Bild-, Tabellen- oder Div-Segments abgerundet macht, ist border-radius. Diese Eigenschaft legt den Eckenradius eines beliebigen HTML-Elements fest, z. B. einer Tabelle.

Sehen wir uns das folgende Beispiel an:

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

In diesem CSS-Stil haben wir verschiedene Stile auf verschiedene Komponenten der Tabelle td, th, table usw. angewendet.

Der erste Stil, den wir angewendet haben, ist die Rand-Eigenschaft von solidem Schwarz 1px, und dann haben wir einen Randradius von 10px angewendet. Diese Eigenschaft gibt allen Rändern der Tabelle eine abgerundete Form.

Dann haben wir den Rahmen auf alle Zellen in schwarzer Farbe mit einer Größe von 1 Pixel angewendet. Der HTML-Code wird sein:

<body>
<table>
    <thead>
    <tr>
        <th>Table </th>
        <th>Header</th>
        <th>Row</th>
    </tr>
    </thead>
    <tr>
        <td>sample</td>
        <td>text</td>
        <td>sample</td>
    </tr>
    <tr>
        <td>text</td>
        <td>sample</td>
        <td>text</td>
    </tr>
</table>
</body>

Diese Tabelle hat eine Kopfzeile und zwei Zeilen für Beispieldaten.

Die Anzahl der abgerundeten Ecken hängt von der von uns bereitgestellten Größe ab. So können wir sehen, wie wir die abgerundeten Ecken einer HTML-Tabelle erstellen können.