Tabellen 1

In diesem Kapitel lernt Ihr

Wozu braucht man Tabellen?

Tabellen dienen als zentrales Element zur Positionierung von Bildern und Text. Man kann also damit die Steuerung über die einzelnen Elemente der Seite übernehmen und sagt dem Browser damit ganz genau, wo was zu sein hat. Man kann nämlich die genaue Position der Zellen und der darin enthaltenen Elemente festlegen.


Wie ist eine Tabelle aufgebaut?

Meistens werden sogenannte blinde Tabellen verwendet, d.h. man benutzt die Struktur einer Tabelle ohne deren Trennlinien darzustellen. Der Besucher sieht die Tabelle also nicht.

Hier ein kleines Beispiel. Ihr wollt eine Liste erstellen mit Hilfe einer Tabelle. Das Listenzeichen soll sein.

Hier steht der Text zum ersten Punkt
Hier steht der Text zum zweiten Punkt
Hier steht der Text zum dritten Punkt


Man erzeugt eine Tabelle mit den Tags <table></table>

Eine Tabelle ist aus Reihen, die wiederum Zellen enthalten aufgebaut. Eine Reihe wird mit dem Tag <tr></tr> erzeugt. Die darin enthaltenen Zellen bestehen aus dem Tag <td></td>. Die eigentlichen Inhalte stehen zwischen den Tags für die Zellen.

Beispiel:
Eine Tabelle mit vier Reihen und jeweils zwei Zellen sieht demnach so aus:

<Table>
   <tr>
       <td>
       erste Reihe erste Zelle
       </td>
       <td>
       erste Reihe zweite Zelle
       </td>
   </tr>
   <tr>
       <td>
       zweite Reihe erste Zelle
       </td>
       <td>
       zweite Reihe zweite Zelle
       </td>
   </tr>
   <tr>
       <td>
       dritte Reihe erste Zelle
       </td>
       <td>
       dritte Reihe zweite Zelle
       </td>
   </tr>
   <tr>
       <td>
       vierte Reihe erste Zelle
       </td>
       <td>
       vierte Reihe zweite Zelle
       </td>
   </tr>
</Table>


Im Browser sieht dieser Code dann so aus:

erste Reihe erste Zelle erste Reihe zweite Zelle
zweite Reihe erste Zelle zweite Reihe zweite Zelle
dritte Reihe erste Zelle dritte Reihe zweite Zelle
vierte Reihe erste Zelle vierte Reihe zweite Zelle


Wie definiert man den Rahmen einer Tabelle?

Man erzeugt den Rahmen mit dem Attribut border="...". Will man einen Rahmen, der 5 Pixel dick ist, so gibt man border="5" ein.

Tipp: Legt diesen Wert immer fest, da ansonsten der Browser entscheidet wie der Rahmen aussehen soll. Es könnte alsu u.U. dazu kommen, dass man auf einer Site, die mit Tabellen gestaltet ist, die Linien der Tabelle sieht.

Beispiel:

<Table border="5">
   <tr>
       <td>
      erste Reihe erste Zelle
       </td>
       <td>
       erste Reihe zweite Zelle
       </td>
   </tr>
   <tr>
       <td>
       zweite Reihe erste Zelle
       </td>
       <td>
       zweite Reihe zweite Zelle
       </td>
   </tr>
</Table>


Dieser Code sieht im Browser so aus:

erste Reihe erste Zelle erste Reihe zweite Zelle
zweite Reihe erste Zelle zweite Reihe zweite Zelle


Wie positioniert man Tabellen?

Man kann Tabellen auf die selbe Art und Weise ausrichten wie Text, nämlich mit den Attributen left, center, und right.

Beispiel:

<Table align="center">
  <tr>
       <td>
       Diese Tabelle sitzt
       </td>
       <td>
       mittig.
       </td>
   </tr>
</Table>


Das sieht im Browser so aus:

Diese Tabelle sitzt mittig.


Höhe und Breite der Zellen einstellen

Man kann der Tabelle auch mit den Attributen width und height eine bestimmte Größe geben.

Die Angabe der Größe kann man in Pixeln oder Prozentangaben angeben. Eine 400 Pixel breite und 100 Pixel hohe Tabelle sieht demnach in HTML so aus:

<Table width="400" height="100" border="1">
   <tr>
       <td>
  insgesamt 100 Pixel hoch
       </td>
       <td>
  und 400 Pixel breit
       </td>
   </tr>
</Table>


Der Browser zeigt sie dann so an:

insgesamt 100 Pixel hoch und 400 Pixel breit


Wie verändert man die Größe der Zellen?

Mann kann genau wie bei einer ganzen Tabelle auch die Größe der einzelnen Zellen verändern. Dazu verwendet man auch die Attribute width und height. Auch hier erfolgt die Größeneingabe entweder in Pixeln oder in Prozent. Die Größe der Zellen sollte natürlich nicht größer sein als die Tabelle selbst. Auch ist dei Angabe der Breite nur in der ersten reihe notwendig, da sich alle anderen Reihen automatisch danach richten.

Nehmen wir mal an, die Tabelle hat eine Breite von 500 Pixeln und es sind zwei Reihen darin enthalten, die unterschiedliche Höhen haben und Zellen mit der Breite von 100 Pixeln. Dann sieht das in HTML so aus:

<table width="500">
   <tr>
       <td width="100" height="50">
       100 Pixel breit
       </td>
       <td>
       50 Pixel hoch
       </td>
   </tr>
   <tr>
       <td height="200">
       100 Pixel breit
       </td>
       <td>
       200 Pixel hoch
       </td>
   </tr>
</table>


100 Pixel breit 50 Pixel hoch
100 Pixel breit 200 Pixel hoch

Die Angaben der Größe sind Mindestwerte. Überschreitet der Inhalt den Umfang der Zelle wird diese entsprechend vergrößert. Macht man keine Angaben zur Größe berechnet diese der Browser. Im letzten Beispiel habe ich nur die Größe der ersten Zelle angegeben. Der Browser berechnet die Größe der zweiten Zelle indem er die Größe der ersten Zelle von der Größe der Tabelle abzieht.

Man kann die Zellen mit Text, Bildern oder anderen HTML-Elementen füllen. Man kann auch eine zweite Tabelle in die Erste einsetzen.


Wie richtet man Zellen aus?

Wenn man die Inhalte einer Zelle ausrichten will benutzt man das Attribut align. Man kann dafür die Werte left, center und right benutzen.

Beispiel:
Es soll eine Tabelle entstehen, in der drei garfiken vorhanden sind. Eine davon ganz links, die andere rechts und die Dritte genau in der Mitte.

Dazu erstellt man eine Tabelle mit einer Reihe und drei Zellen. Die Größe der Zellen soll jeweils 33% sein. rein rechnerisch muss die dritte Zelle 34% groß sein. Um keinen Rahmen zu bekommen wird das Attribut border="0" hergenommen und die Breite der Tabelle soll 100% des Fensters beanspruchen. Der Code dafür sieht so aus:

<Table width="100%" border="0">
   <tr>
       <td width="33%" align="left">
       <img src="links.gif">
       </td>
       <td width="34%" align="center">
       <img src="mitte.gif">
       </td>
       <td width="33%" align="right">
       <img src="rechts.gif">
       </td>
   </tr>
</Table>

Das sieht im Browser so aus:


Wichtig: Damit die Zellen die gewünschte Breite annehmen, auch wenn nichts drin ist, muss man ein Leerzeichen einfügen. Dieses hat den Code: &nbsp;
Um die Inhalte horizontal auszurichten verwendet man das Attribut align wie oben beschrieben. Will man sie allerdings auch vertikal ausrichten verwendet man das Attribut valign. Mögliche Werte hierfür sind: top, middle und bottom.

Beispiel:
In einer Tabelle mit zwei Reihen und jeweils 2 Zellen befinden sich Bilder, die jeweils noch eine kleine Erläuterung bekommen sollen. Das sieht in HTML dann so aus:

<Table border="0">
   <tr>
       <td align="right" valign="middle">
       Text links neben der ersten Grafik
       </td>
       <td align="center" valign="middle">
       <img src="bild1.gif">
       </td>
   </tr>
   <tr>
       <td align="center" valign="middle">
       <img src="bild2.gif">
       </td>
       <td valign="middle">
       Text rechts neben der zweiten Grafik
       </td>
   </tr>
</Table>


Das sieht im Browser so aus:

Text links neben der ersten Grafik
Text rechts neben der zweiten Grafik



© by Benjamin Hofmann