Listen & Tabellen

Listen und Tabellen sind zwei der haeufigsten Strukturelemente auf Webseiten. Listen eignen sich perfekt fuer Aufzaehlungen und Navigationen, Tabellen fuer die Darstellung von Daten. In diesem Kapitel lernst du, wie du beide richtig einsetzt.

Ungeordnete Listen: <ul>

Eine ungeordnete Liste zeigt Punkte ohne bestimmte Reihenfolge an:

<h3>Einkaufsliste</h3>
<ul>
    <li>Milch</li>
    <li>Brot</li>
    <li>Aepfel</li>
    <li>Kaese</li>
</ul>

Die Listenpunkte werden standardmaessig mit Aufzaehlungszeichen (Bullets) dargestellt.

Aufzaehlungszeichen aendern

/* Verschiedene Bullet-Styles */
ul.disc    { list-style-type: disc; }    /* Gefuellter Kreis (Standard) */
ul.circle  { list-style-type: circle; }  /* Leerer Kreis */
ul.square  { list-style-type: square; }  /* Quadrat */
ul.none    { list-style-type: none; }    /* Keine Zeichen */
ul.emoji   { list-style-type: "✅ "; }   /* Eigenes Zeichen */

Geordnete Listen: <ol>

Eine geordnete Liste zeigt Punkte in einer bestimmten Reihenfolge:

<h3>Kochrezept: Pasta</h3>
<ol>
    <li>Wasser zum Kochen bringen</li>
    <li>Pasta ins Wasser geben</li>
    <li>8-10 Minuten kochen lassen</li>
    <li>Abgiessen und servieren</li>
</ol>

Nummerierung anpassen

<!-- Starte bei 5 -->
<ol start="5">
    <li>Fuenfter Punkt</li>
    <li>Sechster Punkt</li>
</ol>

<!-- Rueckwaerts zaehlen -->
<ol reversed>
    <li>Dritter Platz</li>
    <li>Zweiter Platz</li>
    <li>Erster Platz</li>
</ol>

<!-- Nummerierungstyp aendern -->
<ol type="A">  <!-- A, B, C -->
    <li>Punkt A</li>
    <li>Punkt B</li>
</ol>

<ol type="I">  <!-- I, II, III -->
    <li>Erster Abschnitt</li>
    <li>Zweiter Abschnitt</li>
</ol>

Verschachtelte Listen

Listen koennen ineinander verschachtelt werden:

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript
                <ul>
                    <li>React</li>
                    <li>Vue</li>
                    <li>Svelte</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>Go</li>
        </ul>
    </li>
</ul>

Wichtig: Die innere Liste muss innerhalb eines <li>-Elements stehen.

Definitionslisten: <dl>

Fuer Begriffspaare wie Glossare oder Metadaten:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language -- die Struktur von Webseiten</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets -- das Design von Webseiten</dd>

    <dt>JavaScript</dt>
    <dd>Programmiersprache fuer interaktive Webseiten</dd>
</dl>

• <dl> — Definition List (Container)
• <dt> — Definition Term (der Begriff)
• <dd> — Definition Description (die Erklaerung)

Listen fuer Navigation

Listen sind die bevorzugte Methode fuer Navigationen:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/produkte">Produkte</a>
            <ul>
                <li><a href="/produkte/software">Software</a></li>
                <li><a href="/produkte/hardware">Hardware</a></li>
            </ul>
        </li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>

/* Horizontale Navigation */
nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 1rem;
}

nav a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
}

nav a:hover {
    color: #e44d26;
}

Tabellen: Grundlagen

Tabellen werden mit mehreren Tags aufgebaut:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Stadt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Anna</td>
            <td>28</td>
            <td>Berlin</td>
        </tr>
        <tr>
            <td>Max</td>
            <td>34</td>
            <td>Hamburg</td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>25</td>
            <td>Muenchen</td>
        </tr>
    </tbody>
</table>

Tabellen-Tags erklaert

Tag	Bedeutung
<table>	Container fuer die gesamte Tabelle
<thead>	Kopfbereich der Tabelle
<tbody>	Hauptinhalt der Tabelle
<tfoot>	Fussbereich der Tabelle
<tr>	Table Row — eine Zeile
<th>	Table Header — eine Kopfzelle
<td>	Table Data — eine Datenzelle

Tabelle mit Fusszeile

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Preis</th>
            <th>Menge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>T-Shirt</td>
            <td>29,99 Euro</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Hose</td>
            <td>49,99 Euro</td>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Gesamt</td>
            <td>109,97 Euro</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

Zellen verbinden

Spalten verbinden: colspan

<table>
    <tr>
        <th colspan="3">Stundenplan Montag</th>
    </tr>
    <tr>
        <th>Zeit</th>
        <th>Fach</th>
        <th>Raum</th>
    </tr>
    <tr>
        <td>8:00</td>
        <td>Mathe</td>
        <td>A101</td>
    </tr>
</table>

Zeilen verbinden: rowspan

<table>
    <tr>
        <th>Tag</th>
        <th>Vormittag</th>
        <th>Nachmittag</th>
    </tr>
    <tr>
        <td rowspan="2">Montag/Dienstag</td>
        <td>HTML lernen</td>
        <td>CSS ueben</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>Projekte</td>
    </tr>
</table>

Tabelle mit Caption

<table>
    <caption>Beliebteste Programmiersprachen 2026</caption>
    <thead>
        <tr>
            <th>Rang</th>
            <th>Sprache</th>
            <th>Anteil</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Python</td>
            <td>28%</td>
        </tr>
        <tr>
            <td>2</td>
            <td>JavaScript</td>
            <td>22%</td>
        </tr>
        <tr>
            <td>3</td>
            <td>TypeScript</td>
            <td>12%</td>
        </tr>
    </tbody>
</table>

Tabellen stylen

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

th {
    background-color: #f8fafc;
    font-weight: 600;
    color: #334155;
}

/* Zebra-Streifen */
tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Hover-Effekt */
tbody tr:hover {
    background-color: #e2e8f0;
}

/* Responsive Tabelle */
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

Barrierefreie Tabellen

<table>
    <caption>Mitarbeiter-Uebersicht</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Abteilung</th>
            <th scope="col">Standort</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Anna Mueller</th>
            <td>Entwicklung</td>
            <td>Berlin</td>
        </tr>
        <tr>
            <th scope="row">Max Schmidt</th>
            <td>Design</td>
            <td>Hamburg</td>
        </tr>
    </tbody>
</table>

Das scope-Attribut hilft Screenreadern, die Beziehung zwischen Kopfzellen und Datenzellen zu verstehen.

Wann Listen, wann Tabellen?

Verwende…	Fuer…	Beispiel
<ul>	Ungeordnete Aufzaehlungen	Einkaufsliste, Features
<ol>	Geordnete Schritte	Rezepte, Anleitungen
<dl>	Begriff-Erklaerung-Paare	Glossar, FAQ
<table>	Zweidimensionale Daten	Preislisten, Stundenplaene

Wichtig: Verwende Tabellen nur fuer tabellarische Daten, niemals fuer Seitenlayouts!

Uebungen

Uebung 1: Verschachtelte Liste

Erstelle eine verschachtelte Navigationsliste fuer einen Online-Shop mit Kategorien und Unterkategorien.

Uebung 2: Daten-Tabelle

Erstelle eine Tabelle mit den 5 groessten Staedten Deutschlands, inklusive Einwohnerzahl und Bundesland. Fuege <caption>, <thead>, <tbody> und scope-Attribute hinzu.

Uebung 3: Preistabelle

Erstelle eine Preistabelle fuer drei Abo-Modelle (Basic, Pro, Enterprise) mit colspan fuer den Tabellentitel.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du alles ueber Formulare — eines der interaktivsten HTML-Elemente:

• Eingabefelder, Buttons und Dropdowns
• Validierung von Formulardaten
• Barrierefreie Formulare

Zusammenfassung

• <ul> fuer ungeordnete Listen, <ol> fuer geordnete Listen, <dl> fuer Definitionslisten
• Listen koennen verschachtelt werden — ideal fuer Navigationen
• Tabellen bestehen aus <table>, <tr>, <th> und <td>
• <thead>, <tbody> und <tfoot> strukturieren die Tabelle semantisch
• colspan und rowspan verbinden Zellen
• Tabellen sind fuer Daten, nicht fuer Layouts

---