CSS Webdesign Tabellen

Die Gestaltung von modernen barrierefreien Webseiten mittels CSS löst die Erstellung mit Tabellen ab. Tabellen werden nur noch nenötigt, um zum Beispiel tabellarische Daten darzustellen. In diesem Workshop geht es um das Erstellen von Tabellen. Wem das Erstellen einer Webseite bzw. die Einarbeitung in CSS trotz dieser Anleitung zuviel Arbeit ist, kann sich gerne melden, dass ich die Webseiten erstellen soll, ebenso wenn es um das Redesign geht. Wer mit der grundlegenden HTML-Syntax nicht so bewandert ist, der kann bei mir einen HTML-Kurs in Nürnberg, Fürth oder Erlangen als schnelles aber sehr gründliches Einzeltraining belegen.

Der Grundaufbau, wie Sie eine Tabbel in eine Webseite einfügen ist relativ einfach:
Mit <table> öffnen Sie die Erstellung einer Tabelle. Wenn Sie einen Rand wünschen schreiben Sie <table border="1">
Mit <tbody> eröffnen Sie den Tabellen body, qasi den Rumpf.
Alternativ können Sie eine Tabelle auch in logische Bereiche aufteilen.
Mit <thead> anstatt von <tbody> definieren wir in der darauf folgenden Zeile zuerst eine Überschrift, d.h. die Schrift wird automatisch fett dargestellt.
Mit <tr> erstellen Sie eine Zeile
Mit <td> erstellen Sie in der Zeile jeweils ein Spalte. Danach schließen Sie den tag wieder </td>
Sie sehen dass in der zweiten Zeile nur eine Spalte zu sehen ist, müssen wir natürlich definieren, indem wir schreiben: <td colspan="2" > d.h. erstrecke Dich über zwei Spalten - Anzahl Spalten
Wollen Sie dagegen dass sich eine Spalte über zwei Zeilen erstreckt schreiben Sie <th rowspan="2"> Anzahl Zeilen
Nun wird die erste Zeile wieder geschlossen mit </tr>
Falls Sie mit <thead> der ersten Zeile ein Überschriftformat zugewiesen haben, schliessen Sie das nun wieder mit </thead>
Jetzt können Sie wieder eine neue Zeile erstellen oder schliessen die Zelle ab mit </tr>
Sie können mit <tbody> erst einen Rumpf in der Tabelle und erzeugen dann mit <tr> eine neue Zeile erstellen.
Sie können Ihrer Tabelle z.B. auch einen Fussbereich hinzufügen den Sie einleiten mit <tfoot> und annn eine neue Zeile und die gewünschten Spalten einfügen. Danach mit </tfoot> den Fussbereich wieder schliessen.
Falls Sie <tbody> verwendet haben, schliessen Sie den Tabellen body mit </tbody>
Und zum Schluß beenden Sie die Tabelle mit </table>
Beispiel:

Einfache Tabelle

Zeile 1, Zelle 1	Zeile 1, Zelle 2
Zeile 2, Zelle 1	Zeile 2, Zelle 2

Tabelle mit colspan

Zelle eins, Zeile eins	Zellen zwei und drei, Zeile eins
Zelle eins, Zeile zwei	Zelle zwei, Zeile zwei	Zelle drei, Zeile drei

Tabelle mit Kopf, Fuß und Rumpf

thead Zeile1, Spalte 1	thead Zeile1, Spalte 2
tfoot	tfoot
tbody Z1, S1	tbody Z1, S2
tbody Z2, S1	tbody Z2, S2

Besonders ausführlich sind die Erklärungen und Anleitung auch in den folgenden Büchern zum Webdesignmit CSS

Little Boxes, Teil 1. Webseiten gestalten mit CSS.	Little Boxes, Teil 2. Webseiten gestalten mit CSS.	Die Little Boxes-Box, 2 Bde inkl. CD-ROM