Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Little Boxes – die HTML-Basics

Tabellen unterteilen in Kopf, Fuß und Rumpf

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In HTML können Sie eine Tabelle in die logischen Bereiche Kopf, Fuß und Rumpf unterteilen. Die Elemente dazu heißen thead, tbody und tfoot. Außerdem sehen Sie, wie man Tabellenzellen mit den Elementen colspan und rowspan verbinden kann.

Transkript

In einer HTML-Tabelle kann man zusätzlich zu den Zeilen und Zellen noch logische Bereiche deklarieren, nämlich den Kopfbereich, thead, den eigentlichen Inhaltsbereich tbody und einen Fußbereich für die Zelle tfoot. Da ändert sich im Browser im Moment gar nichts. Trotzdem ist es eine sehr sinnvolle Maßnahme, um später im CSS getrennte Bereiche einfach gestalten zu können. Und auch für andere Zwecke ist das gar nicht schlecht, wenn man so sauber arbeitet. Also, ich zeige das einmal hier, thead. So, und den schneide ich aus und setze ihn hier zum Beispiel da wieder hinter. Dann haben wir einen Bereich, der heißt tablehead, thead abgekürzt. Das ist der Kopfbereich und dann kann man später im CSS mit einem Selektor einfach sagen "Mache den Bereich thead mit einer anderen Hintergrundfarbe!" Ansonsten sind das einfach alles nur Zeilen und damit man die besser unterscheiden kann, macht man hier diese logischen Bereiche. Nicht "tobdy", sondern tbody ist der zweite. So. Und ganz unten drunter kommt der tfoot. Ich lass im body mal zwei Zeilen. So, und hier kommt jetzt tr. td, Fußbereich 1 und td Fußbereich 2. Das wird sich gleich ändern, deswegen schreibe ich hier nur etwas Einfaches rein. So, wir haben tfoot, tbody und thead, Sie achten auf die Einfärbung und das sind zusätzliche Bereiche. Wir können jetzt den Innenbereich noch ein bisschen einrücken, damit man die eigentlichen logischen Bereiche besser erkennen kann hier in der Einrückung, so sieht man das. OK. So, im Browser hat sich nichts geändert. Ich gehe hier mal tabellen- logische-Bereiche, öffne die im Firefox. Und Sie sehen gegenüber der einfachen Tabelle hat sich offiziell hier vom Optischen, außer dass der Fußbereich dazu gekommen ist, nichts geändert. Aber es gibt jetzt zusätzliche logische Bereiche, um zu sagen "Das ist thead, das ist tbody und das ist tfoot". Ganz früher war es einmal Pflicht, dass der tfoot weiter oben steht, direkt nach dem head. Also das war die anatomisch etwas seltsamere Reihenfolge thead tfoot tbody. Das ist heutzutage nicht mehr nötig. Wenn Sie das noch irgendwo sehen, das ist historisch bedingt. Was ich Ihnen noch zeigen möchte zu Tabellen, ist, wie man Zellen verbinden kann. Hier im Fußbereich zum Beispiel würde ich es viel schöner finden, wenn da nur eine Zelle wäre, die durchläuft. Also, ich geb hier mal einen Kommentar ein und sage "zweites td entfernt". So, und dann bekommt die andere Zelle ein Attribut, das heißt colspan- Spanne über Spalten-"2". Das ist eigentlich gar nicht so schwierig. Column heißt Spalte und span heißt "erstrecke dich über, umspanne" Also, diese Zelle soll so viel Wert sein, wie zwei andere td-s hier oben. Deswegen muss das zweite td auch weg. So, jetzt habe ich hier "Fußbereich erstreckt sich über zwei Spalten". Speichern im Browser, neu laden. Und Sie sehen hier, das ist das colspan in Aktion. Der Fußbereich erstreckt sich über zwei Spalten. Wenn man jetzt das Ganze über Zeilen machen möchte, dann könnte man das mit rowspan machen. Und rowspan erstreckt sich dann über zwei Zeilen. Ich zeige Ihnen das hier einmal, dann schreibe ich hier ein rowspan="2". Der erstreckt sich über zwei Zeilen. Zeile 1 und 2 müsste das dann heißen. Und diese Spalte müsste dann weg. Ich kommentiere sie einfach mal aus. So, dann können wir sie schneller wieder aktivieren. Und im Browser sieht es dann so aus. Hier nach einem Neuladen sehen Sie hier colspan erstreckt sich über zwei Spalten. rowspan erstreckt sich über zwei Zeilen. Damit kann man auch unregelmäßige Tabellenstrukturen bauen.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 3 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 3 min (41 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!