Tabellen 2

In diesem Kapitel lernt Ihr
Wie bekommt man einen Abstand zwischen Inhalt und Rand?

Um einen Abstand zwischen Zellenrand und Zelleninhalt zu bekommen verwendet man das Attribut cellpadding mit der Wertangabe in Pixel. Dieses Attribut fügt man im table-Tag ein.

Beispiel:
<Table cellpadding="20" border="5">
   <tr>
       <td>
       Eine Tabelle mit 20 Pixel Innenrand pro Zelle
       </td>
       <td>
       Der Tabellenrahmen ist 5 Pixel breit
       </td>
   </tr>
   <tr>
       <td>
       Eine Tabelle mit 20 Pixel Innenrand pro Zelle
       </td>
       <td>
       Der Tabellenrahmen ist 5 Pixel breit
       </td>
   </tr>
 </Table>

Das Ganze sieht im Browser so aus:
Eine Tabelle mit 20 Pixel Innenrand pro Zelle Der Tabellenrahmen ist 5 Pixel breit
Eine Tabelle mit 20 Pixel Innenrand pro Zelle Der Tabellenrahmen ist 5 Pixel breit

Zum Vergleich: Die gleiche Tabelle ohne cellpadding:
Eine Tabelle mit 20 Pixel Innenrand pro Zelle Der Tabellenrahmen ist 5 Pixel breit
Eine Tabelle mit 20 Pixel Innenrand pro Zelle Der Tabellenrahmen ist 5 Pixel breit

Wie bestimmt man die Dicke der Tabellenlinien?

Die Dicke der Gitternetzlinien wird mit dem Attribut cellspacing bestimmt, das man in das table-Tag einfügt. Die Wertangabe erfolgt in Pixel. Es wird dabei nicht der Tabellenrahmen beeinflusst.

Beispiel:
Eine Tabelle mit 15 Pixel dicken Gitternetzlinien und 4 Pixel dickem Rahmen sieht demnach in HTML so aus:

<Table cellspacing="15" border="4">
   <tr>
       <td>
       Eine Tabelle mit 15 Pixel breiten Gitternetzlinien
       </td>
       <td>
       Der Tabellenrahmen ist 4 Pixel breit
       </td>
   </tr>
   <tr>
       <td>
       Eine Tabelle mit 15 Pixel breiten Gitternetzlinien
       </td>
       <td>
      Der Tabellenrahmen ist 4 Pixel breit
       </td>
   </tr>
 </Table>

Das sieht im Browser so aus:

Eine Tabelle mit 15 Pixel breiten Gitternetzlinien Der Tabellenrahmen ist 4 Pixel breit
Eine Tabelle mit 15 Pixel breiten Gitternetzlinien Der Tabellenrahmen ist 4 Pixel breit

Zum Vergleich: Die gleiche Tabelle ohne cellspacing.

Eine Tabelle mit 0 Pixel breiten Gitternetzlinien Der Tabellenrahmen ist 5 Pixel breit
Eine Tabelle mit 0 Pixel breiten Gitternetzlinien Der Tabellenrahmen ist 5 Pixel breit

Wie stellt man eine Hintergrundfarbe für die Tabelle ein?

Wie bei den beiden vorhergehenden Attributen wird auch dieses in den table-Tag eingefügt. Das Attribut heißt bgcolor. Die Wertangabe kann auf zwei verschiedene Art und Weisen erfolgen.

Beispiel:
Farbeingabe mit Farbnamen

<Table bgcolor="yellow">
   <tr>
       <td>
       Eine Tabelle mit gelbem Hintergrund
       </td>
       <td>
       Eine Tabelle mit gelbem Hintergrund
       </td>
   </tr>
   <tr>
       <td>
       Eine Tabelle mit gelbem Hintergrund
       </td>
       <td>
      Eine Tabelle mit gelbem Hintergrund
       </td>
   </tr>
 </Table>
Das sieht im Browser so aus:

eine Tabelle mit gelbem Hintergrund Eine Tabelle mit gelbem Hintergrund
Eine Tabelle mit gelbem Hintergrund Eine Tabelle mit gelbem Hintergrund

Farbangabe über den hexadezimalen Farbwert

<Table bgcolor="#00FF00">
   <tr>
       <td>
       Eine Tabelle mit grünem Hintergrund
       </td>
       <td>
       Eine Tabelle mit grünem Hintergrund
       </td>
   </tr>
   <tr>
       <td>
       Eine Tabelle mit grünem Hintergrund
       </td>
       <td>
      Eine Tabelle mit grünem Hintergrund
       </td>
   </tr>
 </Table>
Das sieht im Browser so aus:

eine Tabelle mit grünem Hintergrund Eine Tabelle mit grünem Hintergrund
Eine Tabelle mit grünem Hintergrund Eine Tabelle mit grünem Hintergrund

Wie gibt man einzelnen Zellen eine Hintergrundfarbe?

Wie bei der Hintergrundfarbe der Tabelle kommt auch bei der Hintergrundfarbe der zellen das bgcolor-Attribut vor. Nur dieses Mal setzt man es nicht im table-Tag ein, sondern im td-Tag. Auch hier kann die Wertangabe über den Farbnamen oder den hexadezimalen Farbwert erfolgen.

Beispiel:

<Table>
   <tr>
       <td bgcolor="yellow">
       Zelle mit gelbem Hintergrund
       </td>
       <td bgcolor="#00FFFF>
       Zelle mit türkisem Hintergrund
       </td>
   </tr>
   <tr>
       <td bgcolor="green">
       Zelle mit grünem Hintergrund
       </td>
       <td bgcolor="#FF0000">
      Zelle mit rotem Hintergrund
       </td>
   </tr>
 </Table>
Das sieht im Browser so aus:

Zelle mit gelbem Hintergrund Zelle mit türkisem Hintergrund
Zelle mit grünem Hintergrund Zelle mit rotem Hintergrund

Wie kann man ein Bild als Zellenhintergrund einbinden?

Statt dem Attribut bgcolor wird einfach das Attribut background verwendet werden. Die Wertangabe ist in diesem Fall der Pfad zum Bild.

Beispiel:

<Table border="1">
   <tr>
      <td>
      Die Zelle rechts hat eine Grafik als Hintergrund
      </td>
      <td height="176" width="186" background="art.jpg">&nbsp;
      </td>
   </tr>
</Table>

Das sieht im Browser so aus:

Die Zelle rechts hat ein Bild als Hintergrund  

Wichtig: Die Zelle, in der das Bild sein soll muss zusätzlich die Attribute width und height enthalten. Bei meinen Tests habe ich festgestellt, dass es ohne diese Angabe nicht funktioniert. Wird die Größe der Zelle größer angegeben als das Bild groß ist, dann wird das Bild mehrfach angezeigt, was u.U. ziemlich hässlich aussehen kann.

Wie verbindet man Zellen?

Man kann mehrere Zellen mit den Attributen colspan oder rowspan verbinden. Das Attribut colspan ist dafür da, um Zellen, die nebeneinander liegen, zu verbinden. Das Attribut rowspan benutzt man um Zellen, die über- oder untereinander liegen, zu verbinden.

Beispiel:
Will man eine Tabelle mit zwei Zeilen und und jeweils drei Zellen, wobei in der oberen Zeile die Zellen zu einer zusammengefasst sind, so sieht das in HTML so aus:

<Table border="1">
   <tr>
       <td colspan="3">
       Drei Zellen übergreifender Text
       </td>
   </tr>
   <tr>
       <td>
       1.Zelle
       </td>
       <td>
       2.Zelle
       </td>
       <td>
       3.Zelle
       </td>
   </tr>
 </Table>

Das sieht im Browser so aus:

Drei Zellen übergreifender Text
1.Zelle 2.Zelle 3.Zelle

Will man jedoch zwei Zellen verbinden die übereinander liegen und in einer zweizeiligen Tabelle enthalten sind, dann sieht das so aus:

<Table border="1">
   <tr>
       <td rowspan="2">
       Diese beiden Zellen sind verbunden durch rowspan
       </td>
       <td>
       Zelle oben
       </td>
   </tr>
   <tr>
        <td>
        Zelle unten
       </td>
   </tr>
 </Table>

Diese beiden Zellen sind verbunden durch rowspan Zelle oben
Zelle unten

Welche speziellen Tabellenformatierungen gibt es?

Man hat noch die Möglichkeiten nur Teile des Tabellenrahmens, sowie nur bestimmte Gitternetzlinien darzustellen. Außerdem kann man dem Rahmen eine eigene Farbe geben oder den Abstand der Tabelle zum umliegenden Text festlegen.

Diese Tags funktionieren allerdings nicht in allen Browsern und deswegen zeige ich nicht, wie sie funktionieren. Wollt Ihr doch eines davon hernehmen schreibt mir eine E-Mail und ich werde Euch die Codes zukommen lassen.



© by Benjamin Hofmann