Tables
Klassische Tabellen, insbesondere mit mehr als zwei Spalten, können über Tables realisiert werden.
Basis Layout
table
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<div class="table-responsive-wrapper">
<table class="table--base">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>
</div>
Listen Layout
table.table--list
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<div class="table-responsive-wrapper">
<table class="table--list">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>
</div>
Barrierefreiheit bei komplexen Tabellen
In einfachen Tabellen, in denen jede Zelle genau einem Header zugeordnet ist (horizontal oder vertikal), sind keine weiteren Auszeichnungen nötig (siehe Basistabelle oben).
In komplexen Tabellen, in denen der eindeutige Bezug zu genau einem Header fehlt, müssen Überschriften zu ihrem Inhalt (über scope oder über id und headers) zugeordnet werden.
siehe auch: W3.org - Tables Concepts
Beispiel 1: Tabelle mit horizontalen und vertikalen Headern
Hat eine Zelle genau einen horizontalen UND einen vertikalen Header, wird das scope Attribut "col" bzw. "row" verwendet.
| Montag | Dienstag | Mittwoch | Donnerstag | Freitag | |
|---|---|---|---|---|---|
| 09:00 - 11:00 | Geschlossen | Offen | Offen | Geschlossen | Geschlossen |
| 11:00 - 13:00 | Offen | Offen | Geschlossen | Geschlossen | Geschlossen |
<div class="table-responsive-wrapper">
<table class="table--base">
<thead>
<tr>
<td></td>
<th scope="col">Montag</th>
<th scope="col">Dienstag</th>
<th scope="col">Mittwoch</th>
<th scope="col">Donnerstag</th>
<th scope="col">Freitag</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">09:00 - 11:00</th>
<td>Geschlossen</td>
<td>Offen</td>
<td>Offen</td>
<td>Geschlossen</td>
<td>Geschlossen</td>
</tr>
<tr>
<th scope="row">11:00 - 13:00</th>
<td>Offen</td>
<td>Offen</td>
<td>Geschlossen</td>
<td>Geschlossen</td>
<td>Geschlossen</td>
</tr>
</tbody>
</table>
</div>
Beispiel 2: Tabelle mit Gruppen
Geht ein Header über mehrer Spalten und bildet z.B. eine Untergruppierung, so bekommt dieser das Attribut scope="colgroup".
Zusätzlich werden die Zellen durch die id und headers Attribute mit ihren Headern verknüpft. Anderfalls wäre der Kontext der Zelleninhalte unklar.
| Objekt | Größe | Preis |
|---|---|---|
| Prenzlauer Berg | ||
| Wohnung Marlene | 20 m² | 120 € |
| Haus Fritz | 30 m² | 140 € |
| Villa Uta | 37 m² | 149 € |
| Spandau | ||
| Raum Hans | 22 m² | 119 € |
| Wohnung Otto | 36 m² | 138 € |
| Apartment Lili | 156 m² | 209 € |
<div class="table-responsive-wrapper">
<table class="table--base">
<thead>
<tr>
<th id="header_01" scope="col">Objekt</th>
<th id="header_02" scope="col">Größe</th>
<th id="header_03" scope="col">Preis</th>
</tr>
</thead>
<tbody>
<tr>
<th id="colgroup_a" scope="colgroup" colspan="3" class="table__colgroup">Prenzlauer Berg</th>
</tr>
<tr>
<td headers="header_01 colgroup_a">Wohnung Marlene</td>
<td headers="header_02 colgroup_a">20 m²</td>
<td headers="header_03 colgroup_a">120 €</td>
</tr>
<tr>
<td headers="header_01 colgroup_a">Haus Fritz</td>
<td headers="header_02 colgroup_a">30 m²</td>
<td headers="header_03 colgroup_a">140 €</td>
</tr>
<tr>
<td headers="header_01 colgroup_a">Villa Uta</td>
<td headers="header_02 colgroup_a">37 m²</td>
<td headers="header_03 colgroup_a">149 €</td>
</tr>
<tr>
<th id="colgroup_b" scope="colgroup" colspan="3" class="table__colgroup">Spandau</th>
</tr>
<tr>
<td headers="header_01 colgroup_b">Raum Hans</td>
<td headers="header_02 colgroup_b">22 m²</td>
<td headers="header_03 colgroup_b">119 €</td>
</tr>
<tr>
<td headers="header_01 colgroup_b">Wohnung Otto</td>
<td headers="header_02 colgroup_b">36 m²</td>
<td headers="header_03 colgroup_b">138 €</td>
</tr>
<tr>
<td headers="header_01 colgroup_b">Apartment Lili</td>
<td headers="header_02 colgroup_b">156 m²</td>
<td headers="header_03 colgroup_b">209 €</td>
</tr>
</tbody>
</table>
</div>
Beispiel 3: Tabelle mit Gruppen, horizontalen und vertikalen Headern
Pollenflugkalender
| Heute | Morgen | Übermorgen | |
|---|---|---|---|
| Bäume | |||
| Birke | schwach | stark | mittel |
| Erle | mittel | schwach | stark |
| Esche | stark | mittel | schwach |
| Gräser | |||
| Roggen | mittel | schwach | stark |
| Weizen | schwach | stark | mittel |
| Hafer | stark | mittel | schwach |
<h2>Pollenflugkalender</h2>
<div class="table-responsive-wrapper">
<table class="table--base">
<thead>
<tr>
<td></td>
<th id="header_01" scope="col">Heute</th>
<th id="header_02" scope="col">Morgen</th>
<th id="header_03" scope="col">Übermorgen</th>
</tr>
</thead>
<tbody>
<tr>
<th id="colgroup_a" scope="colgroup" colspan="4" class="table__colgroup">Bäume</th>
</tr>
<tr>
<th id="baum1" scope="row">Birke</th>
<td headers="header_01 colgroup_a baum1">schwach</td>
<td headers="header_02 colgroup_a baum1">stark</td>
<td headers="header_03 colgroup_a baum1">mittel</td>
</tr>
<tr>
<th id="baum2" scope="row">Erle</th>
<td headers="header_01 colgroup_a baum2">mittel</td>
<td headers="header_02 colgroup_a baum2">schwach</td>
<td headers="header_03 colgroup_a baum2">stark</td>
</tr>
<tr>
<th id="baum3" scope="row">Esche</th>
<td headers="header_01 colgroup_a baum3">stark</td>
<td headers="header_02 colgroup_a baum3">mittel</td>
<td headers="header_03 colgroup_a baum3">schwach</td>
</tr>
<tr>
<th id="colgroup_b" scope="colgroup" colspan="4" class="table__colgroup">Gräser</th>
</tr>
<tr>
<th id="graeser1" scope="row">Roggen</th>
<td headers="header_01 colgroup_b graeser1">mittel</td>
<td headers="header_02 colgroup_b graeser1">schwach</td>
<td headers="header_03 colgroup_b graeser1">stark</td>
</tr>
<tr>
<th id="graeser2" scope="row">Weizen</th>
<td headers="header_01 colgroup_b graeser2">schwach</td>
<td headers="header_02 colgroup_b graeser2">stark</td>
<td headers="header_03 colgroup_b graeser2">mittel</td>
</tr>
<tr>
<th id="graeser3" scope="row">Hafer</th>
<td headers="header_01 colgroup_b graeser3">stark</td>
<td headers="header_02 colgroup_b graeser3">mittel</td>
<td headers="header_03 colgroup_b graeser3">schwach</td>
</tr>
</tbody>
</table>
</div>