Verwenden Sie den richtigen Code, um die Tabellenüberschriften den Daten für (komplexe) Datentabellen zuzuordnen

Tabellen, die nicht die Standardstruktur haben (Überschriften in der ersten Zeile, oder Spalte, Daten in den anderen Zellen), müssen zur Verdeutlichung der Zusammenhänge mit einem Zusatzcode versehen werden.

Die Verknüpfungen der Tabellen mit einer komplexen Struktur müssen jedoch ausdrücklich angegeben und im Quellcode gespeichert sein, damit die Assistenztechnologie die Informationen klar und logisch darstellen kann.

Wie wendet man das an?

Geben Sie an, ob die Überschrift zur Zeile oder Spalte gehört

Um den Status einer Zelle (d. h. eine Kopfzeile für eine Zeile oder eine Spalte oder eine Gruppe von Zeilen oder Spalten) zu definieren, verwenden Sie das Scope-Attribut in folgenden Fällen:

• Wenn Datenzellen (<td> Elemente) auch als Überschriften für eine Zeile, oder Spalte dienen.
• Für Tabellen mit Überschriften in der ersten Reihe, sowie in der ersten Spalte (horizontal und vertikal).
• Wenn sich die Überschriften nicht in der ersten Zeile oder Spalte, sondern in der zweiten, dritten oder nächsten Zeile oder Spalte befinden.

Beispiele: Scope-Attribut

Die folgende Tabelle enthält Überschriften sowohl in der ersten Zeile als auch in der ersten Spalte. Daher wird für die Spaltenüberschriften das Attribut scope verwendet.

<table>
<caption>Ort und Datum der Geburt der Teilnehmer</caption>
<tr>
<th></th>
<th scope="col">Wohnsitz</th>
<th scope="col">Geburtsdatum</th>
</tr>
<tr>
<th scope="row">Julian</th>
<td>Eupen</td>
<td>20-11-2002</td>
</tr>
<tr>
<th scope="row">Alexander</th>
<td>Sankt-Vith</td>
<td>10-02-1984</td>
</tr>
</table>

Komplexe Tabellen

Eine Tabelle gilt in folgenden Fällen als komplex:

• Wenn Spaltenüberschriften wiedererscheinen oder sich auf halbem Weg durch die Tabelle ändern;
• Wenn eine Zelle mit Daten durch 3 oder mehr Informationen definiert ist
  • Zum Beispiel in der nachstehenden Tabelle: Paris, 1 Zimmer, Chalet oder Villa

In diesem Fall müssen ID- oder Header-Attribute verwendet werden:

• - ID für Spaltenüberschriften (<th> Elemente)
• - Headers-Attribute für Zellen, die zur Spaltenüberschrift gehören

Beispiel: ID- und Header-Attribute

Die folgende Tabelle besteht aus mehreren Ebenen und die Spaltenüberschriften ändern sich zur Hälfte der Tabelle. Daher sollten zur Verdeutlichung der Struktur id- und header-Attribute verwendet werden.

<table>
<caption>Preise der Ferienhäuser, pro Person und Nacht</caption>
<thead>
<tr>
<td></td>
<th id="chalet" scope="col">
Chalet
</th>
<th id="villa" scope="col">
Villa
</th>
</tr>
</thead>
<tbody>
<tr>
<th id="paris" colspan="3" scope="colgroup">
Parijs
</th>
</tr>
<tr>
<th headers="paris" id="paris1zimmer">
1 slaapkamer
</th>
<td headers="paris paris1zimmer chalet">
€ 50
</td>
<td headers="paris paris1zimmer villa">
€ 90
</td>
</tr>
...
</tbody>
</table>

Weitere Code-Beispiele für Tabellen finden Sie im W3C Tables Manual.

Für Redakteure

Für jede komplexe Tabelle müssen die Redakteure entscheiden, ob sie aufgeteilt oder vereinfacht werden kann. Wenn nicht, müssen sie die Tabelle korrekt auf der Seite platzieren. Wenn der verwendete Editor die Eingabe komplexer Tabellen nicht unterstützt, muss der Redakteur die Tabelle im HTML-Code eingeben können.

Für Developer (Entwickler)

Der Entwickler muss sicherstellen, dass die Redakteure Tabellen korrekt hinzufügen können.