Tabellen

Du hast jetzt Listen und Aufzählungen gelernt.

Tabellen sind etwas komplexer, aber wenn du diese verstanden hast, hast du nie wieder Probleme HTML-Strukturen zu verstehen.

Bei Tabellen benötigt man noch ein paar Elemente mehr, als bei Listen. Schauen wir uns mal eine Tabelle an. Was ist dort alles enthalten?

Code-Beispiel - Tabelle in HTML:

<table>
  <tr>
    <th>Planet</th>
    <th>Durchmesser</th>
    <th>Entfernung zur Sonne</th>
  </tr>
  <tr>
    <td>Merkur</td>
    <td>4.879,4 km</td>
    <td>57.909.000 km</td>
  </tr>
  <tr>
    <td>Erde</td>
    <td>12.756,3 km</td>
    <td>149.600.000 km</td>
  </tr>
  <tr>
    <td>Saturn</td>
    <td>120.536 km</td>
    <td>1.433.500.000 km</td>
  </tr>
</table>

Wir haben zum einen die Tabelle selbst. Dort enthalten sind Zeilen und Spalten sowie Tabellenzellen. Dann haben wir noch Kopfzeilen oder Kopfspalten mit Tabellenüberschriften. Für fast jeden Bestandteil gibt es ein passendes HTML-Element.

In dieser Lektion machen wir es etwas anders. Ich zeige dir zuerst den Code und erkläre dir danach die einzelnen Elemente.

Das table-Element zeigt den Anfang und das Ende einer Tabelle an. Danach werden die einzelnen Tabellenzeilen mit dem tr-Element erstellt.

Innerhalb der Tabellenzeile werden dann die Spalten mit dem td-Element erstellt. Diese enthalten auch den Inhalt der Tabellenzeile.

Vielleicht ist dir in der ersten Zeile das th-Element aufgefallen, dieses wird für die Überschriften einer Tabelle verwendet.