Wenn ihr eure Website mit HTML programmiert, können Tabellen helfen, Inhalte übersichtlich darzustellen. Wie ihr eine HTML-Tabelle erstellt, zeigen wir euch hier auf GIGA. 

Tabellen setzen Inhalte über Zeilen und Spalten in Verhältnis zueinander und zählen zu den komplexeren Darstellungsmöglichkeiten von HTML. Wie ihr eine solche Tabelle mit HTML programmiert und wie ihr diese gestalten könnt, erklären wir in diesem Artikel. 

So bringt ihr auch ältere Programme unter Windows 10 zum Laufen: 

HTML & CSS für Dummies
HTML & CSS für Dummies
Das Produkt ist nicht mehr verfügbar. Zuletzt geprüft: 03.02.2023 09:26 Uhr
HTML und CSS: Das umfassende Handbuch
HTML und CSS: Das umfassende Handbuch
Preis kann jetzt höher sein. Preis vom 02.02.2023 17:42 Uhr

HTML-Tabelle erstellen: Schritt für Schritt 

Wenn ihr eine Tabelle erstellt, solltet ihr die folgenden Punkte beachten: 

  1. Jeder Tag in HTML muss wieder geschlossen werden: Eine Tabelle öffnet ihr mit dem Tag table und schließt sie mit /table wieder. 
  2. Eine Tabelle besteht aus Reihen und Spalten. In HTML muss nur die Reihe definiert werden. Auf Englisch heißt dies table row, daher leitet sich der Tag <tr> ab.
  3. Die Spalte wird nicht definiert. Sie kann für Layout-Zwecke angesprochen werden – hierfür gibt es Tags wie colgroup und colspace (von column = Spalte). Damit könnt ihr beispielsweise Spalten optisch verbinden. Eine Definition der Spalte ist aber nicht nötig, um eine Tabelle mit Daten zu füllen.
  4. Stattdessen definiert ihr innerhalb der Reihe (tr) jeden einzelnen Eintrag mit dem Tag <td> (table data). 
  5. Die Einträge der Kopfzeile leitet ihr mit  (table header) ein. 

Eine fertige Tabelle sieht also folgendermaßen aus:

table
tr
td Linke Spalte, erster Eintrag /td
td Linke Spalte, zweiter Eintrag /td
/tr
tr
td Rechte Spalte, erster Eintrag /td
td Rechte Spalte, zweiter Eintrag /td
/tr
/table

Mit den oben genannten Tags könnt ihr eine einfache Tabelle erstellen. Anschließend legt ihr das Design mit CSS fest. Auf selfhtml.org findet ihr detaillierte Beschreibungen zu den einzelnen CSS-Funktionen einer Tabelle. 

Kennt ihr euch mit den vergangenen Keynotes von Apple aus?

Quiz: Kennst du die Sternstunden der Apple-Keynotes?

Du willst keine News rund um Technik, Games und Popkultur mehr verpassen? Keine aktuellen Tests und Guides? Dann folge uns auf Facebook oder Twitter.