Tabellen & Listen

Diese Lektion behandelt die Strukturierung von Daten in HTML mittels Tabellen und Listen. Sie lernen, wie Informationen übersichtlich dargestellt werden können.

1. Listenarten

HTML unterstützt drei Haupttypen von Listen:

<ul> – ungeordnete Liste (Bullet Points)
<ol> – geordnete Liste (Nummerierung)
<dl> – Definitionsliste (Begriffe & Beschreibungen)

<ul>
  <li>Apfel</li>
  <li>Banane</li>
</ul>

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

2. Tabellen

Tabellen dienen zur strukturierten Darstellung von Daten in Zeilen (<tr>) und Spalten (<td>).

<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>30</td>
  </tr>
</table>

3. Tabellen-Header

Mit <th> werden Kopfzellen definiert. Sie sind standardmäßig fett und zentriert.

Semantisch korrektes Markup verbessert Barrierefreiheit und SEO.

4. Tabellenattribute

border – Rahmenstärke
cellpadding – Innenabstand in Zellen
cellspacing – Abstand zwischen Zellen
Für modernes Styling besser CSS verwenden

5. Verschachtelte Tabellen und Listen

Tabellen und Listen können ineinander verschachtelt werden, um komplexe Layouts oder Unterlisten darzustellen.

<ul>
  <li>Obst
    <ul>
      <li>Apfel</li>
      <li>Banane</li>
    </ul>
  </li>
</ul>

<table border="1">
  <tr>
    <td>Name</td>
    <td>
      <table border="1">
        <tr><td>Unterwert1</td></tr>
        <tr><td>Unterwert2</td></tr>
      </table>
    </td>
  </tr>
</table>

6. Best Practices

Tabellen für tabellarische Daten, nicht für Layout
Listen verwenden, wenn Reihenfolge oder Gruppierung wichtig ist
Header-Zellen mit <th> und scope verwenden
Responsive Tabellen ggf. mit CSS overflow-x:auto;

7. Zusammenfassung

Listen: <ul>, <ol>, <dl>
Tabellen: <table>, <tr>, <td>, <th>
Verschachtelung und semantische Struktur verbessern Lesbarkeit und Barrierefreiheit