Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Benimmregeln für Datentabellen Teil 2: Komplexe Datentabellen geschrieben von Tomas Caspers (2008)

Die Inhalte dieser Seite sind ursprünglich in einer vierteiligen Serie von der Extern: Aktion Mensch veröffentlicht worden. Auf www.barrierefreies-webdesign.de werden die ersten drei Teile auf mehreren Seiten verteilt präsentiert.

Zeilen gruppieren mit rowgroup

Neben der Unterteilung in Bereiche per THEAD, TFOOT und TBODY sieht die HTML-Spezifikation noch eine zweite Variante vor: komischerweise ist dies kein der Logik von COLGROUP entsprechendes ROWGROUP-Element zur Identifizierung von Zeilengruppen, sondern rowgroup als möglichen Wert des scope-Attributs von TH oder TD. Nicht nur um Verwirrung zu vermeiden, sondern auch weil sich rowgroup und rowspan nicht über mehrere TBODY hinweg erstrecken dürfen, sollten sie die Kombination beider Methoden vermeiden und sich im Einzelfall für das eine oder das andere entscheiden.

Im folgenden Screenshot sehen Sie eine zusätzliche Zelle (TH) vor der Tabelle, mit der die Abstiegszone markiert ist. Diese Zelle erstreckt sich über 3 Zeilen (der rein technische Part mit rowspan="3") und weist sich selbst als Überschrift für diese drei Zeilen aus (der inhaltliche Part mit scope="rowgroup"). Beachten Sie, dass auch hier die Vergabe von rowspan nicht mit der automatischen Zuweisung als Überschrift für bestimmte Zellen gleichzusetzen ist – dieses Attribut bestimmt nur die Position der Zelle im Tabellenraster. Wie bei colspan und COLGROUP wird hier die zusätzliche Angabe der rowgroup benötigt, um die Abstiegszone eindeutig zu definieren.

Bildschirmfotoausschnitt einer Fußballtabelle. Zusätzliche Markierungen durch geschweifte Klammern und Bezeichner kennzeichnen einen Tabellenkopf (umfasst mit den Attributen rowspan=3 und scope=rowgroup den Abstiegsbereich) und einen Tabellenfuß.

<table>
  <!-- CAPTION und die ersten Reihen der Tabelle -->
  <tr>
    <th rowspan="3" scope="rowgroup">Abstieg</th>
    <th scope="row">16.</th>
    <td scope="row">TSV 1860 München</td>
    <td class="up">↑</td>
    <td>34</td>
    <td>7</td>
    <td>8</td>
    <td>19</td>
    <td>41:60</td>
    <td>−19</td>
    <td>22</td>
  </tr>
  <tr>
    <th>17.</th>
    <td scope="row">1. FC Saarbrücken</td>
    <td class="down">↓</td>
    <td>34</td>
    <td>6</td>
    <td>10</td>
    <td>18</td>
    <td>39:70</td>
    <td>−31</td>
    <td>22</td>
  </tr>
  <tr>
    <th>18.</th>
    <td scope="row">FC St. Pauli</td>
    <td></td>
    <td>34</td>
    <td>6</td>
    <td>6</td>
    <td>22</td>
    <td>44:86</td>
    <td>−42</td>
    <td>18</td>
  </tr>
</table>