HTML-Tabellen setzen sich aus Zeilen und Spalten zusammen.
Wie Kalkulationstabellen.
Sie sind für die Anzeige von Daten gedacht, z.
B.
Verkaufszahlen, Wetterstatistiken oder Sportergebnissen, so wie in diesem Beispiel.
Lange Zeit haben Designer Tabellen für die Definition von Seiten-Layouts verwendet.
Das verursacht aber Probleme bei der Barrierefreiheit für Blinde und Menschen mit anderen Behinderungen.
Tabellen sollten daher nur für Daten verwendet werden.
Sehen wir uns an, wie man eine Tabelle in Dreamweaver CC einfügt.
Zunächst lege ich eine neue, leere HTML-Seite an.
Ich wähle „Datei“ (File), „Neu“ (New), „HTML“ und unter „Layout“ die Option „Kein“ (none).
Diese Seite speichere ich im Site-Verzeichnis „DWCC2014\exercises“ als „table_insert.html“.
Es gibt mehrere Methoden zum Einfügen einer Tabelle.
Wichtig ist, dass man sich in der Ansicht „Entwurf“ (Design) befindet.
In der Live-Ansicht kann man keine Tabellen einfügen.
Prinzipiell geht das schon, aber es ist sehr schwierig.
Im Menü „Einfügen“ (Insert) gibt es die Option „Tabelle“ (Table).
Die Tastenkombination ist Strg+Alt+T unter Windows bzw.
Befehl+Wahl+T auf einem Mac.
Sie können auch das Bedienfeld „Einfügen“ (Insert) verwenden.
Im Bedienfeld „Einfügen“ muss „Allgemein“ (Common) ausgewählt sein im Menü links oben im Bedienfeld.
Hierüber können Sie eine Tabelle einfügen.
Wenn Sie darauf klicken, wird das Dialogfeld „Tabelle“ (Table) geöffnet.
Hier legen Sie die Anzahl Zeilen (Rows) und Spalten (Columns) fest.
Sie können die Anzahl Zeilen und Spalten jederzeit ändern.
Ich möchte sechs Zeilen und drei Spalten.
Die Tabellenbreite (Table width) lässt man am besten leer, weil sich Tabellen automatisch erweitern, wenn Sie Inhalte eingeben.
Die Randstärke (Border thickness) sollte in HTML5 nicht mehr als ein Pixel betragen.
Wenn Sie einen dickeren Tabellenrand möchten, legen Sie ihn per CSS fest.
Die meisten Tabellen sehen ohne Rand besser aus, also lösche ich den Wert.
Mit „Zellauffüllung“ (Cell padding) legt man die horizontalen und vertikalen Abstände innerhalb der Tabellenzellen fest.
Der eingegebene Wert wird auf alle Seiten der Zelle angewendet.
In HTML5 ist die Zellauffüllung inzwischen veraltet.
Man definiert sie besser mit CSS.
Dasselbe gilt für den Zellabstand (Cell spacing).
Damit wird der äußere Abstand um jede Zelle herum definiert.
Mit CSS gelingt das viel besser.
Im nächsten Abschnitt bestimmen Sie die Zellen für die Kopfzeile (Header): „Keine“ (None), „Links“ (Left), „Oben“ (Top) oder „Beide“ (Both), also links und oben.
Ich wähle „Beide“ (Both).
Im Abschnitt „Eingabehilfen“ (Accessibility) kann man eine Beschriftung (Caption) hinzufügen.
Falls eine Beschriftung für Ihre Tabelle vorgesehen ist, sollten Sie hier schon einmal Platzhaltertext eingeben.
Sie können das Dialogfeld „Tabelle“ nämlich nicht mehr aufrufen, nachdem die Tabelle erstellt wurde.
Wenn Sie hier keine Beschriftung eingeben, müssen Sie später den zugrundeliegenden HTML-Code aufrufen und die Beschriftung manuell einfügen.
Ich gebe „Placeholder caption“ (Platzhalterbeschriftung) ein.
Die Zusammenfassung (Summary) wird in HTML5 nicht mehr verwendet.
Zusammenfassungselemente für Tabellen waren auf Web-Seiten nie zu sehen.
Sie wurden nur zum Zwecke der Barrierefreiheit verwendet.
Heute wird stattdessen eine Beschriftung empfohlen oder eine andere Art der Inhaltsbeschreibung für eine Tabelle.
Ich habe meine Optionen gewählt und klicke auf „OK“.
Die Beschriftung mit Platzhaltertext und die Tabelle werden eingefügt.
Solange die Tabelle leer ist, ist es schwierig, etwas in die Zellen einzufügen.
Ich positioniere den Cursor auf der Tabelle, rufe per Rechtsklick bzw.
Ctrl-Klick das Kontextmenü auf, wähle „Tabelle“ (Table) und dann ganz unten „Erweiterter Tabellenmodus“ (Expanded Tables Mode).
Die Zellen werden erweitert.
Jetzt kann man leichter Text darin einfügen.
Das hier ist nur ein visuelles Tool von Dreamweaver CC.
Die Tabelle wird in keiner Weise verändert, und auch nicht der zugehörige HTML-Code.
Es macht es nur einfacher, in eine Zelle zu klicken und Text einzugeben.
Ich gebe eine Überschrift ein.
Mit der Tabulatortaste springe ich zur nächsten Zelle.
Nachdem ich die erste Zeile ausgefüllt habe, beende ich den erweiterten Tabellenmodus, indem ich hier oben auf „Beenden“ (Exit) klicke.
Die Tabelle wird auf die tatsächliche Größe reduziert.
Weil ich die Kopfzeile oben und links definiert habe, ist der Text in der oberen Zeile fett.
Ich klicke in diese Zelle und gebe eine Zahl ein.
Sie wird ebenfalls fett und zentriert gesetzt, weil sie Teil eines TH-Elements ist.
In der Zelle daneben wird die Eingabe links ausgerichtet als normaler Text, weil diese Zelle als TD-Element definiert ist („TD“ steht für „Table Data“).
Als ich meinen Text eingegeben habe, wurden die Tabellenzellen automatisch erweitert, passend zum Inhalt.
In der Ansicht „Entwurf“ (Design) zeigen diese gepunkteten Linien an, wo die Tabellenzellen sind.
In der Live-Ansicht sind sie nicht mehr sichtbar.
So sieht die Tabelle im Browser aus.
In der Ansicht „Entwurf“ (Design) kann ich die Tabelle weiter mit Inhalten füllen.
Es gibt mehrere Methoden zum Einfügen einer Tabelle in Dreamweaver CC: Man kann im Bedienfeld „Einfügen“ (Insert) auf „Tabelle“ (Table) klicken.
Dabei muss links oben die Kategorie „Allgemein“ (Common) ausgewählt sein.
Oder man wählt im Menü „Einfügen“ (Insert) die Option „Tabelle“ (Table).
Oder man drückt Strg+Alt+T unter Windows bzw.
Befehl+Wahl+T auf einem Mac.
Die Tabelle wird dort eingefügt, wo sich der Cursor gerade in der Ansicht „Entwurf“ (Design) befindet.
Im Dialogfeld „Tabelle“ legt man die Anzahl Zeilen und Spalten fest.
Den Wert für die Breite entfernt man am besten, da Tabellen automatisch erweitert werden, wenn sie mit Inhalten gefüllt werden.
Man sollte außerdem angeben, ob und wo Kopfzeilen enthalten sein sollen: links, oben, links und oben oder keine.
Man kann eine Tabellenbeschriftung hinzufügen, die meist oberhalb der Tabelle angezeigt wird, aber per CSS unter die Tabelle verschoben werden kann.
