Die Speisekarte ist die nächste Unterseite, die wir anlegen werden.

Beim Blick auf den Entwurf (siehe Abbildung 8.2) drängt sich keine bestimmte Art der Auszeichnung auf. Was ist auf dem Screenshot zu sehen? Überschriften, Absätze und Listen? Aber welche Art von Listen? Vielleicht Definitionslisten mit dem Gericht und dessen Beschreibung als Definitionsterm und dem Preis als Definitionsbeschreibung? Eher nicht. Oder vielleicht nur mit dem Gericht als Definitionsterm? Dann müssten wir die Beschreibung und den Preis im dd-Element unterbringen, aber wie zeichnen wir diese dann aus? Als Tabelle?

Bleiben wir einmal bei der Tabelle. Können wir die gesamte Speisekarte nicht vielleicht mittels einiger Tabellen auszeichnen? Die Gerichte in der linken Spalte und deren Preise in der rechten? Probieren wir es aus:

<table>
  <tr>
    <td>Knoblauchbrot<br />
      frisch aus dem Ofen</td>
    <td>1,80 €</td>
  </tr>
  <tr>
    <td>Hausgemachte Tomaten-Cremesuppe<br />
      mit Knoblauchcroutons</td>
    <td>2,80 €</td>
  </tr>
  <!-- weitere Gerichte -->
</table>

Das könnte funktionieren. Auch die Überschriften bekommen wir bequem unter:

<table>
  <caption>Vorspeisen und Suppen</caption>
  <tr>
    <td>Knoblauchbrot<br />
      frisch aus dem Ofen</td>
    <td>1,80 €</td>
  </tr>
  <tr>
    <td>Hausgemachte Tomaten-Cremesuppe<br />
      mit Knoblauchcroutons</td>
    <td>2,80 €</td>
  </tr>
  <!-- weitere Gerichte -->
</table>

Fehlen noch zwei Kleinigkeiten:

• Im Entwurf ist der Name der Gerichte größer und fetter als gewöhnlicher Fließtext und zudem in einer anderen Farbe dargestellt. Ich denke, hinter dieser Betonung steckt auch eine semantische Bedeutung. Wir sollten die Namen der Gerichte mit em oder strong auszeichnen. Ich verwende in solchen Fällen meistens strong (stark betont), obwohl em (betont) vielleicht die bessere Alternative wäre.
• Wir sollten für alle Tabellen der Speisekarte eine gemeinsame Klasse vergeben, um sie von anderen Tabellen unterscheiden und gezielt formatieren zu können. Aus demselben Grund sollten wir die Preiszellen mit einer Klasse versehen. Die Preise sehen übrigens genau so aus wie die Namen der Gerichte, allerdings gibt es keinen semantischen Grund, sie ebenfalls mit em oder strong auszuzeichnen.

<table class="speisekarte">
  <caption>Vorspeisen und Suppen</caption>
  <tr>
    <td><strong>Knoblauchbrot</strong><br />
      frisch aus dem Ofen</td>
    <td class="price">1,80 €</td>
  </tr>
  <tr>
    <td><strong>Hausgemachte Tomaten-Cremesuppe</strong><br />
      mit Knoblauchcroutons</td>
    <td class="price">2,80 €</td>
  </tr>
  <!-- weitere Gerichte -->
</table>

Die Auszeichnung mittels Tabellen funktioniert. Sie ist praktikabel, einfach und semantisch sauber. Wir können den Rest der Speisekarte auf dieselbe Art und Weise auszeichnen. Ich führe den Quelltext an dieser Stelle nicht komplett auf, weil sich der Schritt für Schritt ausgezeichnete Quelltext nur noch wiederholt, aber Sie können sich die speisekarte.html im Downloadpaket anschauen.

Abb. 8.35: Die Speisekarte sieht unformatiert sehr unübersichtlich aus

Unformatierte Tabellen sind nicht sonderlich übersichtlich: Die Inhalte der Zellen kleben ohne Abstand oder Rahmen aneinander. Den Kopf schütteln müssen wir über die standardmäßige Darstellung der caption-Elemente: Tabellenüberschriften sehen im Browser so aus wie horizontal zentrierter Quelltext ohne Abstände oder typografische Besonderheiten.

Fangen wir mit den Tabellenüberschriften an. Wir erweitern den Block »Regeln für allgemeine Elemente« um eine Regel für caption. Hinter den Regeln für Anker ist ein guter Platz dafür. Die Tabellenüberschriften sollen so aussehen wie Überschriften zweiter Ordnung (h2), also übernehmen wir alle Regeln, ergänzen sie und passen sie an.

/**
* @section Tabellen
*/
caption {
  color: #3C6331;
  background-color: white;
  font-size: 1.5em;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0;
  margin: 1.5em 0 .5em 0;
}

Anschließend nehmen wir Formatierungen speziell für Tabellen der Klasse speisekarte vor. Die Regeln schreiben wir an das Ende des Stylesheets innerhalb eines neuen Blocks »Regeln für spezielle Elemente«. Tragen wir zunächst einmal zusammen, was überhaupt zu tun ist:

• Wir müssen alle Tabellen auf die volle Breite (100%) bringen.
• Jede Zeile wird unterstrichen durch eine helle, dicke, gepunktete Linie. Mit der Eigenschaft border kommen wir an dieser Stelle nicht weiter, aber wir können ein passendes Hintergrundbild erstellen und einbinden.
• Alle Tabellenzellen benötigen ein wenig Platz, den wir über innere Abstände realisieren.
• Die Namen der Gerichte und der Preis benötigen einige Deklarationen zur Schriftformatierung: Farbe, Größe, Gewicht und Großschreibung.
• Als Letztes passen wir die vertikale Ausrichtung des Preises an und sorgen dafür, dass er nicht umbricht.

/**
* Regeln für spezielle Elemente
*
* @section Speisekarte
*/
table.speisekarte { width: 100%; }

.speisekarte tr {
  color: inherit;
  background: url(images/speisekarte_bg.gif) bottom left repeat-x;
}
.speisekarte td,
.speisekarte th { padding: 10px 5px 8px 0; }

.speisekarte td strong,
.speisekarte td.price {
  color: #cbb8ba;
  background-color: transparent;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
}
.speisekarte td.price {
  vertical-align: bottom;
  white-space: nowrap;
}

Weiter geht es mit den Öffnungszeiten.