Mathe und Info

Seite

Tabellen

Sinn und Zweck

Tabellen sind grundlegend für jede Art der Darstellung von Daten. Tabellen sind die Grundlage bei jedem Websiten Design, welches mit Hilfe einer Datenbank erzeugt wird. In der Regel werden die Daten per PHP aus der Datenbank geholt und anschließend mit Hilfe von Tabellen dem Benutzer dargestellt. Dies ist jedoch Thema des Faches Datenbanken. Daher wird hier zunächst auf die Grundlagen von Tabellen und deren Formatierung/Design eingegangen.

Beispiel

Eine Tabelle könnte zum Beispiel so aussehen

1	2	3
4	5	6

der entsprechende Code sähe dann so aus, man beachte die CSS-Formatierungsanweisungen.

Man erkennt, dass eine Tabelle immer Zeilenweise aufgebaut wird.
Eingeleitet wird jede Zeile durch das <tr> Tag. Das steht für Table Row.
Jedes Tabellenelement (table data) ist in ein <td> Element verpackt.

Dabei ist die Reihenfolge wichtig. Auch kann man nicht in einer Tabelle beliebig verschiedene Elemente anordnen. Es ist zum Beispiel nicht erlaubt mitten in einer Tabelle plötzlich einen Absatz mit <p> zu definieren. Alle Fälle hier aufzulisten würde den Rahmen sprengen, daher verweise ich auf die SelfHTML Dokumentation, wo ausreichend Beispiele vorhanden sind.

Jedes Element einer Tabelle entspricht wieder einem HTML Element und kann daher auch mit den normalen Style-Anweisungen formatiert werden. Allerdings gibt es auch hier Ausnahmen.
Zum Beispiel kann man in dem <tr> keine Styles definieren. D.h. man kann schon, aber sie werden vom Browser nicht dargestellt.

Eigentlich ist es ganz einfach, trotzdem gibt es sehr häufig die

typischen Fehler

Verschachtelungs-Reihenfolge zwischen <table> und <tr> und <td> falsch
</td> vergessen
falsche Style Attribute für das jeweilige Element
Vertauschung von Zeilen und Spalten
Unterschiedliche Anzahl <td> Elemente in verschiedenen Zeilen (tr)

Infoblätter und Arbeitsblätter

Das Table Tag und Übungen
Info: enthält eine genaue Funktionsbeschreibung des Table-Tags und Übungsaufgaben zum Umgang mit Tabellen und Formatierung mit CSS.