HTML-Kurs / Tabellen mit table, tr, th und td erstellen

Verwenden Sie eine HTML-Tabelle für Daten, deren Werte zeilen- und spaltenbezogen sind. Ein Element table enthält Zeilen (tr); jede Zeile hat Kopfzellen (th) oder Datenzellen (td). Verwenden Sie eine Tabelle nicht nur, um Teile einer Seite zu positionieren.

Die Grundstruktur der Tabelle

Diese kleine Tabelle zeigt den Lagerbestand zweier Obstsorten. Die erste Zeile benennt die Spalten; die folgenden Zeilen enthalten die Werte.

<table>

  <tr>

    <th>Frucht</th>

    <th>Bestand</th>

  </tr>

  <tr>

    <td>Äpfel</td>

    <td>12 Stück</td>

  </tr>

  <tr>

    <td>Birnen</td>

    <td>8 Stück</td>

  </tr>

</table>

Die Daten erscheinen zeilen- und spaltenweise wie folgt:

Fügen Sie den Code in das body einer HTML-Datei ein. Jede tr bildet eine horizontale Zeile, und ihre Zellen erscheinen von links nach rechts. Der Standard-Tabellenstil des Browsers kann wenig oder keine Rahmen anzeigen; fügen Sie erst nach der korrekten Datenstruktur CSS-Rahmen hinzu. Beim Planen einer Tabelle skizzieren Sie zuerst ihre Spalten und Zeilen. Um eine weitere Obstsorte hinzuzufügen, fügen Sie eine weitere Datenzeile mit dem Namen der Obstsorte und einem Lagerwert hinzu.

Trennen Sie Kopf- und Datenzeilen

Verwenden Sie thead und tbody, wenn Sie die Kopf- und Datenzeilen ausdrücklich gruppieren möchten. Eine Zusammenfassungszeile kann in tfoot platziert werden. Diese Elemente organisieren die Zeilen; sie erzeugen keine Farben oder Rahmen von selbst. Sie können sie in einer kleinen Tabelle weglassen, obwohl der HTML-Parser des Browsers möglicherweise eine tbody in den Dokumentbaum einfügt, selbst wenn sie nicht im Quellcode geschrieben wurde.

<table>

  <thead>

    <tr><th>Frucht</th><th>Bestand</th></tr>

  </thead>

  <tbody>

    <tr><td>Äpfel</td><td>12 Stück</td></tr>

    <tr><td>Birnen</td><td>8 Stück</td></tr>

  </tbody>

</table>

Wählen Sie Kopfzellen und Datenzellen

Verwenden Sie th, wenn ein Wert eine Zeile oder Spalte identifiziert; verwenden Sie td für die Daten, die mit dieser Überschrift verbunden sind. Wählen Sie th nicht einfach aus, um Text fett zu machen. Eine Tabelle kann sowohl Spaltenüberschriften als auch Zeilenüberschriften haben. Fügen Sie die Einheiten entweder neben jeder Zahl oder in einer geeigneten Überschrift ein. Ein einzelner Wert wie „12“ könnte den Lesern nicht anzeigen, ob er Artikel oder einen Preis bedeutet. Vergleichen Sie die Tabellenbeschriftung, scope und die zusammengeführten Zellen anhand der tatsächlichen Tabellen in Barrierefreie Tabellen: caption, scope und zusammengeführte Zellen.

Sobald die Grundlagen klar sind, können Sie caption hinzufügen, um die Tabelle zu benennen, scope, um die Kopfzeilenbeziehungen zu klären, und colspan oder rowspan, wenn eine Zelle tatsächlich mehrere Positionen abdeckt. Die Tabellenreferenz auf MDN beschreibt diese Funktionen.

In einer echten HTML-Datei umschließen Sie eine breite Tabelle mit einem Container wie folgt. Das CSS overflow-x ermöglicht ein horizontales Scrollen, ohne Daten zu löschen oder die Tabellenrichtung zu ändern.

<div class="table-scroll">
  <table>
    <!-- Fügen Sie hier die Zeilen der vorherigen Tabelle ein. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

Ein schlecht ausgerichtetes Tabellenlayout lösen

Überprüfen Sie, dass jede normale Zeile die erwartete Anzahl von Zellen enthält. Unterschiedliche Zellzahlen können die Daten unter die falsche Überschrift verschieben. Wenn eine breite Tabelle auf einem schmalen Bildschirm abgeschnitten wird, ziehen Sie einen horizontalen Bildlaufbereich in Betracht, anstatt den Inhalt so weit zu komprimieren, dass er unlesbar wird. Fügen Sie keine wiederholten Leerzeichen innerhalb von Zellen ein, um Spalten zu imitieren; Ausrichtung und Rahmen gehören zum CSS, während Datenbeziehungen zum HTML gehören.