Möchte man sehr viele Inhalte in einer Tabelle darstellen, kommt man mit den Gestaltungsmöglichkeiten in HTML sehr schnell an seine Grenzen. Zellen kleben förmlich zusammen, die Struktur wird unübersichtlich und allgemein lädt die Optik nicht gerade zum Verweilen ein.
Gut, dass CSS eine Reihe von Werkzeugen zur Verfügung stellt, mit denen man Tabellen aufpeppen kann. Zur Übung gehen wir von folgendem Grundgerüst aus:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
</style>
</head>
<body>
<table>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<th>Geburtsdatum</th>
</tr>
<tr>
<td>Andreas</td>
<td>Reiner</td>
<td>01.08.1976</td>
</tr>
<tr>
<td>Anita</td>
<td>Spiess</td>
<td>21.02.1982</td>
</tr>
<tr>
<td>Johannes</td>
<td>Bauer</td>
<td>14.11.1950</td>
</tr>
</table>
</body>
</html>
Aus Platzgründen wird hier nur noch der CSS-Code nachzulesen sein, den man am besten in ein Stylesheet oder den <style>-Bereich kopieren kann. Zum besseren Verständnis sind Sie dazu eingeladen, die untenstehenden Designvorschläge nach Belieben zu kombinieren und eigene Kreationen auszuprobieren.
Als Erstes werden wir etwas Abstand zwischen die einzelnen Zellen bringen und die Schrift vergrößern, um die Übersichtlichkeit zu verbessern. Die Property hierfür kennen wir bereits. Jetzt müssen wir nur noch die Zellen, also die <td> und <th> ansprechen:
Td, th {
Padding: 20px;
Min-width: 200px;
Font-size: 24px;
}
Beachten wir, wie hier mit einem CSS-Block gleich mehrere Elemente angesprochen werden. Wann immer man einen CSS-Block mehreren Selektoren der gleichen Art zuweisen möchte, trennt man einfach die Selektoren mit einem Beistrich. So spart man sich einiges an Schreibarbeit.
Ein Rahmen kann auch nicht schaden:
Td, th {
Padding: 20px;
Min-width: 200px;
Font-size: 24px;
Border: black solid 1px;
}
Wenn man es Benutzern noch einfacher machen möchte, die Übersicht zu behalten, kann man einzelne Zeilen durch Verwendung des hover-Events einfärben. Die dafür notwendige Property kennen wir bereits. Man kann diesen Effekt entweder zeilenweise aktivieren, indem man das <tr>-Tag anspricht. Oder für jede Zelle extra, indem man <td> bzw. <th> anspricht.
Zellenweise:
td:hover, th:hover {
background-color: #E6E6E6;
}
Zeilenweise:
tr:hover {
background-color: #E6E6E6;
}
Zu guter Letzt sehen wir uns noch an, wie wir den Text innerhalb unserer Tabelle ausrichten können. Hierfür gibt es die Property:
Text-align: [wert];
Zur Verfügung stehen die Werte:
- Left
- Center
- Right
Diese Methodik zur Ausrichtung von Text funktioniert übrigens nicht nur innerhalb von Tabellen, sondern auch in DIV-Boxen und anderen Elementen.