XHTML, CSS
Vorbereitungen
PowerHelpDesk
XHTML Workshop: Kapitel 3
Das heutige Kapitel dreht sich vollständig um Tabellen. In diesem Kapitel werde ich viel auf das selfHTML verlinken, da Tabellen sehr umfangreich sind. Allerdings brauchen wir im ersten Schritt für eine barrierefreie Webseite nur wenige Kenntnisse über Tabellen. Für umfangreiche Statistiken und reale Tabellen-Daten ist das Verständnis natürlich wichtig. Deswegen werde ich gegen Ende des Workshops erneut auf Tabellen eingehen und dann alle Möglichkeiten und alle Besonderheiten der Barrierefreiheit erklären.
Tabellen
Tabellen sind ein wichtiger Bestandteil von HTML. Sie erlauben strukturierte Darstellung von Datenbank-Tabellen oder statistischen Daten. Sie werden auch genutzt, um Text und Grafik attraktiver auf dem Bildschirm zu verteilen. Obwohl Tabellen natürlich vornehmlich zur Darstellung tabellarischer Daten geschaffen wurden, sind sie in der heutigen Praxis des WebDesigns vor allem als Grundgestaltungsmittel für Seitenlayouts nicht mehr wegzudenken.
Tabellen-Layouts zu benutzen ist allerdings falsch, wegen der Barrierefreiheit. Deswegen werden in der letzten Zeit diese Layouts wieder abgeschafft.
Sehr zu empfehlen ist folgender, kurzweiliger Artikel, der unbedingt gelesen werden sollte: Warum Layout mit Tabellen dumm ist.
Tabellen werden in HTML Zeile für Zeile (<tr></tr>) aufgebaut. Jede Zeile besteht aus mehreren Zellen (<td></td>). Die hier dargestellte Grafik verdeutlicht das Prinzip.
Tabellen und Tags wie "<table>", werden perfekt unter selfHTML: Tabellen definieren erläutert. Dieses Kapitel solltet Ihr euch unbedingt durchlesen. Optional ist das Kapitel selfHTML: Spalten vordefinieren, da es vordefinierte Breiten von Tabellen behandelt. Wir werden den Tag "<colgroup>" allerdings erst einmal nicht verwenden.
Obwohl es zu Tabellen eine Menge zu lernen gibt und tabellarische Daten auch häufig sind, ist es jetzt noch nicht ratsam, sich alles zu diesem Thema durchzulesen. Das barrierefreie Design von Tabellen wird zu einem späteren Zeitpunkt in diesem Workshop behandelt.
Eine ganz einfach Tabelle zu entwerfen ist nicht schwer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>einfache Tabelle</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
<tr>
<td>Claus</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Das Attribut "border" (für den Tag "<table>") erzeugt Gitternetzlinien. Diese kann man mit dem Wert "0" auch ausschalten und eine sogenannte "blinde Tabelle" erzeugen.
Tabellen mit CSS
Im barrierefreien WebDesign wird viel mit CSS gemacht. Bietet es sich deswegen an, auch die Tabellen mit CSS zu formatieren? Eigentlich ja. Man kann mit CSS eine Tabelle genauso darstellen, wie es die Attribute (der Tags) - border, cellpadding, etc. - können, aber mit den Attributen kann
- die Formatierung schneller erfolgen (gerade bei ausgelagerten CSS-Dateien).
- jede Tabelle ohne viel Aufwand ein seperates Design bekommen. Das ist oft wünschenswert.
Gegen ein solches Vorgehen spricht allerdings:
- Einheitliches Layout: Über eine CSS-Formatierung sieht jede Tabelle gleich aus.
- Individuelle Gitternetzlinien (nur links, nur rechts, nur oben, etc.) sind über CSS viel einfacher zu realisieren.
Viele Tabellen-Attribute sind NICHT deprecated, das ist wichtig zu wissen. Es ist also dem WebDesigner selbst überlassen, ob er das eine oder das andere Verfahren nimmt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>einfache Tabelle</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
table
{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
<tr>
<td>Claus</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Diese Art CSS zu definieren haben wir in Kapitel 1 schon kennengelernt. Hier wird der Tag "<table>" global definiert. Alle Tabellen in dieser HTML-Datei würden eine durchgehende (solid), schwarze (black) und 1 Pixel (1px) starke Gitternetzlinie um die Tabelle herum haben. Die Darstellung der Gitternetzlinien für die Tabellenzellen entfällt. Deswegen ziehe ich das Attribut "border" an dieser Stelle dem CSS vor.
Ob man eine Tabelle über die Attribute oder CSS formatiert, würde ich von Fall zu Fall unterscheiden. Oft ist es so, dass eine globale Einstellung für eine Tabellenzelle (<td></td>) über CSS keinen Sinn macht, da unterschiedliche Breiten und Formatierungen benötigt werden. Dieses muss aber im Einzelfall entschieden werden.
Allgemeines zu CSS
Style Sheets in CSS bestehen aus Regeln. Jede Regel hat drei verschiedene Teile:
- Den Selektor (selector), der dem Browser mitteilt, welcher Tag von dieser Regel betroffen ist. Beispiel: "<table>"
- Die Eigenschaft (property) bestimmt den Teilbereich des Layouts, wie Schriftart, Abstände, Schriftgröße, etc. Beispiel: "border"
- Der Wert (value) enthält die Angabe, die Farbe, die Breite für die spezifizierte Eigenschaft. Beispiel: "1px solid black"
Wir werden später im Workshop noch lernen, dass nicht nur Tags als Selektor definiert werden können. Es sind auch eigene Definitionen möglich und sinnvoll.
CSS: Definitionen zusammenfassen
Wenn man (globale) Definitionen zusammenfassen möchte, braucht man die Selektoren nur mit einem Komma voneinander zu trennen.
<style type="text/css">
table, th, td
{
border: 1px solid black;
}
</style>
Diese Defintion legt fest, dass alle Elemente einer Tabelle mit Gitternetzlinien umgeben sein sollen.
Aufgabe 11
Verändert das Beispiel unter "CSS: Definitionen zusammenfassen", dass die Gitternetzlinie der
- "<table>" mit der Farbe rot
- "<th>" mit der Farbe blau
- "<td>" mit der Farbe grün
angezeigt wird.
Hinweis: Dazu müssen die Selektoren einzeln definiert werden.
Aufgabe 12
Das Attribut "border" erzeugt Gitternetzlinien für alle Tabellenzellen und die Tabelle selbst. Wie realisiert man dieses Attribut ausschließlich mit CSS?
Aufgabe 13
Erstellt eine Tabelle die 3 Spalten und 5 Zeilen enthält. Die Spalten sollen Angaben über
- Name
- Straße
- und Ort
enthalten.
Aufgabe 14
Erweitert die Webseite in Aufgabe 13 und bindet für den Selektor "table" im CSS die Breite einer Tabelle ein ("width: 100%;").
