Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – die HTML-Basics

Einfache Tabellen mit table, tr und td gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Eine einfache HTML-Tabelle besteht aus den drei Elementen table, tr und td. Lassen Sie sich in diesem Film erklären, wie Sie mit diesen Elementen einfache Tabellen auf Ihrer Webseite gestalten können und auf welche Fallstricke Sie achten sollten.

Transkript

Tabellen wurden vor vielen Jahren im HTML zum Layouten von Webseiten missbraucht, um Objekte auf der Webseite zu posizionieren. CSS hat diese Rolle inzwischen übernommen und so werden Tabellen nur noch entsprechend ihrer ursprünglichen Bestimmung eingesetzt, nämlich zur Darstellung von tabelarischen Daten. Eine einfache Tabelle, die ich hier gleich aufbauen werde, in der Datei tabellen-einfach.html, die basiert auf der vorlage.html, speichern unter und ein paar Sachen gerändert. Sie brauchen drei Elemente für eine einfache Tabelle. Der erste heißt table. table und /table sind Anfang und Ende der Tabelle. table heißt im Englischen nicht nur Tisch, sondern auch Tabelle. Innerhalb einer Tabelle gibt es Tabellenzeilen. Ich mach gleich mal zwei Stück. Die beginnen mit tr und enden mit /tr. Innerhalb einer Tabellenzeile gibt es Tabellenzellen. Die heißen td für table data. Ich schreibe hier gleich mal hin. Zeile 1, Spalte 1. Und da unten drunter kommt noch eine Zelle. Das ist die zweite Zelle in dieser Zeile. Also ist das die zweite Spalte. Zeile 1, Spalte 2. Sie sehen, es gibt kein Element zum Erstellen von Spalten. Die Spalten stehen im Quelltext untereinander. Das ist die erste Spalte, das ist die zweite Spalte, wie Sie gleich sehen werden. So, td Zeile 2 sehen wir jetzt. Spalte 1. Tabellen sind nicht wirklich schwierig, sie sind nur ein bisschen unübersichtlich, weil eben, wie gesagt, die Spalten untereinander stehen. So, und das ist fertig. Jetzt füge ich dem Anfangstag table noch ein Attribut hinzu, das heißt border und in Anführungssrichen den Wert 1, damit man die Struktur der Tabelle sehen kann. Das ist bei der Bearbeitung manchmal recht hilfreich. So, jetzt gehe ich rüber. Hier tabellen-einfach öffnen im Firefox. Und Sie sehen, einmal neu laden, sicherheitshalber hier sehen Sie die Tabelle. Zeile 1, Spalte 1, table /table. tr, noch ein tr. Und in jeder tr gibt es zwei td-s. Das ist eine einfache Tabelle zum Schreiben von tabelarischen Daten in HTML. Es gibt noch ein viertes Element, das heißt th für table heading. Das ist eine Überschrift, dazu füge ich am Anfang noch mal eine neue Zeile ein und schreibe hier nicht td, sondern th. Sie sehen hier Überschrift Spalte 1. Dann machen wir hier gleich noch eine für die zweite Spalte. Überschrift Spalte 2. Einmal speichern, tr stimmt, th th und so weiter. Das bleibt alles so, wie es ist. Neu laden und Sie sehen hier Überschrift Spalte 1 und die th-Elemente werden von den Browser-Stylesheets fett gedruckt, automatisch fett gedruckt. Also th für die Überschriften, td hier für die Zellen.

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...
 

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!