HTML verstehen Teil 6: Tabellen I

HTML verstehen: Tabellen

So, in diesem Artikel kommen wir nun endlich zu den versprochenen Tabellen in HTML. Einige von Ihnen werden mich jetzt verteufeln, da ich Ihnen hier nur die HTML-Tabelle ohne Unterstützung von CSS darstellen werde. Die HTML-Tabellen zu verstehen, ist ohne CSS schon relativ anspruchsvoll, deshalb will ich Sie nicht mit einer ausholenden Einführung in CSS belasten. Ich zeige Ihnen die HTML-Tabelle und stelle Ihnen ein paar Beispiele vor, in erster Linie, damit Sie die Struktur verstehen und sich helfen können.

Zunächst zu der Geschichte der Tabelle in der „Frühzeit“ des HTML.

Es ist noch gar nicht so lange her, da war die HTML-Tabelle, das meist benutze Tag innerhalb einer Webseite. Man kannte damals noch kein CSS und baute eine Webseite nur unter Verwendung von ineinander geschachtelten Tabellen auf. Da war der linke und der rechte Rand, die Kopfzeile und die Fußzeile zu verwalten. Abstände zwischen den Rändern wurden ebenfalls unter Tabelleneinsatz realisiert.

Es gibt heute noch Composer, die genau solche Strukturen aufbauen. Nach außen sieht das schon gut aus, doch schaut man sich den Quelltext einer solchen Tabelle an, dann weiß man oft nicht, wo man etwas einstellen kann. Das ganze sah dann in einfach etwa so aus.

altes Seitenlayout

Jedes farbige Rechteck ist eine Tabelle oder Tabellenkörper, und jeder Bereich besteht selbst wieder aus Tabellen.

Dies alles macht man heute unter Einsatz von CSS ohne Tabellen. Eine Tabelle tritt heute nur noch innerhalb des Textbereiches einer Seite auf! Ja es gibt sogar eine Art Sport, eine Seite ganz ohne Tabellen aufzustellen mit beliebiger Komplexität. Soweit brauchen Sie aber nicht zu gehen, es sei denn, Sie verspüren Lust dazu, dann halte ich Sie natürlich nicht davon ab, denn Sport soll ja gesund sein 🙂

Gerade vor kurzem hat mich jemand angesprochen der ein OptIn-Formular von einer Angebotsseite heruntergeladen hatte und sich damit nicht mehr zurechtfand. Dieses kleine Formular hatte 4 in einander geschachtelte Tabellenkörper, für ein Bildausgabe von max. 10 x 15 cm! Sie sehen, es gibt die alte Tabelle immer noch, und Sie sollen sich damit zurecht finden.

Zwischen den einzelnen HTML-Versionen wurde immer etwas an den Tabellen neu definiert. Es kamen neuen Tabellen-Tags dazu. Ich möchte hier im ersten Teil der Tabellen, zunächst nur die Grundbegriffe darstellen.

Eine Tabelle ist wie folgt aufgebaut:

altes Seitenlayout2

Sie benötigen also Tag-Paare um eine Tabelle zu erstellen:

  1. <table> …. </table> ⇒ Beginn und Ende der Tabelle
  2. <tr> …. </tr> ⇒ Beginn und Ende einer Zeile
  3. <td> …. </td> ⇒ Beginn und Ende einer Spalte
  4. <th> …. </th> ⇒ Beginn und Ende Kopfzeile

Lassen Sie uns also mal eine einfache Tabelle erstellen: Die Tabelle soll eine Kopfzeile und 3 Zeilen und 2 Spalten haben:

Tabellenkopf
Zeile 1, Spalte 1 Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2
Zeile 3, Spalte 1 Zeile 3, Spalte 2

Und das müssen Sie eingeben, wenn Sie Tabelle so anzeigen wollen:

<table border=“1″>
  <tr>
    <th>Tabellenkopf</th>
  </tr>
  <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>
  <tr>
    <td>Zeile 3, Spalte 1</td>
    <td>Zeile 3, Spalte 2</td>
  </tr>
</table>

Sie sehen wie notwendig es ist hier mit Einrückungen zu arbeiten, denn wenn ich – was auch gehen würde – das Ganze ohne Einrückungen darstellen würde, würde ich Ihren Geist beschädigen!

<table border=“1″> <tr> <th>Tabellenkopf</th></tr> <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><tr> <td>Zeile 3, Spalte 1</td> <td>Zeile 3, Spalte 2</td>
</tr> </table>

Sie sollten sich schon die Mühe machen und eine Tabelle schön formatieren, um so leichter ist sie in HTML lesbar.

Bedenken Sie: Nach jedem <td> muss nicht notwendig Text folgen, es kann auch wieder eine Tabelle folgen. Der Komplexität sind keine Grenzen gesetzt. Außerdem kann man innerhalb einer Zeile noch Spalten beliebig zusammenfassen, so dass die Struktur der Tabelle nicht mehr so schön symmetrisch ist wie unsere sondern richtig komplex.

Für den nächsten Teil werde ich mir mal eine komplexe Struktur überlegen und darstellen, bevor Sie dann die einzelnen Attribute der Tags kennenlernen.

Für diesen Artikel kam es mir nur darauf an, dass Sie die Struktur einer einfachen Tabelle verstehen und verinnerlichen können, denn es wird komplizierter 🙂

Gruß
Bernd Klüppelberg

2 Responses to HTML verstehen Teil 6: Tabellen I
  1. Geldverdie
    Januar 18, 2011 | 23:24

    ist gar nicht so einfach mit dem Html, das alles zu behalten

  2. bernd
    Januar 19, 2011 | 05:26

    Hallo Steffen,
    beim manuellen Schreiben einer Tabelle machst Du doch fast
    schon das Gleiche: Überschrift, 1. Tabellenzelle suchen und
    reinschreiben. Dem Browser musst Du halt alles sagen, was
    Du handschriftlich schon automatisch machst.
    Beobachte Dich selbst, und Du machst auch Zeile 2; Spalte 2

    .

    Gruß
    Bernd

Schreibe einen Kommentar