1. Startseite
2. CSS
3. Tabellen

Tabellen gestalten

Geordnete Datensätze werden häufig in Tabellen dargestellt.

Wir überarbeiten unsere HTML-Datei und erstellen eine Tabelle mit dem Spiel: Stadt, Land, Fluss.

<table>
 <tr><th>Stadt</th><th>Land</th><th>Fluss</th></tr>
 <tr><td>Essen</td><td>Elfenbeinküste</td><td>Ems</td></tr>
 <tr><td>Nürnberg</td><td>Niederlande</td><td>Nil</td></tr>
 <tr><td>Tübingen</td><td>Türkei</td><td>Themse</td></tr>
 <tr><td>Wien</td><td>Weißrussland</td><td>Weser</td></tr>
 <tr><td>Florenz</td><td>Finnland</td><td>Fulda</td></tr>
</table>

Nachdem die Tabelle in der HTML-Datei steht, werden wir etwas Abstand erzeugen und einen Schatten erstellen, um die Tabelle damit etwas abzuheben. Wir verwenden den bereits vorhandenen Selektor "table".

table {
 border-spacing: 10px;
 box-shadow: 2px 2px 5px black
}

Zeilen einfärben

Um den Leser der Tabelle einen höheren Lesekomfort zu bieten, werden wir die Zeilen etwas einfärben.

Als Erstes geben wir dem "table header" eine bläuliche Hintergrundfarbe, damit dieser etwas Aufmerksamkeit bekommt.

th {
 background-color: skyblue;
}

Als Nächstes werden wir den Text in den Tabellenzellen mittig ausrichten. Wir greifen wieder auf den bereits bestehenden Selektor "td" zu.

td {
 padding: 5px;
 text-align: center;
}

Die Tabellenzeilen werden wir wechselnd in 2 Farben darstellen lassen. Wir haben auch 2 Möglichkeiten, um das umzusetzen.

Entweder erstellen wir 2 Klassen, zum Beispiel die Klassen "gerade" und "ungerade". Diese Klassen könnten wir in HTML an den entsprechenden Elementen (<tr>) als Attribut vergeben und in CSS geben wir der entsprechenden Klasse eine gewünschte Formatierung. Die andere Möglichkeit ist der Zugriff auf die Pseudoklassen, die wir in CSS definieren können.

table tr:nth-child(odd) {
 background-color: khaki; /* Jede ungerade Zeile */
}
table tr:nth-child(even) {
 background-color: peachpuff; /* Jede gerade Zeile */
}

Die Werte "odd" und "even" erlauben den Zugriff auf das jeweils gerade oder ungerade nachfolgende Element.