Kontakt aufnehmen

Sehr geehrte(r) Interessent(in),

für Ihr Interesse an meinen Dienstleistungen bedanke ich mich.

Aus persönlichen Gründen kann ich leider bis auf weiteres keine Aufträge mehr annehmen.

Vielen Dank für Ihr Verständnis.


Tobias Bettin webseiten-bonn.de

Eine Tabelle in HTML5 erstellen und Strukturen lernen

Eine Tabelle in HTML5 erstellen

Die Tabelle

Eine Tabelle in HTML Struktur kann zur übersichtlichen Darstellung von Daten genutzt werden.
Eine Tabelle hat einen ganz simplen Aufbau.

Als erstes werde ich Ihnen die einzelnen Tags erklären, danach wenden wir diese in unserem Beispielprojekt an.

Der TABLE -Tag öffnet die Tabelle (table = Tabelle).

Der TR-Tag erzeugt eine neue Spalte (tr = table row).

Der TD-Tag erzeugt eine neue Zelle (td = table data).

So, das sollte funktionieren, hier der Code:
Eine einfache Tabelle

Das Ergebnis:
einfache tabelle ergebnis

Wenn Sie jetzt die Zeilen 27 bis 34 nehmen, verdoppeln (kopieren) und vor dem Endtag der Tabelle einfügen, dann erhalten sie eine 2. Spalte.

HTML 2 Spalten

Wenn sie eine Tabelle haben, dann wollen Sie dieser vielleicht eine Struktur zuweisen.
Das machen Sie mit dem Thead-Tag, Tfood-Tag und dem Tbody-Tag.

Der Tabelle einen Kopf geben

Sie vergeben den Kopf der Tabelle mit dem Thead-Tag.
Das besondere daran ist, dass Sie diesen zunächst öffnen, dann den Tr-Tag für die Spalte verwenden und schließlich die Zelle mit dem TH Tag öffnen. Th steht für table header.

HTML Tabellenkopf

Der Inhaltsbereich der Tabelle

Sie haben nun der Tabelle einen Kopf gegeben. Jetzt wird es Zeit, der Tabelle einen Inhaltsbereich zu geben. Dieser wird mit dem Tbody-Tag erstellt.

Aussehen kann das so:

Tabellenbody

Der Tabelle einen Fuß geben

Zum Schluss geben wir der Tabelle noch einen Fuß. Den Fuß erstellen Sie mit dem Tfood-Tag.

Das sieht dann so aus:

tabellenfuß

Der Tabelle eine Überschrift geben

Um der Tabelle eine Überschrift zu geben, verwenden Sie das CAPTION-Tag.
Achtung: es darf nur eine Überschrift pro Tabelle geben!

Das Ganze machen Sie dann so:
tabellenueberschrift

Hier nochmal der gesamte Code mit dem Ergebnis:
HTML tabelle gesamtcode

Ergebnis:
Gesammtergebnis

Die Tabelle sichtbar machen.

OK, um das noch besser darstellen zu können, machen Sie noch die Tabelle sichtbar.
Dafür werden Sie die Rahmendicke beispielsweise auf 1 setzen.

So sieht das dann aus:
Tabelle sichbar machen

Das ersehnte Ergebnis:
Tabelle sichbar machen ergebnis

Mit Tabellen kann man natürlich auch die Seitenstruktur erstellen. Das ist allerdings eine sehr veraltete Technik. Daher zeige ich Ihnen beim nächsten Mal den DIV-Tag.

Im nächsten Blogbeitrag werden Sie daher nicht nur etwas über DIV-Boxen lernen, sondern auch mit CSS eine erste Gestaltung vornehmen.

Ich wünsche Ihnen einen schönen Samstag

Tobias Bettin

erstellt am: 24.03.2018 | Kategorie(n): HTML5 Kurs

Zurück zur Blogübersicht