Startseite
Rahmen und Abstand bei Tabellen  

Feedback     Interesse an einer CD ?    


Zellabstand

cellspacing="Pixel"
Mithilfe des Attribut cellspacing vergrößern Sie den Abstand der einzelnen Zellen einer Tabelle.
Die Angabe des Attributs muss im Tag <table> erfolgen.

Beispiel:
<table align="center" cellspacing="5" border="1">

      <tr>
      <th align="left" colspan="3">
      Bewohner der Urzeit
      </th>
      </tr>

      <tr>
      <td>
      <img src="img/dino1.gif">
      </td>
      <td>
      <img src="img/dino2.gif">
      </td>
      <td>
      <img src="img/dino3.gif">
      </td>
      </tr>

      <tr>
      <td colspan="3">&nbsp;</td>
      </tr>

</table>
Bewohner der Urzeit
 


Abstand der Zellinhalte

cellpadding="Pixel"
Das Attribut cellpadding setzt einen Zwischenraum zwischen dem Inhalt und der Begrenzung der Zelle.
Die Angabe des Attributs muss im Tag <table> erfolgen.

Beispiel:
<table align="center" cellpadding="5" border="1">

      <tr>
      <th align="left" colspan="3">
      Bewohner der Urzeit
      </th>
      </tr>

      <tr>
      <td>
      <img src="img/dino1.gif">
      </td>
      <td>
      <img src="img/dino2.gif">
      </td>
      <td>
      <img src="img/dino3.gif">
      </td>
      </tr>

      <tr>
      <td colspan="3">&nbsp;</td>
      </tr>

</table>
Bewohner der Urzeit
 


Zellrahmen

border="Pixel"
Das Attribut border fügt der Tabelle (und allen Zellen) einen Rahmen hinzu. Die Breite wird dabei in Pixeln angegeben.
Geben Sie dieses Attribut nicht an, wird kein Rahmen gezeichnet. Das entspricht der Angabe border="0".

Beispiel:
<table align="center" border="6">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
</tr>

</table>
Bewohner der Urzeit
 

Weiterhin haben Sie die Möglichkeit, nur bestimmte Teile des Tabellenrahmens anzuzeigen.

frame="Art"
Das Attribut frame erlaubt mehrere vordefinierte Werte zum Zeichnen des Rahmens um die Tabelle.
Die Angabe muss im Tag <table> erfolgen.
void Es wird kein Rahmen gezeichnet (entspricht border="0")
box Es wird ein Rahmen um die gesamte Zelle gezeichnet (entspricht border="1")
above Rahmen oberhalb jeder Zelle
below Rahmen unterhalb jeder Zelle
hsides Rahmen an den horizontalen Seiten (oben und unten)
vsides Rahmen an den vertikalen Seiten (links und rechts)
lhs Rahmen an der linken Seite der Zellen
rhs Rahmen an der rechten Seite der Zellen

Beispiel:
<table align="center" frame="above">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">frame="above"</font></td>
</tr>

</table>
Bewohner der Urzeit
frame="above"

Beispiel:
<table align="center" frame="below">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">frame="below"</font></td>
</tr>

</table>
Bewohner der Urzeit
frame="below"

Beispiel:
<table align="center" frame="hsides">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">frame="hsides"</font></td>
</tr>

</table>
Bewohner der Urzeit
frame="hsides"

Beispiel:
<table align="center" frame="vsides">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">frame="vsides"</font></td>
</tr>

</table>
Bewohner der Urzeit
frame="vsides"

Beispiel:
<table align="center" frame="lhs">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>
<tr>
<td align="center" colspan="3"><font color="#0000FF">frame="lhs"</font></td>
</tr>
</table>
Bewohner der Urzeit
frame="lhs"

Beispiel:
<table align="center" frame="rhs">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">frame="rhs"</font></td>
</tr>

</table>
Bewohner der Urzeit
frame="rhs"


Tabellenlinien

rules="Art"
Das Attribut rules erlaubt spezielle Angaben zum optischen Trennen von Zeilen und Spalten..
Die Angabe muss im Tag <table> erfolgen.
none Es wird keine Trennlinie gezeichnet (entspricht border="0")
groups Trennlinien zwischen Gruppen (<thead>, <tbody>, <tfoot>)
rows Trennlinie zwischen jeder Zeile
cols Trennlinie zwischen jeder Spalte
all Es wird eine Trennlinie um alle Zellen gezeichnet (entspricht border="1")

Beispiel:
<table align="center" rules="rows">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">rules="rows"</font></td>
</tr>
</table>
Bewohner der Urzeit
rules="rows"

Beispiel:
<table align="center" rules="cols">

<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>

<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>

<tr>
<td align="center" colspan="3"><font color="#0000FF">rules="cols"</font></td>
</tr>

</table>
Bewohner der Urzeit
rules="cols"

Beispiel:
<table align="center" rules="groups">

<thead>
<tr>
<th align="left" colspan="3">
Bewohner der Urzeit
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
<img src="img/dino1.gif">
</td>
<td>
<img src="img/dino2.gif">
</td>
<td>
<img src="img/dino3.gif">
</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="3"><font color="#0000FF">rules="groups"</font></td>
</tr>
</tfoot>

</table>
Bewohner der Urzeit
rules="groups"