Übung: Öffnungszeiten vorbereiten
- Bitte bereiten Sie das Dokument
oeffnungszeiten.htmlso vor, dass wir uns um die Auszeichnung des Contents kümmern können. Erstellen Sie das Dokument auf Basis einer fertigen Unterseite, passen Sie Titel sowie Navigation an und leeren Sie das#content-Element. - Werfen Sie einen Blick auf die Inhalte (siehe Abbildung 8.3) und überlegen Sie sich, wie Sie die Tabelle auszeichnen würden. Falls nötig, rufen Sie sich Kapitel 5.7 noch einmal in Erinnerung.
Die Überschrift zeichnen wir mit
h1 aus, den darauf folgenden
Absatz mit p. Interessant ist die
Auszeichnung der Tabelle, die wir gemeinsam Schritt für
Schritt aufbauen.
Beginnen wir mit dem table-Element. Eine
kurze Beschreibung des Tabellenaufbaus mittels summary ergibt
Sinn. Darüber hinaus verwenden wir vorübergehend das
Attribut border, um die Aufteilung in
Zeilen und Spalten während der Auszeichnung besser sehen zu
können. Später werden wir das Attribut wieder
entfernen.
<table summary="Öffnungszeiten der Kochbar und des Biergartens, jeweils mittags und abends" id="oeffnungszeiten" border="1"> <!-- Tabelleninhalt --> </table>
Die Tabellenüberschrift zeichnen wir
mittels caption aus.
<table summary="Öffnungszeiten der Kochbar und des Biergartens, jeweils mittags und abends" id="oeffnungszeiten" border="1"> <caption>Öffnungszeiten der Kochbar</caption> <!-- Tabelleninhalt --> </table>
Nun folgt ein kleiner Trick, der uns die
weitere Arbeit enorm vereinfachen wird: Wir bauen das
Gitterraster auf. Wir zählen die Zeilen und Spalten und
fügen entsprechend viele tr- und td-Elemente ein. Es
gibt sechs Zeilen; in der letzten Spalte sehen wir das am besten.
Und wir zählen vier Spalten, am einfachsten zu sehen anhand
der beiden mittleren Zeilen. Wir bauen also ein 4-x-6-Raster
auf:
<table summary="Öffnungszeiten der Kochbar und des Biergartens, jeweils mittags und abends" id="oeffnungszeiten" border="1">
<caption>Öffnungszeiten der Kochbar</caption>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Befassen wir uns nun mit Zeilengruppen, den
Elementen thead, tfoot und
tbody. Können Sie sehen, ob
und wie Sie die Zeilen aufteilen können? Ich denke, wir
sollten so vorgehen, wie in Abbildung 8.36 zu sehen:
- Die umrahmten Zeilen sind der Tabellenrumpf, denn sie enthalten die eigentlichen Daten.
- Die Zeilen darüber enthalten nur Überschriften und bilden den Tabellenkopf.
- In den Zeilen darunter, die wir im Tabellenfuß zusammenfassen können, stehen Metainformationen.
Abb. 8.36: Aufteilung der Zeilengruppen
Wir teilen die Spalten folglich in drei
Gruppen zu je zwei Zeilen auf. Bitte beachten Sie die nicht
intuitive Reihenfolge der Zeilengruppen: zunächst
thead, dann schon tfoot, am Ende
tbody.
<table summary="Öffnungszeiten der Kochbar und des Biergartens, jeweils mittags und abends" id="oeffnungszeiten" border="1">
<caption>Öffnungszeiten der Kochbar</caption>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Bevor wir uns die Inhalte näher
anschauen, kümmern wir uns zunächst um die
Tabellenstruktur und verbinden mittels der Attribute colspan und
rowspan alle Zellen so, wie es der
Entwurf verlangt. Achten Sie darauf, dass anschließend Ihr
Gitterraster noch vollständig und korrekt ist –
schnell vergisst man, obsolet gewordene Zellen zu entfernen.
<table summary="Öffnungszeiten der Kochbar und des Biergartens, jeweils mittags und abends" id="oeffnungszeiten" border="1">
<caption>Öffnungszeiten der Kochbar</caption>
<thead>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Nun können wir die Zellen befüllen. Gleichzeitig sollten wir uns Gedanken dazu machen, welche Zellen Tabellenkopf- und welche Datenzellen sind. Stimmen Sie mit mir überein, dass alle hellgrauen und die beiden leeren Zellen Datenzellen sind, während »Tageszeiten«, »mittags«, »abends«, »Betrieb«, »Kochbar« und »Biergarten« Kopfzellen sind?
<table summary="Öffnungszeiten der Kochbar und des Biergartens, jeweils mittags und abends" id="oeffnungszeiten" border="1">
<caption>Öffnungszeiten der Kochbar</caption>
<thead>
<tr>
<td colspan="2" rowspan="2"></td>
<th colspan="2">Tageszeiten</th>
</tr>
<tr>
<th>mittags</th>
<th>abends</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">Uhrzeiten in MESZ</td>
</tr>
<tr>
<td colspan="4">Öffnungszeiten gelten nur im Sommer</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">Betrieb</th>
<th>Kochbar</th>
<td>12:00–15:00</td>
<td>18:00–22:00</td>
</tr>
<tr>
<th>Biergarten</th>
<td>–</td>
<td>18:00–01:00</td>
</tr>
</tbody>
</table>
Wir sind mit der Auszeichnung der Tabelle vorerst fertig. Wie Abbildung 8.37 zeigt, ist unser Zwischenergebnis allerdings weder wirklich übersichtlich noch hübsch anzuschauen. Das ändern wir nun durch einige CSS-Regeln.
Für die Tabelle der Öffnungszeiten deklarieren wir zunächst das Modell der zusammenfallenden Rahmen, geben an, dass Browser leere Tabellenzellen anzeigen sollen, und entfernen den Rahmen.
/**
* @section Öffnungszeiten
*/
table#oeffnungszeiten {
border-collapse: collapse;
empty-cells: show;
border: 0;
}
Anschließend nehmen wir einige Zellendeklarationen vor. Wir deklarieren einen 4 px breiten Rahmen, die Schrift- und Hintergrundfarbe sowie innere Abstände.
#oeffnungszeiten td,
#oeffnungszeiten th {
border: 4px solid white;
color: #5D5D5D;
background-color: #F5F4F8;
padding: .5em 1em;
}
Beginnen wir mit den Feinheiten. Elemente vom
Typ th sehen im Tabellenkopf anders
aus als im Tabellenrumpf; die Schrift im Tabellenrumpf ist
kleiner als im Rest der Tabelle. Über Kontextselektoren
können wir die Zellen in den unterschiedlichen Bereichen
ansprechen und die entsprechenden Deklarationen vornehmen. Zudem
machen wir Gebrauch von Attributselektoren, um die
äußeren Überschriftenzellen, die sich über
zwei Spalten oder Zeilen erstrecken, von den inneren
Überschriftenzellen zu unterscheiden.
#oeffnungszeiten thead td,
#oeffnungszeiten thead th {
color: #5D5D5D;
background-color: #E8E7EE;
text-align: center;
}
#oeffnungszeiten thead th[colspan="2"] {
color: white;
background-color: #CBB8BA;
font-weight: bold;
}
#oeffnungszeiten tbody th {
color: #5D5D5D;
background-color: #e8dbc5;
text-align: center;
}
#oeffnungszeiten tbody th[rowspan="2"] {
color: white;
background-color: #E8AD47;
font-weight: bold;
}
#oeffnungszeiten tfoot td {
text-align: center;
font-size: .9em;
}
Damit haben wir die Formatierung der Seite »Öffnungszeiten« abgeschlossen.
Übung: Öffnungszeiten
- Fügen Sie die Inhalte ein und speichern Sie.
- Ergänzen Sie Ihre
default.css. - Speichern Sie und betrachten Sie die Öffnungszeiten im Browser. Die Tabelle sollte nun so aussehen wie der Entwurf.
- Validieren Sie das Markup und Ihr Stylesheet, um sicherzustellen, dass Sie keine Fehler gemacht haben.