Tabellen

Geschätzte Lektüre: 11 Minuten 350 Ansichten

Tabellen sind ein grundlegendes HTML-Element zur Darstellung von Daten in Zeilen und Spalten. Sie werden verwendet, um Informationen strukturiert und übersichtlich anzuordnen.

Grundlegende Tabellenstruktur

Die grundlegenden Tags für eine HTML-Tabelle sind:
• <table> – Definiert die Tabelle
• <tr> (table row) – Definiert eine Tabellenzeile
• <td> (table data) – Definiert eine Tabellenzelle
• <th> (table header) – Definiert eine Kopfzelle (wird standardmäßig fett und zentriert dargestellt)

Einfaches Beispiel:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Stadt</th>
  </tr>
  <tr>
    <td>Max Mustermann</td>
    <td>28</td>
    <td>Berlin</td>
  </tr>
  <tr>
    <td>Erika Musterfrau</td>
    <td>32</td>
    <td>Hamburg</td>
  </tr>
</table>

Erweiterte Tabellenfunktionen

Tabellenkopf, -körper und -fuß

Für bessere Strukturierung können Tabellen in drei Bereiche unterteilt werden:
• <thead> – Tabellenkopf (enthält meist die Spaltenüberschriften)
• <tbody> – Tabellenkörper (enthält die Hauptdaten)
• <tfoot> – Tabellenfuß (z.B. für Summen oder Zusammenfassungen)

<table border="1">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Preis</th>
      <th>Menge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Buch</td>
      <td>19,99 €</td>
      <td>2</td>
    </tr>
    <tr>
      <td>DVD</td>
      <td>9,99 €</td>
      <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Gesamt</td>
      <td>7</td>
    </tr>
  </tfoot>
</table>

Zellen verbinden

Mit den Attributen colspan (Spalten verbinden) und rowspan (Zeilen verbinden) können Zellen über mehrere Spalten oder Zeilen gehen.

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Kontakt</th>
  </tr>
  <tr>
    <th>Telefon</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Max Mustermann</td>
    <td>0123-456789</td>
    <td>max@example.com</td>
  </tr>
</table>

Tabellenstyling mit CSS

Moderne Tabellen werden meist mit CSS gestaltet statt mit dem border-Attribut.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Monat</th>
      <th>Umsatz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januar</td>
      <td>5.000 €</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>6.200 €</td>
    </tr>
  </tbody>
</table>

Barrierefreie Tabellen

Für bessere Zugänglichkeit sollten Tabellen mit <caption> (Beschreibung) und scope-Attributen versehen werden.

<table>
  <caption>Monatliche Verkaufszahlen 2023</caption>
  <thead>
    <tr>
      <th scope="col">Monat</th>
      <th scope="col">Umsatz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Januar</th>
      <td>5.000 €</td>
    </tr>
    <tr>
      <th scope="row">Februar</th>
      <td>6.200 €</td>
    </tr>
  </tbody>
</table>

Responsive Tabellen

Für mobile Geräte können Tabellen mit folgendem CSS responsive gemacht werden:

<style>
  .responsive-table {
    overflow-x: auto;
  }
</style>

<div class="responsive-table">
  <table>
    <!-- Tabelleninhalt -->
  </table>
</div>

Wann sollten Tabellen verwendet werden?

Tabellen sollten hauptsächlich für tabellarische Daten verwendet werden, nicht für Layout-Zwecke. Für Layouts sind CSS-Techniken wie Flexbox oder Grid besser geeignet.

Praxis-Beispiel

<table border="1">
  <caption>Teamübersicht</caption>
  <thead>
    <tr>
      <th scope="col">Abteilung</th>
      <th scope="col">Name</th>
      <th scope="col">Position</th>
      <th scope="col">Eintrittsdatum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Entwicklung</th>
      <td>Anna Müller</td>
      <td>Frontend</td>
      <td>01.03.2020</td>
    </tr>
    <tr>
      <td>Tom Schmidt</td>
      <td>Backend</td>
      <td>15.06.2021</td>
    </tr>
    <tr>
      <td>Lisa Weber</td>
      <td>Fullstack</td>
      <td>10.01.2022</td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Design</th>
      <td>Markus Braun</td>
      <td>UI/UX</td>
      <td>05.09.2019</td>
    </tr>
    <tr>
      <td>Sarah Köhler</td>
      <td>Grafikdesign</td>
      <td>22.04.2023</td>
    </tr>
  </tbody>
</table>
Dieses Dokument teilen

Tabellen

Oder Link kopieren

INHALT

Abonnieren

×
Cancel