HTML Tutorial: Tabellen (Grundlagen)

Tabellen kann man sich in HTML fast wortgenau vorstellen. Es wird eine Maske in Form einer klassischen Tabelle, bestehend aus Zeilen (waagerecht) und Spalten (senkrecht) erstellt, in der die Zellen (Schnittpunkte von Zeilen und Spalten) mit Inhalten gefüllt werden können.

Im Bereich Webdesign werden Tabellen neben ihrer klassischen Funktion - der übersichtlichen Darstellung von Daten - auch zum Gestalten der Webseite verwendet. Lange Zeit stellten Tabellen eine Möglichkeit dar, Webseiten ähnlich wie mit Frames aufzuteilen. Seit dem verstärkten Einsatz von CSS gibt es dafür inzwischen auch CSS-Lösungen, wobei auch heute viele Designer gerne auf Tabellen-Layouts zurückgreifen und diese in bestimmten Bereichen auch am sinnvollsten sind.

1.1 Die erste Tabelle

Um das Prinzip der Tabellen zu präsentieren, starten wir auch diesmal wieder direkt mit einem Beispiel. Das folgende Beispiel stellt eine Tabelle mit zwei Zeilen und zwei Spalten dar. Direkt im Anschluß findet man dann auch die Erklärung zum Code:

Praxisbeispiel
ZEILE 1 SPALTE 1 ZEILE 1 SPALTE 2
ZEILE 2 SPALTE 1 ZEILE 2 SPALTE 2
Code
<html>
<body>

<table border="1">
   <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>

</body>
</html>

Eröffnet wird eine Tabelle immer mit dem Tag <table>, geschlossen mit dem Befehl </table>. Das dürfte kein Problem sein.

Das Tag <table> enthält jedoch auch ein Attribut namens border. Übersetzt aus dem Englischen heißt border soviel wie "Grenze". Der Wert von border, in unserem Beispiel 1 gibt also die Dicke des Rahmens, der Grenze der Tabelle an. Ist der Wert gleich Null, so hat die Tabelle keinen Rahmen - bei einem Wert von z.B. 10 würde es einen ziemlich dicken Rahmen geben. Es lohnt sich hier einige Werte auszuprobieren um den Effekt zu sehen!

Hinweis zu XHTML
In XHTML ist das Attribut border nicht mehr erwünscht und sollte nicht verwendet werden. Tabellen in XHTML werden standardmäßig ohne Gitternetzlinien oder Rahmen angezeigt (also wie mit einem unsichtbaren border="0"). Möchte man einer Tabelle einen Rahmen verleihen, muss dies über CSS erfolgen, was leider bei allen Browsern noch nicht ganz reibungsfrei klappt, weshalb einige Webdesigner immer noch auf border zurückgreifen.

Als nächstes folgt das <tr>-Tag in unserer Tabelle, welches einige Zeilen später wieder mit </tr> beendet wird. Jedes <tr>-Tag erstellt eine Zeile in unserer Tabelle. Innerhalb des <tr>-Tags haben wir oben zwei <td>-Tags, die auch jeweils geschlossen werden bevor der </tr>-Tag geschlossen wird. jedes der <td>-Tags erstellt dabei eine Zelle in der aktuellen Zeile. Zur Erinnerung: Eine Zelle ist der Schnittpunkt aus Zeile und Spalte. Es werden in HTML also keine Spalten an sich definiert, sondern nur Zeilen und Zellen, woraus sich die Spalten automatisch ergeben. In unserem Beispiel wurde das <tr>-Tag anschließend noch einmal wiederholt um eine zweite Zeile zu erzeugen.

Achtung!
Jede Zeile muss in HTML gleich viele Zellen enthalten. Wenn eine Zeile mehr Zellen als andere Zeilen derselben Tabelle hat, erhalten alle automatisch so viele Zellen, um gleich viele zu haben. Dies führt jedoch oft zu optischen Fehlanzeigen im Layout, weshalb man hier besonders aufpassen sollte!
Häufig gestellte Fragen
Ich wollte in der ersten Zeile zwei Spalten und in der zweiten Zeile 5 Spalten machen, doch das ganze sieht irgendwie komisch aus...
Es handelt sich nicht um einen Fehler des Programms. In solch einem Fall muß man auch in der ersten Zeile 5 Spalten setzten, dann aber den gewünschten Text nur in die Spalten reinschreiben wo er optisch paßt.
Das mit dem Zentrieren der Tabelle klappt nicht, warum?
Tabellen sollten am besten mit CSS zentriert werden. Füge dazu innerhalb von <table> das Attribut style="width: 500px; margin: auto;" ein. Definiere dabei mit width: 500px die Breite der Tabelle - das margin: auto sorgt dann für die Zentrierung (ohne der Breitenangabe funktioniert die Zentrierung nicht).

Damit kennst du nun die Grundlagen von Tabellen in HTML. Im nächsten Abschnitt wird erklärt, wie man die Breite der Tabellenzellen festlegen kann, was eines der wichtigsten Design-Elemente von Tabellen darstellt.

Weiterlesen...
©2001-2010 PlanetHTML und Robert R. Agular --- Impressum