Manchmal ist die Anwendung einer Tabelle unerlässlich für die Darstellung von Informationen, die miteinander verknüpft sind. Sie sind auf den Websites zu sehen und als HTML-Struktur gespeichert. Achten Sie darauf, die richtigen HTML-Elemente zu verwenden.
Dies ist gleich doppelt hilfreich:
- Diese Angabe ist besonders wichtig für Besucher, die eine Assistenztechnologie benötigen.
- Die in der Tabelle enthaltenen Informationen sowie die Form passen sich jeder Art von Assistenzsystem an (Computer, Tablet, Smartphone)
Wie wendet man das an?
Tabellen bestehen aus Zeilen (horizontal) und Spalten (vertikal). Eine Besonderheit von Tabellen ist, dass die Daten in der Tabelle sowohl horizontal als auch vertikal miteinander in Beziehung stehen. Für diejenigen, die die Tabelle sehen können, sind diese Beziehungen oft schnell erkennbar. Diese Beziehungen werden durch die visuelle Aufteilung der Tabelle in Zeilen und Spalten sichtbar.
Die Beziehung muss auch dann gepflegt werden, wenn die Tabelle dem Besucher auf andere Weise präsentiert wird. Dies kann durch die Verwendung der richtigen HTML-Elemente beim Erstellen einer Tabelle erreicht werden.
Es geht darum:
- Das Element <table> für die gesamte Tabelle.
- Zeilen- und Spaltenüberschriften werden durch das Element <th> gekennzeichnet
- Zeilen mit dem Element <tr>
- Einzelne Felder mit dem Element <td>.
Manchmal gibt es im Editor eine Schaltfläche, mit der man eine Tabelle erstellen kann.
Beispiele
Das folgende Beispiel zeigt eine einfache Tabelle mit einem Wochenplan. Die Wochentage werden in der ersten Zeile der Tabelle angezeigt. Da es sich um Spaltenüberschriften handelt, befinden sie sich in <th> Elementen.
Die folgenden Zeilen beziehen sich auf die Tageszeit. Da es sich um Zeilenüberschriften handelt, befinden sie sich auch in <th> Elementen.
Die anderen Felder (<td> Elemente) enthalten die Termine. Wenn es an einem bestimmten Tag und zu einer bestimmten Uhrzeit keinen Termin gibt, ist das Element <td> leer.
| Montag | Dienstag | Mittwoch | Donnerstag | Freitag | |
|---|---|---|---|---|---|
| 8:00 - 9:00 | Besprechung | ||||
| 9:00 - 10:00 | Termin mit dem Arzt | Abflug nach S |
Benutzer von “Screenreadern” (Bildschirmlesegeräten) sollten die Tabelle zeilenweise lesen. Sie können sich mit der Tastatur durch die Tabelle bewegen. Jedes Mal, wenn die Informationen in einem Feld ausgelesen werden. Da die richtigen HTML-Elemente verwendet wurden, werden auch die richtigen Header (Kopfzeilen, Überschriften) ausgelesen. Der Besucher hört nicht nur den Termin selbst, sondern auch den dazugehörigen Tag und die Uhrzeit. Dadurch wird die Tabelle verständlich und nützlich.
<table>
<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>
<tr>
<th scope="row">8:00 - 9:00</th>
<td>Besprechung</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">9:00 - 10:00</th>
<td> </td>
<td> </td>
<td>Termin mit dem Arzt</td>
<td> </td>
<td>Abflug nach S</td>
</tr>
</table>
Für Redakteure
Wenn ein Redakteur selbst eine Tabelle im HTML-Code erstellt, ist er für eine logische Struktur und die korrekte Verwendung der verschiedenen HTML-Elemente verantwortlich.
Für Developer (Entwickler)
Der Entwickler ist für die Fähigkeit verantwortlich, mit dem CMS korrekte HTML-Tabellen zu erstellen.