HTML-Tabellen
Definieren einer HTML-Tabelle
Eine HTML-Tabelle wird mit dem Tag <table> definiert.
Jede Tabellenzeile wird mit dem <tr> -Tag definiert.
Ein Tabellenkopf wird mit dem <th> -Tag definiert.
Standardmäßig sind Tabellenüberschriften fett und zentriert.
Eine Tabellendaten / Zelle wird mit dem <td> -Tag definiert.
Beispeil:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>50</td>
</tr>
<tr>
<td>Jeff</td>
<td>Bezos</td>
<td>94</td>
</tr>
</table>
So sieht eine Tabelle ohne CSS aus:
| Firstname | Lastname | Age |
|---|---|---|
| Bill | Gates | 64 |
| Jeff | Bezos | 56 |
Hinweis: Die <td> -Elemente sind die Datencontainer der Tabelle. Sie können alle Arten von HTML-Elementen enthalten. Text, Bilder, Listen, andere Tabellen usw.
HTML-Tabelle - Hinzufügen eines Rahmens
Wenn Sie keinen Rahmen für die Tabelle angeben, wird dieser ohne Rahmen angezeigt.
Ein Rahmen wird mit der CSS-Rahmeneigenschaft festgelegt: border
Beispeil:
table, th, td {
border: 1px solid black;
}
HTML-Tabelle - Reduzierte Rahmen
HTML-Tabelle - Rahmen reduzieren Wenn Sie möchten, dass die Ränder zu einem Rand zusammengefasst werden, fügen Sie die Eigenschaft zum Reduzieren von CSS-Rahmen hinzu: border-collapse
Beispeil:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML-Tabelle - Hinzufügen von Cell Padding
Das Auffüllen von Zellen gibt den Abstand zwischen dem Zelleninhalt und seinen Rändern an.
Wenn Sie keine Auffüllung angeben, werden die Tabellenzellen ohne Auffüllung angezeigt.
Verwenden Sie zum Festlegen der Auffüllung die CSS-Padding Eigenschaft:
Beispeil:
th, td {
padding: 15px;
}
HTML-Tabelle - Überschriften nach links ausrichten
Standardmäßig sind Tabellenüberschriften fett und zentriert.
Verwenden Sie die CSS-Eigenschaft text-align, um die Tabellenüberschriften nach links auszurichten:
Beispiel:
th {
text-align: left;
}
HTML-Tabelle - Hinzufügen von Rahmenabständen
Der Randabstand gibt den Abstand zwischen den Zellen an.
Verwenden Sie die CSS-Eigenschaft border-spacing, um den Rahmenabstand für eine Tabelle festzulegen:
Beispiel:
table {
border-spacing: 5px;
}