Sie können einen zusammenfassenden Text für die Tabelle definieren, der sich speziell an nicht-visuelle Ausgabesysteme richtet. Ein Sprachausgabesystem könnte diesen Text als Einleitung zur Tabelle ausgeben.

Beispiel

<table summary="Die folgende Tabelle ist dreispaltig mit 
einer Kopfzeile zu Beginn und zwei daran anschließenden Datenzeilen.">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>München</th>
  </tr>
  <tr>
    <td>Miljöh</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

Erläuterung

Mit dem Attribut summary können Sie im einleitenden <table>-Tag eine Zusammenfassung der Tabelle definieren (summary = Zusammenfassung).

Weitere Hinweise

Damit das summary-Attribut nicht mit der Bedeutung von Tabellenbeschriftungen konfligiert, sollte dieses Attribut nur Inhalte enthalten, die bei der optischen Präsentation unerheblich sind, für eine serielle Ausgabe jedoch wichtige Vorabinformationen bieten. So etwa wie im obigen Beispiel eine Vorankündigung der Anzahl der Spalten, Zeilen und Kopfzeilen der Tabelle. Zusammenfassende Texte zum Inhalt sollten dagegen in jedem Fall in einem caption-Element (Tabellenbeschriftung) notiert werden.

In Mozilla Firefox ist der Inhalt des summary-Attributs nach einem Klick auf die Tabelle über das Kontextmenü (Punkt Eigenschaften) zugänglich.

Dieses Attribut ist in HTML5 nicht mehr gültig. Statt dessen sollen neue semantische Elemente verwendet werden, wie im folgenden Beispiel gezeigt.

Beispiel in HTML5

<table>
  <caption>
    <strong>Charakteristik deutscher Städte</strong>
    <details>
      <summary style="font-size:80%; margin-top:10px;">Hilfe</summary>
      <p style="font-size:80%;margin-top: -5px;">
      Die folgende Tabelle ist dreispaltig mit einer Kopfzeile 
      zu Beginn und zwei daran anschließenden Datenzeilen.</p>
    </details>
  </caption>
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>München</th>
  </tr>
  <tr>
    <td>Miljöh</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

Erläuterung

In diesem Beispiel wird sich die Eigenschaft der Elemente details und summary zu Nutze gemacht. Bei einem Browser, der diese Elemente kennt, ist zunächst nur das summary-Element sichtbar – im Beispiel also das Wort Hilfe. Außerdem ist der Inhalt anklickbar. Durch Anklicken kann der Anwender den restlichen Inhalt des details-Elements anzeigen. Die Elemente details und summary werden in Kapitel Aufklappbare Details noch näher beschrieben.

Referenzinformationen

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.