HTML lernen leicht gemacht: Tabellen

In diesem Blogartikel erkläre ich wie Sie Tabellen in HTML erstellen können.

In diesem Blogartikel erkläre ich, wie Sie Tabellen in HTML erstellen können. Tabellen sind eine nützliche Möglichkeit, Daten strukturiert und übersichtlich darzustellen.

Grundlegende HTML-Tags für Tabellen

<table>: Das Haupt-Tag, das die gesamte Tabelle umschließt.
<thead> (table head): Definiert den Kopfbereich der Tabelle. Hier werden normalerweise die Überschriftenzeilen platziert.
<th> (table header): Definiert eine Tabellenzelle als Überschrift. Der Inhalt wird standardmäßig fett und zentriert dargestellt.
<tbody> (table body): Definiert den Hauptinhalt der Tabelle, also die Datenzeilen.
<tr> (table row): Definiert eine Zeile in der Tabelle.
<td> (table data): Definiert eine Zelle mit normalen Daten in der Tabelle.
<tfoot> (table foot): Definiert den Fußbereich der Tabelle. Hier können beispielsweise Summen oder andere Schlussfolgerungen platziert werden.

Barrierefreiheit von Tabellen

Blinde Menschen und Menschen mit einer Sehbehinderung nutzen einen Screenreader. Screenreader lesen den Text auf einem Bildschirm oder Display laut vor oder übersetzen ihn in Braille. Damit der Screenreader die HTML-Tabelle so vorlesen kann, dass blinde Menschen nachvollziehen können, was in der Tabelle dargestellt wird, benötigt eine HTML-Tabelle die Tags `<thead>` und `<tbody>`. Bei Verwendung dieser beiden Tags kann der Screenreader die HTML-Tabelle so vorlesen, dass klar ist, welcher Wert in welcher Spalte und Zeile steht.

Beispiel:

<table>
<thead>
<tr>
<th>Screenreader</th>
<th>Betriebssystem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sprachausgabe</td>
<td>Windows 11</td>
</tr>
<tr>
<td>Orca</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>Voice Over</td>
<td>MacOS</td>
</tr>
<tr>
<td>Talkback</td>
<td>Android</td>
</tr>
<tr>
<td>Voice Over</td>
<td>iOS</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Anzahl Screenreader: 4</td>
<td>Anzahl Betriebssysteme: 5</td>
</tr>
</tfoot>
</table>

Erklärung:

• <thead>: Der Kopfbereich der Tabelle, enthält die Überschriftenzeilen.
• <th>: Definiert eine Zelle als Tabellenüberschrift.
• <tbody>: Der Hauptinhalt der Tabelle, enthält die Datenzeilen.
• <tfoot>: Der Fußbereich der Tabelle, enthält die Zusammenfassung oder zusätzliche Informationen.
• <tr>: Definiert eine Zeile in der Tabelle.
• <td>: Definiert eine Zelle mit normalen Daten.

Die `<tfoot>`-Sektion enthält eine Zeile, die die Anzahl der Screenreader und Betriebssysteme zusammenfasst.

Schlussbemerkung

Tabellen sind ein mächtiges Werkzeug in HTML, um Daten strukturiert darzustellen. Durch die Verwendung von <thead>, <tbody> und <tfoot> wird die Tabelle nicht nur übersichtlicher, sondern auch für Screenreader besser verständlich, was die Barrierefreiheit Ihrer Webseite verbessert.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Weiterlesen

HTML lernen leicht gemacht: Ein inklusiver Kurs für alle