Tabellenformatierung

Breite:
Die Breite einer Tabelle oder einer Spalte gibt man mit „width“ in Prozent oder Pixel an.
Beispiel:

<td style="width: 250px;">...</td>

Hintergrundfarbe:
Die Hintergrundfarbe einer Tabelle oder einer Tabellenzelle kann man mit „background-color“ angeben.
Beispiel:
Die gesamte Tabelle erhält einen orangefarbigen Hintergrund. Die Zellen in der ersten Reihe sind hellgelb gefärbt.

<table style="background-color: darkorange;">
 <tr>
  <td style="background-color: lightgoldenrodyellow;">Tabellenzelle mit Hintergrund</td>
  <td style="background-color: lightgoldenrodyellow;">Tabellenzelle mit Hintergrund</td>
 </tr>
 <tr>
  <td>Tabellenzelle ohne Hintergrund</td>
  <td>Tabellenzelle ohne Hintergrund</td>
 </tr>
</table>

 

 

 

 

Rahmen:
Den Rahmen einer Tabelle oder einer Tabellenzelle gibt man mit „border“ an. Attribute sind z.B. die Liniendicke in Pixel, die Linienart (solid = durchgezogen, dotted = gepunktet, dashed = gestrichelt, double = zwei Linien) und die Linienfarbe.
Beispiel:

<table style="border: 3px solid;">
  <tr>
  <td style="border: 1px dashed;">1. Zelle</td>
  <td style="boder: 1px dashed red;">2. Zelle</td>
</table>

 

 

 

 

Abstand der Zellen:
Den Abstand der Tabellenzellen gibt man als Attribut in „table“ mit „border-spacing“ in Pixel an.
Beispiel:

<table style="border-spacing: 10px;">
  ...
</table>

Vertikale Ausrichtung der Zellen:
Die Ausrichtung einer Tabellenzelle gibt man in „td“ mit „vertical-align“ an. Die Attribute können „top“, „middle“ oder „bottom“ sein.
Beispiel:

<td style="vertical-align: top;">bündig oben</td>
<td style="vertical-align: middle;">zentriert</td>
<td style="vertical-align: bottom;">bündig unten</td>