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.

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Tabellen“ weiterlesen

Barrierefreie HTML-Tabellen erstellen

In diesem Blogartikel zeige ich, wie Sie eine HTML-Tabelle barrierefrei gestalten können nach der Richtlinie EN 301 549.

Der Prüfschritt für diesen Blogartikel in der EN 301 549 heißt: 9.1.3.1e. Datentabellen richtig aufgebaut.

Als erstes der HTML-Code:

<table>
  <thead>
    <tr>
      <th>Screenreader</th>
      <th>Betriebssystem</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NVDA</td>
      <td>Windows</td>
    </tr>
    <tr>
      <td>Orca</td>
      <td>Ubuntu</td>
    </tr>
    <tr>
      <td>Voice Over</td>
      <td>IOS</td>
    </tr>
    <tr>
      <td>Talkback</td>
      <td>Android</td>
    </tr>
  </tbody>
</table>

„Barrierefreie HTML-Tabellen erstellen“ weiterlesen