Tabellen
Tabellen sind das A und O, um Stuktur in eine Datei zu bringen. Bilder und Texte augengefällig zueinander anordnen; einen Text links linksbündig setzen, das Bild in der Mitte zentrieren und daneben wieder rechtsbündigen Text einfügen - kein Problem. Links eine ordentliche Navigation, rechts ein langer Text... Tabellen sind unumgänglich.

In diesem Bereich findest du die Themen
Grundaufbau
Sichtbare und unsichtbare Rahmen
Ausrichtung
Größenzuordnung
Zeilenübergreifende Zellen
Spaltenübergreifende Zellen
Tabellen in Tabellen
Farben
Cellpadding / Cellspacing

 

Grundaufbau

Tabellen sind ein trickeliges Geschäft. Vom Grundaufbau her ganz simpel, können sie erstaunlich verzwickte Gebilde werden, wenn sie ausarten. Interessant wird es spätestens dann, wenn du Tabellen in Tabellen in Tabellen in Tabellen [...] erstellst - wenn du einen falschen Tag setzt, gibt es Chaos pur. Aber keine Angst, wir fangen klein an. ^_~

<table>
 <tr>
   <td>
   </td>
 </tr>
</table>

Dies ist die kleinstmögliche Tabelle. Sie besteht exakt aus einer Zelle und verdient den Namen "Tabelle" kaum. <table> öffnet die Tabelle, <tr> leitet die erste Reihe ein, innerhalb der <td> die Zelle markiert. Dann wird die Zelle wieder geschlossen, im Anschluss die Reihe, dann wird die Tabelle beendet.

Um das Prinzip deutlich zu machen, erstelle ich nun eine Tabelle mit zwei Zeilen und zwei Spalten.

Der Code:

<table>
 <tr>
   <td> 1
   </td>
   <td> 2
   </td>
 </tr>
 <tr>
   <td> 3
   </td>
   <td> 4
   </td>
 </tr>
</table>

Aus dem Code entsteht diese Tabelle:

  1     2  
  3     4  

Aufgeschlüsselt erklärt sich das quasi so:

<tr> <table>
<td>1</td> <td>2</td>
<td>3</td> <td>4</td>
</table>
</tr>
<tr> </tr>


Sichtbare und unsichtbare Rahmen
Bei den ganz simplen Tabellen ist er höchstens von optischem Interesse; meistens will man ihn nicht sehen, denn die Tabelle ist nur dazu da, um die Objekte an Ort und Stelle zu fixieren. Aber sobald es ein paar Zellen mehr gibt, wird er interessant: der Rahmen.

<table border=1>

Der border-Befehl, verbunden mit einem Wert größer als 0, verschafft der Tabelle einen sichtbaren Rahmen. Je größer du den Wert wählst, desto dicker wird er. Zum Coden einer Tabelle solltest du dir den Wert immer auf 1 setzen, damit du überprüfen kannst, ob du keinen Fehler gemacht und vergessen hast, irgendwo ein td oder ein tr zu schließen. Hast du das Werk zu deiner Zufriedenheit vollendet, schreibst du dir ein fröhliches border=0 in den table-Tag, damit niemand vom Rand gestört wird.


Ausrichtung
Du kannst eine Tabelle ausrichten und du kannst Objekte in einer Tabellenzelle ausrichten. Normalerweise "klebt" sich die Tabelle oder das Objekt in einer Zelle links oben in die Ecke; das ist die Voreinstellung. Oftmals will man das aber ganz und gar nicht haben.

Eine Tabelle ausrichten
Deine Tabelle lässt sich entweder rechtsbündig, linksbündig oder zentriert zum Fenster ausrichten. Das heißt, sie hängt sich rechts an den Fensterrand, links oder platziert sich genau in der Mitte.

<table align=right>

Dieser kleine Befehl align=right im table-Tag bewirkt, dass sich deine Tabelle rechts an den Rand klebt.

<table align=center>

Dies bewirkt, dass sich die Tabelle zentriert. Rechts und links ist also gleich viel Platz.

Bei einer Tabelle, die die komplette Bildschirmbreite einnimmt, sieht man die Ausrichtung natürlich nicht. Der Befehl, um die Tabelle an den linken Rand zu kleben, lautet align=left, wird aber zumeist nicht gebraucht, weil es wie gesagt die Voreinstellung des Browsers ist.

Objekte in einer Zelle ausrichten
→ Wie auch die Tabelle kann man ein Objekt rechts, links und zentriert platzieren, was sich auf das Verhältnis des Objekts zum rechten und/oder linken Rand bezieht. Allerdings kann man es innerhalb einer Zelle auch an den oberen oder den unteren Rand heften oder es genau in die Mitte setzen.

<td align=right></td>

Dieser Befehl bewirkt, dass das Objekt innerhalb der Tabellenzelle am rechten Rand klebt. Wie du siehst, sind die Befehle nicht unterschiedlich zu denen für die Tabelle. align=left macht, dass dein Objekt an der linken Seite festhaftet, und align=center platziert es in der Mitte.

→ Hinzu kommen jedoch noch die Befehle für oben, unten und genau dazwischen. Auch dies kannst du natürlich nur sehen, wenn deine Zelle hoch genug ist, um eine Ausrichtung überhaupt zu erlauben. Der Trick ist ein kleines v vor align und ein paar neue Richtungsbefehle.

<valign=top></td>

Der Befehl valign=top hält dein Objekt oben am Zellenrand fest.

<td valign=bottom></td>

bottom versenkt das Objekt ganz nach unten in die Zelle, es haftet am Boden fest.

<td valign=middle></td>

Und zu guter Letzt der goldene Mittelweg - nicht schwer zu erkennen, dass der Befehl middle das Objekt genau mittig zwischen oben und unten ausrichtet.

→ Natürlich kannst du diese Befehle innerhalb einer Zelle auch kombinieren.

<td align=center valign=middle></td>

Hiermit fixierst du ein Objekt sowohl horizontal wie auch vertikal genau in der Mitte. Mittiger geht nicht. ^_~ Aber auch alle anderen Kombinationen sind denkbar. Oben rechts, unten mittig oder sonstiges, ganz wie es dir gefällt.


Größenzuordnung
Du kannst sowohl der gesamten Tabelle, wie auch den einzelnen Zellen entweder relative oder feste Größen zuweisen.

Relative Größen
Die relative Größe wird in Prozent angegeben und bezieht sich bei der gesamten Tabelle immer auf die Fensterbreite. Stellst du also den Browser auf Vollbild, orientiert sich die Tabelle am kompletten Bildschirm. Nimmt dein Browser nur die Hälfte des Bildschirms sein, ist das die Bezugsgröße. Bei einer einzelnen Zelle ist die Bezugsgröße die gesamte Tabelle. 30% Breite bei einer Tabelle bedeutet also 30% des Browserfensters, bei einer Zelle nimmt diese dann 30% der gesammten Tabellenbreite ein.

<table width=75%>

Die Tabelle, die so beginnt, wird 75% der Fensterbreite einnehmen, egal wie groß oder klein du es zoomst. Dementsprechend wird der Text dieser Tabelle auf mehr oder weniger Raum Platz finden müssen.

<td width=33%></td>

Diese Tabellenzelle nimmt ein Drittel der gesamten Tabelle ein. Dabei musst du allerdings darauf achten, dass zumindest noch eine zweite Zelle da ist, die dann den Rest des Platzes ausfüllt.

<table height=99%>

Dies ordnet der Tabelle die relative Höhe von 99% zur Fensterhöhe zu. Meistens braucht man eine relative Höhenangabe nicht, in einer Hinsicht ist sie jedoch sehr praktisch: bei der zentralen Platzierung von Bildern oder sonstigen Objekten. Man kann ein Objekt ohne Tabelle nicht in der Mitte des Bildschirms platzieren. Man kann es jedoch in der Mitte einer Tabelle anordnen (→ siehe Ausrichtung). Wenn diese Tabelle nun den gesamten Bildschirm ausfüllt, ist es automatisch in der Mitte des Bildschirms.

<td height=50%></td>

Diese Zelle nimmt in ihrer Höhe die Hälfte der Tabellenhöhe ein. Hier muss zumindest noch eine zweite Reihe da sein, die den Rest der Höhe ausfüllt.

Feste Größen
Die feste Größe wird in Pixel angegeben. Dabei ist es vollkommen egal, wie groß das Fenster ist. Ist die Tabelle oder auch nur die Zelle zu größ für die derzeit eingestellte Fenstergröße, erscheint ein Scrollbalken.

<table width=500 height=800>

Die Tabelle, die hier beginnt, hat eine fixe Breite von 500 Pixeln und ist 800 Pixel hoch. Die wenigsten Tabellen werden allerdings in ihrer Höhe definiert.

<td width=90 height=60></td>

Hier hast du eine Zelle, die 90 Pixel breit und 60 Pixel hoch ist. Solche Angaben sind praktisch, wenn du zum Beispiel ein kleines Bild an einer festen Stelle fixieren willst.

Sonstiges
Gleichgültig, welche Werte du für Zellen oder Tabellen angibst und egal, ob es fixe oder relative Werte sind, wird sich die Tabelle immer den Platz nehmen, den sie braucht. Hast du ein Bild, dass 400 Pixel breit ist und du weist der Zelle nur eine Breite von 200 Pixel zu, wird diese Zelle dennoch 400 Pixel breit sein.


Zeilenübergreifende Zellen
Zeilenübergreifende Zellen sind sehr praktisch, wenn man Inhalte unterschiedlicher Größe ordentlich zueinander anordnen will, zum Beispiel ein hohes, schmales Bild auf der linken Seite und zwei kleinere quadratische Bilder auf der rechten Seite. Der Befehl wird in den td-Tag der Zelle eingefügt, die man "vergrößern" will. Bei einer Zelle, die zwei Zeilen übergreifen soll, lautet er

<td rowspan=2>

Eingefügt in eine Tabelle sieht das ganze dann wie folgt aus:
<table border=1>
<tr>
  <td rowspan=2 height=40 width=20>
  </td>
  <td width=20>
  </td>
</tr>
<tr>
  <td> </td>
</tr>
</table>

   
 

→ Die Werte für Höhe und Breite habe ich nur angegeben, damit man die Zellen der Tabelle gut sehen kann. Natürlich musst du das nicht oder kannst andere, passende Werte verwenden.

Möchtest du lieber die hohe Zelle auf der rechten Seite haben, fügst du natürlich den Befehl in den zweiten td-Tag ein. Das sieht dann so aus:
<table border=1>
<tr>
  <td width=20>
  </td>
  <td rowspan=2 height=40 width=20>
  </td>
</tr>
<tr>
  <td> </td>
</tr>
</table>

   
 

Du siehst anhand dieser zwei einfachen Beispiele, dass du im Code die Anzahl der gesamten Zellen in den ersten Zeilen zwischen den tr-Tags festlegst. Die folgende Zeile füllt dann nur noch die fehlenden, nicht definierten Zellen auf. Das funktioniert natürlich auch mit größeren Tabellen.

Bei einer Tabelle mit 3 Spalten 3 Zellen hast du theoretisch 3 sich öffnende und schließende tr-Tags, innerhalb derer sich jeweils 3 sich öffnede und schließende td-Tags befinden. Angenommen, du brauchst aber eine Tabelle, bei der du in der ersten Reihe tatsächlich die drei Zellen hast, in der zweiten Reihe jedoch die mittlere Zelle auch in die dritte Reihe übergreift, sieht das ja so aus:

   
   
  

1. Reihe: 3 td-Tags
<tr> <td></td> <td></td> <td></td> </tr>

2. Reihe: 3 td-Tags, mit der Erweiterung für die mittlere Zelle
<tr> <td></td> <td rowspan=2></td> <td></td> </tr>

3. Reihe: 2 td-Tags
<tr> <td></td> <td></td> </tr>


Spaltenübergreifende Zellen
Das Prinzip der spaltenübergreifenden Zellen funktioniert ganz ähnlich wie das der zeilenübergreifenden. Natürlich ändert sich der Befehl ein wenig, sonst weiß der Browser ja nicht, wohin die Zelle greifen soll. ^_~

<td colspan=2>

→ Statt 2 kann natürlich jede beliebe (und passende) Zahl genommen werden.

Während rowspan für "Reihen überspannend" steht (engl. row = Reihe), bedeutet colspan eben "Spalten überspannend" (engl. column = Spalte). Eingefügt wird dieser kleine Befehl wie auch der rowspan-Befehl in den td-Tag.


<table>
<tr>
   <td colspan=2> </td>
</tr>
<tr>
   <td> </td>
   <td> </td>
</tr>
</table>
 
   

Überlege dir vorher, wie viele Spalten deine Tabelle haben soll und wie viele deine auserkorene Zelle davon überspannt. Denn im Gegensatz zum rowspan ist der Befehl nur für die entsprechende Reihe interessant. Darüber und darunter geht alles seinen gewohnten Gang.

Denkbar ist also zum Beispiel eine Tabelle mit vier Spalten. Die erste Zelle in der zweiten Reihe soll drei Spalten überbrücken.

    
  
    

1. Reihe: 4 td-Tags
<tr> <td></td> <td></td> <td></td> <td></td> </tr>

2. Reihe: 2 td-Tags, mit der Erweiterung für die erste Zelle
<tr> <td colspan=3></td> <td></td> </tr>

3. Reihe: 4 td-Tags
<tr> <td></td> <td></td> <td></td> <td></td> </tr>


Tabellen in Tabellen
Generell sind Tabellen in Tabellen das Einfachste von Welt, wenn du Tabellen schreiben kannst. Das Problem besteht darin, den Überblick zu behalten: Alle Tags müssen geöffnet und geschlossen werden, du darfst keinen vergessen, die Zeilen und Reihen müssen immer die gleiche Anzahl an Zellen aufweisen oder gegebenenfalls mit den entsprechenden Befehlen erweitert worden sein. Bei kleinen Tabellen mit wenig Inhalt geht das noch, aber irgendwann, wenn du die Tabellle in der Tabelle in der Tabelle in der Tabelle... hast und jede umfasst viel Inhalt, solltest du die Augen aufhalten.

Überlege im Zweifelsfall vorher immer erst, ob du nicht den gleichen Effekt mit den zeilen- und spaltenübergreifenden Zellen erreichen kannst. Manchmal geht das jedoch nicht, wenn die Aufteilungen zu unregelmäßig sind.

Geschrieben wird das schlicht, indem du den Code für eine Tabelle in die Zelle einer übergeordneten Tabelle schreibst - wie einen normalen Inhalt eben, nur dass dieser Inhalt aus einer Tabelle besteht.

<table>
<tr>
    <td colspan=2>

    <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan=2></td>
        <td></td>
    </tr>
    </table>

    </td<
</tr>

<tr>
    <td></td>
    <td></td>
</tr>
</table>

     
   
   

Mein Tipp: Gehe immer von außen nach innen und arbeite mit zwei Dateien. Code in deinem HTML-Dokument deine große Tabelle. Öffne ein zweites Dokument, schreibe dort die einzufügende Tabelle, überprüfe sie auf Richtigkeit und kopiere den Code dann in die Zelle (also zwischen die td-Tags) der großen Tabelle.


Farben

Rahmen
Wenn du mit dem Internetexplorer surfst, wird dir der doppelte, grüne Rand um viele der Inhalte von Pandorahs Box aufgefallen sein, ebenso der kräftige Magenta-Ton bei der eingefügten Tabelle im Tutorial über "Tabellen in Tabellen". Es ist eine Spielerei, bei der du dir bewusst sein musst, dass einige deiner Besucher sie nicht sehen werden - alle, die mit einem anderen Browser als dem IE unterwegs sind.

bordercolor="#000000"

Eingefügt in den table-Tag zaubert dieser Befehl einen doppelreihigen, schwarzen Rand. Die Codes für die Farben sind die gleichen wie immer (siehe auch: Farben). Willst du den Rand nicht doppelt, sondern einfach haben, musst du mit dem cellspacing-Befehl arbeiten, doch dazu später mehr.

Hintergrund
Genauso, wie du ein Dokument mit einem Hintergrund versehen kannst, kannst du das auch mit einer Tabelle oder einer Tabellenzelle. Der Befehl ist sogar der selbe, du musst ihn nur an passender Stelle einfügen.

     
     
     

Hübsch buntig, nicht? *g* Du kannst die gesamte Tabelle färben, eine Reihe färben oder eine Zelle. Von der "Wertigkeit" her steht die Zelle über der Reihe, die Reihe über der Tabelle.

   
   
   
Die Tabelle hat einen gelben Hintergrund zugewiesen bekommen. Sind sonst keine Angaben vorhanden, ist sie gelb.

<table bgcolor="yellow">

   
   
   
Die komplette Tabelle ist immer noch gelb, aber die mittlere Reihe hat zudem Türkis als Farbton zugewiesen bekommen.

<tr bgcolor="#00C0C0">

     
     
     
Die Tabelle ist nach wie vor gelb, die mittlere Reihe immer noch türkis. Aber nun sind drei Zellen extra eingefärbt.

<td bgcolor="[Farbe deiner Wahl]">


Cellpadding / Cellspacing
Häufig willst du nicht, dass deine Bilder oder Texte direkt am Zellenrand und damit sehr dicht aufeinander kleben - oder du willst genau das, und die zwei Pixel, die sich dazwischen befinden, erweisen sich als sehr störend. Die Befehle cellpadding und cellspacing schaffen in beiden Fällen auf ähnliche Art Abhilfe. Beide Befehle beziehen sich immer auf die gesamte Tabelle, nie nur auf einzelne Zellen.

Cellpadding
Damit legst du pixelgenau den Abstand fest, der zwischem dem Inhalt einer Zelle und dem Rahmen sein soll.

<table cellpadding=x>

Und so sieht 's aus:

keine Angabe

Test Test
Test Test

cellpadding=0

Test Test
Test Test

cellpadding=5

Test Test
Test Test

 

Cellspacing
Damit legst du pixelgenau den Abstand fest, der zwischen Innenrahmen und Außenrahmen vorhanden sein soll.

<table cellspacing=x>

Und so sieht 's aus:

keine Angabe

Test Test
Test Test

cellspacing=0

Test Test
Test Test

cellspacing=5

Test Test
Test Test

Cellpadding & Cellspacing
Natürlich kannst du auch beides zugleich verwenden. Beide Werte auf 0 zu setzen ist sehr nützlich, wenn zwischen Teilen einer Grafik, die du in eine Tabelle eingefügt hast, auch garantiert kein Platz sein soll - die Navigation meiner kleinen Box ist mit so einer Tabelle aufgebaut. ^_^ Selbstverständlich können die Werte auch unterschiedlich sein.

<table cellpadding=x cellspacing=x>

Und so sieht 's aus:

keine Angabe

Test Test
Test Test

cellpadding=0 cellspacing=0

Test Test
Test Test

cellpadding=5 cellspacing=5

Test Test
Test Test