CSS-Tabellen
Mehrere CSS-Eigenschaften werden häufig verwendet, um HTML-Tabellen zu gestalten. Jede davon wird unten beschrieben.
In diesem Kapitel behandeln wir, wie man Tabellen gestaltet, einschließlich des Änderns der Farben von Überschriften und Zeilen.
Eigenschaften zur Tabellengestaltung
Hier sind die CSS-Eigenschaften, die zum Gestalten einer Tabelle verwendet werden. Die Eigenschaften background-color und color legen die Hintergrund- bzw. Textfarben fest. Die Eigenschaft border-collapse fasst Tabellenrahmen zusammen. Die Eigenschaft text-align legt die horizontale Textausrichtung fest. Außerdem können Sie height, width und padding für Layoutanpassungen verwenden.
Beispiel für das Gestalten einer Tabelle:
Beispiel für das Gestalten von HTML-Tabellen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
text-align: center;
height: 50px;
}
tbody tr:nth-child(odd) {
background: #ffffff;
}
tbody tr:nth-child(even) {
background: #f4f4f4;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Ergebnis
Lassen Sie uns den obigen Code erklären.
Wie Sie sehen, hat unsere Tabelle zwei Hauptbereiche: den <thead>-Bereich für Überschriften und den <tbody>-Bereich für die Datenzeilen. Die Tabelle verwendet schwarze Rahmen, die über die Eigenschaft border angewendet werden. Sie können jede Farbe und jeden Rahmenstil verwenden, den Sie bevorzugen.
Tabellenfarbe
Wie Sie sehen, ist der <thead>-Teil unserer Tabelle blau und überall dort, wo wir Text schreiben, ist er weiß. Für den blauen Hintergrund verwenden wir die Eigenschaft background-color, und für den weißen Text die Eigenschaft color. Die übrigen Texte sind schwarz geschrieben.
Rahmen zusammenfassen
Die Eigenschaft border-collapse legt fest, ob die Rahmen einer Tabelle zu einem einzelnen Rahmen zusammengefasst oder getrennt dargestellt werden.
Tabellenbreite und -höhe
Die Tabelle hat außerdem die Eigenschaften width und height. Wie Sie sehen, verwenden wir diese Eigenschaften in unserem Stil. Wir verwenden die Eigenschaft width für die gesamte Tabelle und die Eigenschaft height für die Überschriften. Wir können diese Eigenschaften mit Pixeln und Prozentwerten verwenden.
Textausrichtung in Tabellen
Nun zur Textausrichtung in Tabellen. Wie Sie bereits wissen, haben wir zuvor die Eigenschaft text-align für die Textposition verwendet. In unserem Beispiel verwenden wir, wie Sie sehen, die Eigenschaft text-align für die Überschrift. Dafür verwenden wir "text-align: center". Sie können unser vorheriges Kapitel lesen, um zu erfahren, wie man sie verwendet.
Tabellenabstand
Um den Abstand zwischen Rahmen und Inhalt in einer Tabelle zu steuern, verwenden Sie die Eigenschaft padding für die Elemente <td> und <th>:
Abstand bei HTML-Tabellen
td, th {
padding: 15px;
}Horizontale Ausrichtung mit der Eigenschaft text-align
Mit Hilfe der CSS-Eigenschaft text-align können Sie die horizontale Ausrichtung des Inhalts in <th>- oder <td>-Elementen festlegen.
Standardmäßig ist der Inhalt von <td>-Elementen links ausgerichtet und der Inhalt von <th>-Elementen zentriert. Im folgenden Beispiel ist der Inhalt der <th>- und <td>-Elemente rechts ausgerichtet:
Beispiel für die rechtsbündige Ausrichtung des Inhalts von <th>- und <td>-Elementen:
Beispiel für die rechtsbündige Ausrichtung des Inhalts von <th>- und <td>-Elementen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: right;
}
</style>
</head>
<body>
<h2>Horizontal alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Whatson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Vertikale Ausrichtung mit der Eigenschaft vertical-align
Mit der CSS-Eigenschaft vertical-align können Sie die vertikale Ausrichtung des Inhalts in <th>- oder <td>-Elementen festlegen.
Standardmäßig ist der Inhalt sowohl in <th>- als auch in <td>-Elementen vertikal mittig ausgerichtet.
Im folgenden Beispiel ist der Inhalt der <td>-Elemente unten ausgerichtet:
Beispiel für die vertikale Ausrichtung des Inhalts von <td>-Elementen nach unten:
Beispiel für die vertikale Ausrichtung des Inhalts von <td>-Elementen nach unten:
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<h2>Vertical alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$300</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Horizontale Trennlinien
Durch Hinzufügen der CSS-Eigenschaft border-bottom zu den Elementen <td> und <th> erstellen Sie horizontale Trennlinien.
Beispiel für das Erstellen horizontaler Trennlinien:
Beispiel für das Erstellen horizontaler Trennlinien:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
</style>
</head>
<body>
<h2>Horizontal dividers example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Hoverbare Tabellen
Durch die Verwendung des CSS-Selektors :hover auf dem <tr>-Element wird die Tabelle hoverbar.
Beispiel für das Erstellen einer hoverbaren Tabelle:
Beispiel für das Erstellen einer hoverbaren Tabelle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #f5f5f5;
}
th,
td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ccc;
}
tr:hover {
background-color: #cdcdcd;
}
</style>
</head>
<body>
<h2>Hoverable table example</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Zebra-gestreifte Tabelle
Durch die Verwendung des Selektors nth-child() und das Hinzufügen der CSS-Eigenschaft background-color zu den ungeraden (geraden) Tabellenzeilen können Sie eine zebra-gestreifte Tabelle erstellen.
Beispiel für das Erstellen einer zebra-gestreiften Tabelle:
Beispiel für das Erstellen einer zebra-gestreiften Tabelle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Striped table example</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$250</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Responsive Tabellen
Um eine Tabelle responsiv zu machen, umschließen Sie sie mit einem Container-Element und wenden Sie overflow-x: auto auf diesen Container an.
Beispiel für das Erstellen einer responsiven Tabelle:
Beispiel für das Erstellen einer responsiven Tabelle
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px 5px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Responsive table example</h2>
<div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Übung
Welche CSS-Eigenschaften können auf Tabellen angewendet werden?