HTML-Tabellen erstellen und stylen
Mit HTML können sie sehr einfach Tabellen erstellen und mithilfe von CSS designen. Wir führen Sie durch die ersten Schritte.
- Jan-Hendrik Eriksen
HTML-Tabellen bieten sich immer an, wenn man Daten in einer übersichtlichen Form darstellen möchte. Seien es Abfahrtszeiten, Spielergebnisse im Sport oder die Ergebnisse einer Umfrage. Mit Tabellen können Sie eine klare Struktur vorgeben. Wenn Sie dafür HTML verwenden, haben Sie den Vorteil, dass andere Ihre Arbeit ohne Probleme im Browser bewundern können.
Eine einfache Tabelle
Zunächst möchten wir Ihnen an einem kleinen Beispiel den Aufbau einer HTML Tabelle erläutern. Eine Tabelle besteht aus einer Kopfzeile, dem Tabellenkörper, also dem eigentlichen Inhalt, und einem Tabellenfuß. Kopf und Fuß sind dabei optional und müssen nicht verwendet werden. Der Körper ist allerdings das, worauf es wesentlich ankommt. Deshalb beschränken wir uns erstmal auf den Tabelleninhalt.
<table>
<tr> <td> Eintrag 1.1 </td> <td> Eintrag 1.2 </td>
<td> Eintrag 1.3 </td> </tr> <tr> <td> Eintrag 2.1 </td> <td> Eintrag 2.2 </td> <td> Eintrag 2.3 </td> </tr> <tr> <td> Eintrag 3.1 </td> <td> Eintrag 3.2 </td>
<td> Eintrag 3.3 </td> </tr></table>Als Erstes leitet man die Tabelle mit einem table-Element ein. Dies muss natürlich am Ende der Tabelle wieder geschlossen werden. Innerhalb dieses Elements befinden sich die Zeilen. Eine Tabellenzeile wird mit einem tr-Element umschlossen. Die eigentlichen Daten der Tabelle sind in td-Elemente eingebettet. Dies sind die einzelnen Zellen. Der obige Code würde in einem Browser zu folgendem Ergebnis führen:
Wie Sie sicher erkennen, wird die Tabelle zeilenweise von oben nach unten dargestellt. Leider ist die standardmäßige Darstellung nicht sonderlich ansprechend. Deshalb zeigen wir Ihnen natürlich noch mehr Möglichkeiten, Ihre Tabelle zu gestalten.
Tabellen mit Kopf und Fuß
Nun zeigen wir Ihnen, wie Sie Ihrer Tabelle eine Kopfzeile mit Spaltenüberschriften und eine Fußzeile verleihen. Kopf und Fuß unterscheiden sich nicht sonderlich vom Körper der Tabelle. Hier ist unsere erweiterte Beispieltabelle.
<table>
<tr>
<th> Überschrift Spalte 1 </th>
<th> Überschrift Spalte 2 </th>
<th> Überschrift Spalte 3 </th>
</tr>
<tr>
<td> Eintrag 1.1 </td>
<td> Eintrag 1.2 </td>
<td> Eintrag 1.3 </td>
</tr>
<tr>
<td> Eintrag 2.1 </td>
<td> Eintrag 2.2 </td>
<td> Eintrag 2.3 </td>
</tr>
<tr>
<td> Eintrag 3.1 </td>
<td> Eintrag 3.2 </td>
<td> Eintrag 3.3 </td>
</tr>
<tr>
<td colspan="3"> Diese Fußzeile erstreckt sich über die ganze Tabelle. </td>
</tr>
</table>td-Elements ein th-Element verwendet, um zu signalisieren, dass es sich um ein Kopfelement handelt. Die Tabellenüberschrift wird vom Browser häufig anders, zum Beispiel mit fetter Schrift, dargestellt als die einzelnen Einträge. Die Fußzeile hingegen ist eine einzelne Tabellenzelle mit dem Attribut colspan="3". Das bedeutet, dass diese Zelle so viel Platz einimmt, wie drei horizontale Zellen - anders gesagt - die Zelle füllt eine komplette Zeile aus. So können Sie Informationen, welche für die gesamte Tabelle gültig sind, sinnvoll unterbringen. Zwar sieht die Tabelle jetzt schon ein wenig übersichtlicher aus, aber wirklich schön ist sie trotzdem nicht.
Tabellen ansprechend gestalten
Nun wollen wir Ihnen anhand eines Beispiels zeigen, wie Sie Ihrer Beispieltabelle ein ansprechendes Äußeres verleihen können. Dazu können Sie natürlich CSS benutzen. Lagern Sie Ihre Styles in einem Stylesheet aus und geben Sie Ihrer Tabelle ein id-Attribut, um sie im Stylesheet referenzieren zu können.
<link rel="stylesheet" type="text/css" href="styles.css">
<table id="Tabelle1">
<tr>
<th> Überschrift Spalte 1 </th>
<th> Überschrift Spalte 2 </th>
<th> Überschrift Spalte 3 </th>
</tr>
<tr>
<td> Eintrag 1.1 </td>
<td> Eintrag 1.2 </td>
<td> Eintrag 1.3 </td>
</tr>
<tr>
<td> Eintrag 2.1 </td>
<td> Eintrag 2.2 </td>
<td> Eintrag 2.3 </td>
</tr>
<tr>
<td> Eintrag 3.1 </td>
<td> Eintrag 3.2 </td>
<td> Eintrag 3.3 </td>
</tr>
<tr>
<td colspan="3"> Diese Fußzeile erstreckt sich über die ganze Tabelle. </td>
</tr>
</table
table#Tabelle1 {
border: 1px solid black;
}
table#Tabelle1 tr:nth-child(even) {
background-color: #eee
}
table#Tabelle1 tr:nth-child(odd) {
background-color: #fff;
}
table#Tabelle1 th {
color: white;
background-color: black;
padding: 4px 4px 2px 4px;
}
table#Tabelle1 td {
border: 1px solid black;
padding: 2px;
}
table#Tabelle1 tr:last-of-type td {
background-color: fffb99;
text-align: center;
}
Im ersten Block geben wir an, dass die gesamte Tabelle einen Rahmen besitzen soll. Im zweiten und dritten Block werden die Zeilen abwechselnd grau und weiß dargestellt, um sie besser unterscheiden zu können. Danach lassen wir die Überschriften als Kontrast zum eigentlichen Inhalt mit weißer Schrift auf schwarzem Hintergrund darstellen. Im vorletzten Schritt verleihen wir allen Tabellenzellen einen Rahmen. Zu guter Letzt wird der Text in der letzten Zeile, also der Fußzeile, zentriert und mit einem leichten Gelbton unterlegt. Sie können Ihr Design natürlich je nach Geschmack anpassen.
Hier können Sie das fertige Endergebnis sehen:
(jher)
