Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Tabellen und nicht-visuelle Medien

Informationsseite

nach unten Allgemeines
nach unten Zusammenfassung des Tabelleninhalts
nach unten Kurzbeschreibung für Zellen definieren
nach unten Kopfzellen in Zellen referenzieren
nach unten Tabellen-Kategorien definieren

 nach unten 

Allgemeines

Die folgenden Beschreibungen sind für die Ausgabe von Tabellen auf nicht-visuellen Medien gedacht. Vor allem bei Sprachausgabesystemen, die HTML-Dateien für Sehbehinderte ausgeben, stellen Tabellen normalerweise ein Problem dar. Denn die optische Eindeutigkeit einer Tabelle am Bildschirm oder auf Papier lässt sich in einem Medium, das Daten hintereinander ausgeben muss, nicht abbilden. Was beispielsweise in der optischen Abbildung einer Tabelle durch Gitternetzlinien ganz einfach ist, ist bei der Sprachausgabe ein echtes Problem: wie soll akustisch verdeutlicht werden, wo eine Zelle beginnt und endet, und zu welcher Spalte oder Zeile sie gehört? Das W3-Konsortium hat zu diesem Zweck eine Reihe von Attributen in HTML eingeführt, die speziell solche Probleme lösen helfen sollen.

nach obennach unten

HTML 4.0XHTML 1.0Mozilla Firefox 1 Zusammenfassung des Tabelleninhalts

Sie können einen zusammenfassenden Kurztext für die Tabelle definieren. Ein Sprachausgabesystem könnte diesen Text als Einleitung zur Tabelle ausgeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kurzbeschreibung des Tabelleninhalts</title>
</head>
<body>

<table border="1" summary="Die folgende Tabelle ordnet St&auml;dten typische Begriffe zu.">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

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

Beachten Sie:

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

nach obennach unten

HTML 4.0XHTML 1.0 Kurzbeschreibung für Zellen definieren

Sie können für einzelne Tabellenzellen eine Kurzbeschreibung im einleitenden Tag der Zelle definieren. Ein Sprachausgabesystem könnte diesen Kurztext vor dem eigentlichen Inhalt ausgeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kurzbeschreibung f&uuml;r Zellen definieren</title>
</head>
<body>

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td abbr="Es folgen Infos zu Berlin">Hier eine Menge Inhalt</td>
    <td abbr="Es folgen Infos zu Hamburg">Hier eine Menge Inhalt</td>
    <td abbr="Es folgen Infos zu München">Hier eine Menge Inhalt</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Mit dem Attribut abbr im einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle (<th>) können Sie eine Kurzinformation zu der entsprechenden Zelle voranschicken (abbr = abbreviated = verkürzt).

nach obennach unten

HTML 4.0XHTML 1.0 Kopfzellen in Zellen referenzieren

Für nicht-visuelle Ausgabemedien, etwa für Sprachausgabesysteme, können Sie bestimmen, dass bei der Ausgabe einer Datenzelle ein expliziter Bezug zu einer oder mehreren Kopfzellen hergestellt wird. Das System könnte den Inhalt der Kopfzelle(n) dann bei der Datenzelle wiederholen. Ansonsten ist es bei der Sprachausgabe sehr schwer, den Bezug zwischen einer Datenzelle und den zugehörigen Kopfzellen herzustellen, da die optische Eindeutigkeit einer Tabelle dort nicht vorhanden ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kopfzellen in Zellen referenzieren</title>
</head>
<body>

<table border="1">
  <tr>
    <th id="Stadt_1">Berlin</th>
    <th id="Stadt_2">Hamburg</th>
    <th id="Stadt_3">M&uuml;nchen</th>
  </tr>
  <tr>
    <td headers="Stadt_1">Buletten</td>
    <td headers="Stadt_2">Frikadellen</td>
    <td headers="Stadt_3">Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Um Bezüge zwischen Datenzellen und Kopfzellen nach dem obigen Beispiel herzustellen, müssen Sie für die Kopfzellen mit dem Kapitel Universalattribut id individuelle Namen vergeben (im obigen Beispiel Stadt_1, Stadt_2 und Stadt_3). Innerhalb einer Datenzelle können Sie dann mit dem Attribut headers auf Kopfzellen Bezug nehmen (headers = Kopfzellen). Im obigen Beispiel könnte ein Sprachausgabesystem durch den Bezug also etwa ausgeben: "Berlin ist gleich Bulletten".

Falls Sie eine Kreuztabelle haben, bei der zwei Kopfzellen zu einer Datenzelle gehören, können Sie hinter headers auch weitere id-Namen von Kopfzellen angeben. Trennen Sie die id-Namen durch Leerzeichen. Die Angabe hinter headers sollte in jedem Fall in Anführungszeichen stehen.

Der umgekehrte Weg - nämlich das Wiederholen der Kopfzelleninformation in jeder zugehörigen Datenzelle zu wiederholen - ist ebenfalls möglich:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kopfzelleninformation in jeder zugehörigen Datenzelle wiederholen</title>
</head>
<body>

<table border="1">
  <tr>
    <th scope="col">Berlin</th>
    <th scope="col">Hamburg</th>
    <th scope="col">M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Um Bezüge zwischen Datenzellen und Kopfzellen nach dem obigen Beispiel herzustellen, müssen Sie in den Kopfzellen das Attribut scope notieren (scope = Geltungsbereich). Dabei sind folgende Angaben erlaubt:
scope="col" ist für Spaltenüberschriften gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen dieser Spalte wiederholt wird (col = Spalte).
scope="row" ist für Zeilenüberschriften (z.B. links als erste Tabellenspalte) gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen dieser Zeile wiederholt wird (row = Zeile).
scope="colgroup" ist für Spaltenüberschriften von Spaltengruppen gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen aller Spalten der Spaltengruppe wiederholt wird (colgroup = Spaltengruppe). Voraussetzung ist, dass Seite Spaltengruppen mit Hilfe von <colgroup> vordefiniert werden.
scope="rowgroup" ist für Spaltenüberschriften von Zeilengruppen gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen aller Zeilen der Zeilengruppe wiederholt wird (rowgroup = Zeilengruppe). Voraussetzung ist, dass Zeilengruppen in Form von Seite Kopf, Körper, Fuß definiert werden.

nach obennach unten

HTML 4.0XHTML 1.0 Tabellen-Kategorien definieren

Bei komplexeren Tabellen können Sie gemeinsame Kategoriennamen für Zellen vergeben. Dazu eine Grafik zur Veranschaulichung (das Beispiel stammt ursprünglich vom W3-Konsortium).

Tabelle mit Kategorien

In einem interaktiven Sprachausgabe-/Sprachbefehlssystem könnte ein Anwender zu einer solchen Tabelle etwa Fragen stellen wie solche:
wie viel habe ich insgesamt für Speisen ausgegeben?
wie viel habe ich am 13.8.1998 für Speisen ausgegeben?
wie viel habe ich in Hamburg insgesamt ausgegeben?

Um zu etwa zu entscheiden, wie viel am 13.08.1998 für Speisen ausgegeben wurden, muss der Computer wissen, welche Zellen zum Typ "Datum" gehören, und welche zum Typ "Speisen". Solche Kategoriennamen können Sie für Tabellenzellen in HTML vergeben.

Beispiel (nur Details):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<td id="a7" axis="Datum">12.08.98</td>
<td headers="a6 a7 a2">37.74</td>
<td headers="a6 a7 a3">112.00</td>
<td headers="a6 a7 a4">45.00</td>
<td></td>

Erläuterung:

Das Beispiel nur Definition einiger Kopfzellen (vergleiche Grafik weiter oben). Mit id erhalten die Zellen unterschiedliche individuelle Namen, im Beispiel a4 und a5. Das ist für die spätere nach oben Referenzierung wichtig. Ferner erhalten die Zellen aber auch noch einen gemeinsamen Kategoriennamen. Solche Kategoriennamen können Sie mit dem Attribut axis vergeben (axis = Achse).

Durch die Kategoriennamen hat ein elektronisches System alle Informationen, um Fragen von der Art "wie viel habe ich am Datum=13.8.98 für Ausgaben=Speisen ausgegeben?" zu beantworten.

 nach oben
weiter Seite Verweise definieren und gestalten
zurück Seite Tabellen als Mittel für Web-Seiten-Layouts
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/tabellen/nicht_visuell.htm