Weiteres Tabellenbeispiel


In diesem etwas komplexeren Beispiel werden folgende Tabellenattribute verwendet:

   align         Horizontale Ausrichtung (mögliche Werte "left", "right", "center", "justify")
                 Der Browser Netscpape 4.5 unterstützt "justify" (Blocksatz) nicht.
   valign        Vertikale Ausrichtung (mögliche Werte "top", "bottom", "middle", "baseline")
   cellpadding   Randabstand der Tabelleninhalte. Standard ist 0.
   cellspacing   Erhöhung des Abstandes zwischen den Zellen. Standard ist 0.
   bgcolor       Hintergrundfarbe der gesamten Tabelle oder einer einzelnen Zeile oder Zelle
   colspan       Zusammenfassung von Spalten
   rowspan       Zusammenfassung von Zeilen
Spalte 1 Spalten 2+3 Spalte 4 Spalte 5
Zelle Z1 Sp2 Zelle Z1 Sp3 Zelle Z1 Sp4 Zelle Z1 Sp5
Zelle Z2 Sp2 Zelle Z2 Sp3 Zelle Z2 Sp4 Zelle Z2 Sp5
Zelle Z3 Sp1 Zelle Z3 Sp2 Zelle Z3 Sp3 Zelle Z4 Sp4 Zelle Z3 Sp5
Zelle Z4 Sp1 Zelle Z4 Sp2 Zelle Z4 Sp2   Zelle Z4 Sp5.
In eine leere Zelle wie links
muß eine Non-Break-Space
  geschrieben werden,
wenn die Zelle auch einen
Rahmen erhalten soll.

Der Quelltext dieser Tabelle

<table align="Center" border="6" bordercolor="#0000FF"  cellpadding="5" cellspacing="2">
<tr bgcolor="Yellow">
  <th> Spalte 1</th>
  <th colspan="2">Spalten 2+3</th>
  <th>Spalte 4</th>
  <th>Spalte 5</th>
</tr>
<tr>
  <td rowspan="2" ><img src="GIF-Bilder/FHM-Logo-Tr.gif" width="70"> </td>
  <td>Zelle Z1 Sp2</td>
  <td>Zelle Z1 Sp3</td>
  <td>Zelle Z1 Sp4</td>
  <td align="left">Zelle Z1 Sp5</td>
</tr>
<tr>
  <td>Zelle Z2 Sp2</td>
  <td>Zelle Z2 Sp3</td>
  <td>Zelle Z2 Sp4</td>
  <td align="center">Zelle Z2 Sp5</td>
</tr>
<tr>
  <td>Zelle Z3 Sp1</td>
  <td>Zelle Z3 Sp2</td>
  <td>Zelle Z3 Sp3</td>
  <td>Zelle Z4 Sp4</td>
  <td align="right">Zelle Z3 Sp5</td>
</tr>
<tr>
  <td valign="top">Zelle Z4 Sp1</td>
  <td valign="middle">Zelle Z4 Sp2</td>
  <td valign="bottom">Zelle Z4 Sp2</td>
  <td> </td>
  <td bgcolor="LightGrey">Zelle Z4 Sp5. <br>
  In eine leere Zelle wie links <br>
  muß eine Non-Break-Space <br>
  <font color="red"><b>&nbsp;</b></font> geschrieben werden, <br>
  wenn die Zelle auch einen<br>
  Rahmen erhalten soll.</td>
</tr>
</table>


Wenn man die Tabellenzellen mit farbigen Hintergrund haben möchte, dann muß das Attribut bgcolor in jede Zelle geschrieben werden. Gleiches trifft auch für die Schriftformatierung zu. Da kommt Freude auf! Beim Internet Explorer 5.x kann man aber sehr effiziente Stil-Vorlagen (Cascaded Style Sheets) für Tabellen schreiben, die aber vom Netscape Navigator 4.x nicht unterstützt werden. Es wird aber Zeit!

Beide Browser akzeptieren aber diesen Vorgriff auf Cascaded Style Sheets:

    <table style="background-color:#ff0000">
    ....
    </table>
  

Damit werden alle Tabellenzellen einheitlich eingefärbt, in diesem Fall mit roter Farbe.


Zurück zur Startseite