HTML/Tabellen/Beschriftung

Aus SELFHTML-Wiki
< HTML‎ | Tabellen(Weitergeleitet von Headers)
Wechseln zu: Navigation, Suche

Der folgende Artikel beschäftigt sich mit der Ausgabe von HTML-Tabellen in nicht-visuellen Medien wie Sprachausgaben für Sehbehinderte. Dies stellt ein nicht minderes Problem dar, da Tabellen über die Gleichzeitigkeit verschiedener Informationen wirken und über Medien, welche Informationen nacheinander ausgeben, nicht darstellbar sind. Das W3-Konsortium hat verschiedene Attribute entwickelt, welche diese Probleme lösen helfen sollen. Als Erstellerin oder Ersteller einer eigenen Webseite sollten Sie diese Problematik mit bedenken und beachten, um Ihre Website auch sehbehinderten Menschen zugänglich bzw. verständlich zu machen.

Das wichtigste Element sind an dieser Stelle verschiedene Zusammenfassungen, Erläuterungen oder Referenzen, welche die Informationen sprachlich verständlich und übersichtlicher machen.

Zusammenfassung des Tabelleninhalts

Caption als Tabellenüberschrift

Durch das caption-Element wird eine Tabellenüberschrift definiert. Die Deklaration muss unmittelbar nach dem einleitenden <table>-Tag erfolgen. Obwohl eine Tabelle mehrere Tabellenkörper (tbody) besitzen darf, ist es nicht erlaubt, mehrere Tabellenüberschriften zu verwenden. caption bedeutet so viel wie Überschrift oder Beschriftung.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Tabellenbeschriftung</title> <style> table, th, td {border: 1px solid; border-collapse: collapse;} </style> </head> <body> <table> <caption>Verzeichnis der Teilnehmer</caption> <thead> <tr> <th>Nr.</th> <th>Name</th> <th>Vorname</th> <th>Wohnort</th> </tr> </thead> <tfoot> <tr> <th>Nr.</th> <th>Name</th> <th>Vorname</th> <th>Wohnort</th> </tr> </tfoot> <tbody> <tr> <th>1</th> <td>Müller</td> <td>Max</td> <td>Minden</td> </tr> <tr> <th>2</th> <td>Siegert</td> <td>Siegfried</td> <td>Siegen</td> </tr> </tbody> </table> </body> </html>
ansehen …

Die Gestaltung und Positionierung der Tabellenüberschrift erfolgt via CSS.


Hauptartikel: HTML/Tabellen/Gestaltung mit CSS#Überschrift_gestalten

Figcaption als Tabellenuntertitel

Mit dem Element figure haben sie ein perfektes Elternelement für ein figcaption als Tabellenuntertitel.

Beispiel 
<figure>
  <table>
    <th>Name</th><th>Dienstagrad</th><th>Standort</th>
    ....
  </table>
  <figcaption>Zusammenfassung der Tabelle</figcaption>
</figure>

obsolet: summary-Attribut

Achtung.svg Mit dem summary-Attribut konnten Sie das Thema der Tabelle erläutern, um Tabellen in Sprachausgabesystemen besser verständlich darzustellen.

Beispiel 
<table ... summary="Zusammenfassung der Tabelle">
Beachten Sie: In HTML5 ist das summary-Attribut deprecated.[1]
Empfehlung: Verwenden Sie das dafür semantisch passende Element caption oder schließen Sie Ihre Tabelle in ein figure-Element ein.

Zusammenfassung des Zelleninhalts

Um den Inhalt als solchen besser wiedergeben zu können, wurde außerdem das Attribut abbr [= abbreviated (englisch für verkürzt)] entwickelt. Es ist sowohl für Überschriftszellen th als auch für Inhaltszellen td verwendbar.

Beispiel 
<table>
  <tr>
    <th abbr="Erläuterung der Zelle">Inhalt der Zelle </th>
  </tr>
</table>

Gerade bei Einbindung in Kopfzellen kann Sehbehinderten sehr gut ein Überblick über den Inhalt der Zeile gegeben bzw. einzelne Zellen erläutert werden, sodass sie, bei guter Umsetzung, keine Probleme mit der Wahrnehmung dieser haben. Außerdem können aus den Stichpunkten der Zellennamen vollständige Sätze geformt werden wie zum Beispiel:

Beispiel 
<table>
  <tr>
    <th abbr="In dieser">Tabellenzeile</th>
  </tr>
  <tr>
    <td abbr="befinden sich viele">Zellen</td>
  </tr>
</table>
Beachten Sie: Der Gebrauch des abbr-Attributs für Tabellenzellen ist in HTML5 deprecated; in Tabellenköpfen (th) jedoch weiter erlaubt.

Referenzen herstellen

Auch Referenzen sind eine sehr gute Hilfe. Gerade bei größeren Tabellen kann einem schnell der Überblick verloren gehen, weil man die Reihenfolge der Spalten vergisst; spätestens bei der 10. Zeile weiß wohl kaum einer mehr, welche Überschriften oben standen. Daher kann es hilfreich sein, diese mit den Zellen zu referenzieren. Dies geschieht mit den Universalattributen id und dem headers-Attribut.

Beispiel 
 <table>
  <tr>
    <th id="name">Name</th>
    <th id="email">E-Mail</th>
    <th id="phone">Phone</th>
    <th id="addr">Address</th>
  </tr>
  <tr>
    <td headers="name">Max Mustermann</td>
    <td headers="email">mustermann@example.com</td>
    <td headers="phone">+0123-456789</td>
    <td headers="addr">Schulstr. 1, 12345 Musterdorf</td>
  </tr>
</table>

Aus diesem Code kann ein Sprachausgabesystem nun einen Satz generieren wie: "E-Mail ist gleich mustermann@example.com".

scope

Das Attribute scope kann ebenfalls einen Bezug zwischen Kopf- und Datenzellen herstellen. Es identifiziert, ob eine Zelle ein Kopf für eine Spalte, Reihe oder Gruppe davon ist.

Folgende Werte sind möglich:

  • col: Spalte
  • row: Zeile
  • colgroup: Spaltengruppe
  • rowgroup: Zeilengruppe
Beispiel ansehen …
<thead>
  <tr>
    <td rowspan="2"></td>
    <th scope="col" rowspan="2">Chrome</th>
    <th scope="col" rowspan="2">Firefox</th>
    <th scope="colgroup" colspan="3">Internet Explorer</th>
    <th scope="col" rowspan="2">Edge</th>
    <th scope="col" rowspan="2">Opera</th>
    <th scope="col" rowspan="2">Safari</th>
  </tr>
  <tr>
    <th scope="col">IE 8</th>
    <th scope="col">IE 9</th>            
    <th scope="col">IE 10-11</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Juli</th>
    <td>25,7%</td>
    <td>30,4%</td>
    <td>0,9%</td>
    <td>1,3%</td>
    <td>8,3%</td>
    <td>0,1%</td>            
    <td>1,5%</td>
    <td>22,6%</td>
  </tr>
  ...
Jede Spalte hat eine Kopfzelle (th) im Tabellenkopf (thead), die mit scope="col" der Spalte zugeordnet wird. Analog dazu dient die linke Spalte mit scope="row" als Tabellenkopf für die einzelnen Reihen.
ansehen …

Weblinks

  1. ↑ W3C: table-descriptions-techniques

Referenz: caption

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tabellen/Beschriftung&oldid=86032#Referenzen_herstellen“