HTML-Tutorial: Die Grundlagen (4)

Tabellen mit HTML

Das lernen Sie hier:
Die Darstellung einer Seite in Tabellenform kann notwendig sein, wenn sonst die Zusammenhänge nur schwer erkennbar wären. In HTML gibt es umfangreiche Möglichkeiten für passend gestalteten Tabellensatz.

Aufbau einer Tabelle mit HTML

Eine Tabelle hat Zeilen und Spalten. Daran orientiert sich der HTML-Tabellensatz strikt. Auch wenn der HTML-Code einer Tabelle durch die vielen Tags für den Anfänger schnell abschreckend aussieht, ist alles halb so schlimm, wenn man ewas Ordnung hält.

Die Tags für den Tabellensatz

Wenn man eine HTML-Tabelle ganz ohne weitere Hilfsmitel von Hand im Editor aufbaut, entstehen die mit Abstand häufigsten Fehler durch vergessene oder falsch platzierte schließende Tags. Man tut also sehr gut daran, wenn man immer dann, wenn man ein öffnendes Tag in der Tabelle schreibt, auch gleich das schließende Tag mit einträgt und auf übersichtlichen Aufbau des Codes achtet. Ich verwende dafür Einrückungen. Ich finde, das hilft sofort zu erkennen, auf welcher "Tiefe" man sich gerade bewegt.

Die einfachste mögliche Tabelle

Eine Tabelle besteht auf jeden Fall aus einer Zelle (oder Kästchen). Ohne wäre es keine Tabelle. Im HTML-Code sieht diese Minimal-Tabelle so aus:

<table>
   <tr>
      <td>Text in der Tabelle</td>
   </tr>
</table>

Eine solche Tabelle mit nur einer einzigen Zelle macht in der Praxis natürlich nur wenig Sinn. Schauen wir uns also eine etwas umfangreichere Tabelle an:

Eine 3 x 2 - Tabelle und drei nützliche Attribute

1. Zeile 1. Spalte 1. Zeile 2. Spalte 1. Zeile 3. Spalte
2. Zeile 1. Spalte 2. Zeile 2. Spalte 2. Zeile 3. Spalte

und der HTML-Code dazu:

<table border="2" cellpadding="8" cellspacing="2">
   <tr>
      <td>1. Zeile 1. Spalte</td>
      <td>1. Zeile 2. Spalte</td>
      <td>1. Zeile 3. Spalte</td>
   </tr>
   <tr>
      <td>2. Zeile 1. Spalte</td>
      <td>2. Zeile 2. Spalte</td>
      <td>2. Zeile 3. Spalte</td>
   </tr>
</table>

Die Zahl bei diesen drei Attributen meint Pixel - also ein 2 Pixel breiter Rand, 8 Pixel Abstand des Zellinhalts zum Zellrand und 2 Pixel Abstand zwischen den einzelnen Zellen in unserem Beispiel hier.

Mehrere Zellen zusammenfassen

Zellen lassen sich auch gruppieren. Dazu gibt es die beiden Attribute colspan (fasst innerhalb einer Zeile zusammen) und rowspan (fasst innerhalb einer Spalte zusammen). Zusammen mit den geeigneten Attributen für die Ausrichtung kann dann z.B. eine solche Tabelle entstehen:

Obst
5 kg Ananas
2 kg Erdbeeren
Himbeeren

und der Quellcode dazu:

<table border="2" cellspacing="2" cellpadding="8">
   <tr align="center">
      <td colspan="2"><b>Obst</b></td>
   </tr>
   <tr>
      <td>5 kg</td>
      <td>Ananas</td>
   </tr>
   <tr>
      <td rowspan="2" valign="middle">2 kg</td>
      <td>Erdbeeren</td>
   </tr>
   <tr>
      <td>Himbeeren</td>
   </tr>
</table>

Manchmal gibt es auch mehrere Möglichkeiten, wo man die Ausrichtung vornimmt. Die Überschrift Obst wurde hier mit einem Attribut im tr-Tag zentriert. Man hätte aber dasselbe Ergebnis erhalten mit dem Attribut im td-Tag, weil diese Zeile ja jetzt nur noch eine (zusammengefasste) Zelle hat.

Ist Ihnen übrigens aufgefallen, dass scheinbar unterschiedlich viele Zellen in manchen Zeilen sind (siehe z.B. bei den Himbeeren)? Das ist kein Irrtum, sondern durch das rowspan-Attribut in der Zeile drüber ist eine Zelle ja schon vergeben und deshalb in der Zeile Himbeeren nur noch eine Zelle aufgeführt.

HTML-Tutorials

Eine einfache Textseite aufbauen

Bilder und Links einbauen

Attribute in HTML

Tabellensatz mit HTML

Zwischenstand und Übung

CSS-Tutorials

Was ist CSS und wie funktioniert es?


[ andere Tutorials ]