[HTML] Tabellen

Dies ist ein Tutorial für Anfänger zum Thema Tabellen in HTML.

Für Tabellen sind grundlegend drei simple Tags nötig: <table>, um die Tabelle einzuleiten, <tr>, um eine Zeile zu erzeugen und <td>, um einzelne Zellen in den Zeilen zu generieren. Nicht zu vergessen sind natürlich auch die dazugehörigen schließenden Tags.
Was wir damit schon anstellen können ist folgendes:

Tabelle:
 1 
 2 
 3 
 4 
 5 
 6 
<table>
    <tr>
        <td>Nummer 1</td>
        <td>Nummer 2</td>
    </tr>
</table>

Das sieht dann im Browser folgendermaßen aus:
Nummer 1 Nummer 2

Noch nicht sonderlich spektakulär, wie? Keine Sorge, das kommt noch.
Wie man sieht, werden die einzelnen Zellen einer Zeile zwischen die <tr>-Tags gepackt. Wenn man wie ich den Code einrückt, sieht man auf einen Blick, welche Spalten zu welcher Zeile gehören. Das ist bei besonders großen Tabellen sehr hilfreich.

Soll die erste Zeile für Überschriften genutzt werden, verwendet man in ihr für die Spalten statt des <td>-Tags das <th>-Tag, welches angibt, dass es sich bei der Zelle um eine Kopfzelle handelt. Das kann dann etwa so aussehen:
Tabelle mit Köpchen:
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
<table>
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
    </tr>
    <tr>
        <td>Inhalt 1.1</td>
        <td>Inhalt 2.1</td>
    </tr>
    <tr>
        <td>Inhalt 1.2</td>
        <td>Inhalt 2.2</td>
    </tr>
</table>

Ergebnis des ganzen ist dann dieses:
Spalte 1 Spalte 2 Spalte 3
Inhalt 1.1 Inhalt 2.1 Inhalt 3.1
Inhalt 1.2 Inhalt 2.2 Inhalt 3.2

Soweit so einfach. Die Kopfzellen werden also genauso wie normale Zellen erzeugt. In diesem Beispiel passenderweise in der ersten Zeile. Danach folgen zwei weitere Zeilen mit normalen Zellen. Wie man sehen kann, werden die Inhalte von Kopfzellen fett hervorgehoben. Somit spart man sich die <b>- bzw. <strong>-Tags.

Nun zeige ich euch wie ihr größere Spalten bzw. Zeilen erstellen könnt:
Zellenübergreifendes:
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
<table>
    <tr>
        <td rowspan="2">Inhalt &uuml;ber zwei Zeilen</td>
        <td colspan="2">Inhalt &uuml;ber zwei Spalten</td>
    </tr>
    <tr>
        <td>Inhalt</td>
        <td>Inhalt</td>
    </tr>
</table>

Und die Ausgabe:
Inhalt über zwei Zeilen Inhalt über zwei Spalten
Inhalt Inhalt

Wir geben den Zellen also Attribute. Das rowspan-Attribut gibt an, über wie viele Zeilen sich die Zelle in der Tabelle erstrecken soll. In dem Beispiel sind es zwei Zeilen, aber das kann je nach Absicht und Größe der Tabelle variieren. Ähnlich verhält es sich mit dem colspan-Attribut. Dieses gibt an, über wie viele Spalten sich die Zelle ziehen soll. Im Beispiel sind es wieder zwei.
Zu beachten ist dabei aber, dass man die überflüssigen Zellen (nämlich die, die durch die vergrößerten Zellen überlappt würden) dann auch weglässt. Normalerweise hätte diese Tabelle zwei Zeilen mit je drei Spalten. Durch das Vergrößern sieht sie aber so aus, als bestünde sie aus drei ineinander verschachtelten Tabellen. Die äußere mit einer Zeile und zwei Spalten, wovon die linke Spalte mit Text gefüllt ist und die rechte die zweite Tabelle enthält. Diese besitzt zwei Zeilen und eine Spalte, wovon die erste Zeile nur mit Text gefüllt ist und die untere die letzte Tabelle enthält. Sie besteht aus einer Zeile mit zwei Spalten, wovon beide nur Text enthalten.
Man könnte diese Tabelle zum Beispiel für eine Art Katalog benutzen. Links könnte die Kategorie stehen, rechts oben dann die Unterkategorie und darunter dann Produkt und Preis.

Diese Tabellen sind noch ziemlich langweilig. Über Attribute lässt sich da noch so einiges machen. Für die komplette Tabelle gibt es die Attribute align, width, height, cellspacing, cellpadding und border. Es gibt noch weitere, aber auf die werde ich hier nicht näher eingehen. Über CSS lassen sich alle Attribute ersetzen, was sie schon fast überflüssig macht.
Mit align geben wir die Ausrichtung der Tabelle an, also right für rechtsbündig, center für zentriert und left für linksbündig (standard).
width und height geben die Breite und Höhe der Tabelle an. Möglich sind Angaben in Pixel (ohne Einheit) und in Prozent.
Für Abstände sorgen cellspacing und cellpadding. cellspacing ist für die Abstände zwischen den Zellen untereinander zuständig, cellpadding erzeugt die Abstände innerhalb der Zellen. Auch hier sind Pixel- und Prozentangaben erlaubt.
Mit border wird die Rahmenbreite festgelegt. Der Standardwert ist 1, also 1 Pixel. 0 lässt den Rahmen verschwinden.

Ein Beispiel:
Tabellenattribute:
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
<table border="3" cellspacing="5" cellpadding="20" width="300" height="100">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

Dies ergibt:
1 2
3 4

Zu beachten ist noch, dass width und height nur Mindestangaben sind. Übergroße Inhalte und die Angaben von cellspacing und cellpadding können ggf. dafür sorgen, dass die Angaben zur Breite und/oder Höhe überschritten werden (so wie in meinem Beispiel).


[tbc]
Noch ausstehende Themen:

nach oben