05 Tabellen

Einstieg in das Thema

Worum geht es?

Daten müssen übersichtlich dargestellt werden. Neben Listen (Aufzählungen) sind natürlich die Tabellen zu nennen. Auch HTML beherrscht Tabellen. Man kann Tabellen aber auch noch an anderen Stellen benutzen.

Was ist das Ziel?

Am Ende der Einheit

weißt du, wie man Tabellen erstellt,
weißt, wozu man unsichtbare Tabellen benötigen kann und
kannst Tabellenzellen nicht nur mit Text füllen.

Erarbeitung

Theorie

Ein Hinweis

Anordnungen sollte man nicht mit unsichtbaren Tabellen machen. Allerdings funktionieren viele Beispiele mit Boxen nicht. Somit sind die unsichtbaren Tabellen eine erlaubte Notlösung.

Übung

Aufgaben

Du siehst eine Tabelle im Bild:

Baue diese Tabelle inhaltlich nach. Sie wird vermutlich nicht so elegant aussehen, aber das ist egal.

Aufgabe 1

Schreibe das border-Attribut in <table>: <table border=1>. Was ändert sich?

Aufgabe 2

Untersuche, wie man Bilder in Tabellenzellen unterbringen kann.

Aufgabe 3

Erstelle eine unsichtbare Tabelle mit 2x2 Zellen. In den Zellen links und rechts unten soll Text stehen, in den anderen beiden Zellen sollen Bilder sein.

Aufgabe 4

Was macht man mit colspan? Versuche dich auch an einem Beispiel.

Vertiefung

Aufgabe 5

Man kann Tabellen recht einfach mit <table>, <tr> und <th>, <td> aufbauen, aber auch mit <thead> und <tbody>. Was ist der Unterschied?

Aufgabe 6

Kann man Tabellen in Tabellen packen?

Aufgabe 7

Manchmal (z.B. in Zeitschriften, aber auch Lehrbüchern) ist langer Text auf einer Seite auf zwei oder gar drei Spalten aufgeteilt. Damit wird dieser leichter lesbar. Erläutere, warum das keine gute Idee ist, dies mit unsichtbaren Tabellen zu machen.

Komplexe Aufgabe ohne KI

Erstelle eine Seite auf Basis der Vorlage mit einer Tabelle, die drei Zeilen und zwei Spalten hat. Die obere Zeile ist als Überschrift erkennbar, in den anderen vier Zellen ist in zwei Zellen Text, in einer Zelle ein (kleines) Bild und in einer Zelle ein Link.

Arbeite effektiv! Erstelle keine neuen Bilder, nimm altes Material.

Lasse dein Resultat von Nachbarn oder der KI prüfen. Was waren deine beiden größten Fehler?

Zusammenfassung

Was musst man wissen/können?

Du weißt

mit den Begriffen Zelle, Zeile und Spalte umzugehen,
wie man diese in HTML angibt und
wie man die Titelzeile der Tabelle angibt.

Man muss Informationen in Tabellen zerlegen können, also Spalteninhalte festlegen. Das kann gern auf Papier erfolgen.
Dann muss man die Tabellenstruktur mit HTML-Elementen nachbilden können.
Das Ein- und Ausschalten eines Rahmens sollte man beherrschen.
Ebenso sollte man die Spaltenbreite (auch relativ) anpassen können.

Weitere Verfeinerungen kommen später mit CSS.

Wie geht es weiter?

Es steht eine kleine Prüfung an. Die Prüfungsvorbereitung soll dir helfen.