Web-Entwicklung 3: Tabellen (HTML)
06.12.2008 von André Bräkling
Der letzte Teil dieser Serie ist schon verdammt alt (März 2008), also wird es höchste Zeit thematisch fortzufahren. Nun möchte ich mich mit HTML-Tabellen beschäftigen, CSS wird es erst in Teil 4 geben. Tabellen sind ein sehr mächtiges Werkzeug, denn sie eignen sich nicht nur zur Aufbereitung von Daten, sondern erlauben zudem die Erstellung vollständiger Webseiten-Designs, auch wenn die Verwendung von Tabellen dabei auch schon wieder überholt ist. In diesem Tutorial soll zunächst einfach nur erläutert werden, wie Tabellen überhaupt funktionieren… die weitere Ausgestaltung via CSS folgt dann im nächsten Teil, der hoffentlich nicht so lange auf sich warten lässt, wie dieser hier.
Einleitung
Natürlich kommen auch hier die schon bekannten Tags zum Einsatz. Ein Tabellenbereich wird immer durch das öffnende <table> und das schließende </table> markiert. Darin können dann die einzelnen Zellen ausgestaltet werden. Jede Zeile wird mit den <tr>-Tags ausgezeichnet, die einzelnen Zellen in dieser Zeile mit <td>. Für den Kopf der Tabelle gibt es noch den Alternativen Zellentag <th>, der im Gegensatz zu <td> den Text per Default zentriert und in Fettschrift formatiert.
Die erste Tabelle
Als Einstieg hier erstmal eine ganz simple Tabelle:
<table> <tr><td>Zeile 1 Spalte 1</td><td>Zeile 1 Spalte 2</td></tr> <tr><td>Zeile 2 Spalte 1</td><td>Zeile 2 Spalte 2</td></tr> </table>
Gestaltung von Tabellen
Im nächsten Teil über CSS wird gezeigt, wie sich die Tabelle u.a. auch mit Rahmen formatieren lässt. Doch nun soll die recht einfache Tabelle um einen Tabellenkopf ergänzt werden. Wie bereits erwähnt wird dazu anstelle des <td>-Tags der <th>-Tag verwendet:
<table> <tr><th>Name</th><th>Strasse und Nr.</th><th>PLZ Ort</th></tr> <tr><td>Max Mustermann</td><td>Musterstr. 27c</td><td>12345 Musterstadt</td></tr> <tr><td>Rita Musterfrau</td><td>Demoweg 13</td><td>123456 Musterstadt Vorort</td></tr> </table>
Damit die einzelnen Zellen nicht so aneinanderkleben kann man die Parameter cellspacing (Abstand zwischen den Zellen) und cellpadding (Abstand des Zelleninhalts zum Zellenrand) verwenden. Hier gibt es zwar auch CSS-Alternativen, aber zunächst sollten diese Parameter genügen. Damit der Unterschied klar wird, kommt zudem der Parameter border zum Einsatz, der später auch via CSS ersetzt wird.
Variante 1: cellspacing
<table cellspacing="10" border="1"> <tr><th>Name</th><th>Strasse und Nr.</th><th>PLZ Ort</th></tr> <tr><td>Max Mustermann</td><td>Musterstr. 27c</td><td>12345 Musterstadt</td></tr> <tr><td>Rita Musterfrau</td><td>Demoweg 13</td><td>123456 Musterstadt Vorort</td></tr> </table>
Variante 2: cellpadding
<table cellpadding="10" border="1"> <tr><th>Name</th><th>Strasse und Nr.</th><th>PLZ Ort</th></tr> <tr><td>Max Mustermann</td><td>Musterstr. 27c</td><td>12345 Musterstadt</td></tr> <tr><td>Rita Musterfrau</td><td>Demoweg 13</td><td>123456 Musterstadt Vorort</td></tr> </table>
Zellen kombinieren
Wer schon einmal mit einer Tabellenkalkulation gearbeitet hat, wird sicherlich auch die praktische Funktion kennen, um Zellen zu kombinieren. Auch HTML bietet diese Möglichkeit. Durch den Parameter colspan kann man definieren, über wieviele Spalten sich eine Zelle erstrecken soll, während rowspan gleiches für Zeilen ermöglicht. Beide Parameter lassen sich bei td und th verwenden.
Im Beispiel könnte man die Überschriften "Strasse und Nummer" und "PLZ Ort" z.B. zu "Adresse" zusammenfassen:
<table cellspacing="10" border="1"> <tr><th>Name</th>Adresse</th></tr> <tr><td>Max Mustermann</td><td>Musterstr. 27c</td><td>12345 Musterstadt</td></tr> <tr><td>Rita Musterfrau</td><td>Demoweg 13</td><td>123456 Musterstadt Vorort</td></tr> </table> Und zusätzlich einmal für Spalten:
<table cellspacing="10" border="1"> <tr><td></td><th>Name</th>Adresse</th></tr> <tr> Kunden</td><td>Max Mustermann</td><td>Musterstr. 27c</td><td>12345 Musterstadt</td></tr> <tr><td>Rita Musterfrau</td><td>Demoweg 13</td><td>123456 Musterstadt Vorort</td></tr> </table> Weiterführendes
Tabellen sind als ein recht einfaches, aber sehr effektives Mittel zur Strukturierung von Dokumenten. Weiterführende Informationen gibt es bei SelfHTML in der Sektion HTML/Tabellen. Wer seine Tabellen direkt mit CSS gestalten möchte, sollte sich zudem noch folgende Links ansehen:
- SelfHTML: Tabellenformatierung
- CSS Table Gallery – hier kann man verschiedene Layouts direkt ausprobieren und herunterladen.
Weitere Artikel zum Thema:
Kommentar schreiben
Kommentarregeln [In neuem Fenster öffnen]
Kommentare auf Braekling.de per RSS-Feed verfolgen
Dir hat dieser Beitrag gefallen?