IN ARBEIT

8. Tafeln, Tabellen

Zum Inhaltsverzeichnis


Browser (jeweils aktuelle Fassung): Microsoft Internet Explorer (MSIE) 6.0 SP2 (Referenz), Firefox 2.0


Einfache Tabelle

<table><tr><td> ... </td></tr></table>


Ein einfaches Beispiel für eine Tabelle mit drei Zeilen und drei Spalten. Beachte: &nbsp; als behelfsmäßiger Abstandhalter.

Quellcode:

<table>
<tr>
   <td>
   1. Zeile / 1. Spalte &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td>
   <td>
   1. Zeile / 2. Spalte &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td>
   <td>
   1. Zeile / 3. Spalte
   </td>
</tr>
<tr>
   <td>
   2. Zeile / 1. Spalte
   </td>
   <td>
   2. Zeile / 2. Spalte
   </td>
   <td>
   2. Zeile / 3. Spalte
   </td>
</tr>
<tr>
   <td>
   3. Zeile / 1. Spalte
   </td>
   <td>
   3. Zeile / 2. Spalte
   </td>
   <td>
   3. Zeile / 3. Spalte
   </td>
</tr>
</table>
Ergebnis:

1. Zeile / 1. Spalte           1. Zeile / 2. Spalte           1. Zeile / 3. Spalte
2. Zeile / 1. Spalte 2. Zeile / 2. Spalte 2. Zeile / 3. Spalte
3. Zeile / 1. Spalte 3. Zeile / 2. Spalte 3. Zeile / 3. Spalte

 


Tabelle mit Rahmen, Gitternetzlinien und Abstand

<table border="x", cellspacing="y", cellpadding="z"> <tr><td> ... </tr></td></table>


Den Attributen border, cellspacing und cellpadding werden Werte in Pixel zugeordnet.

1) Beispiel mit dem table-Attribut border ohne Wertzuweisung

Gleiche Tabelle wie oben mit drei Zeilen und drei Spalten (allerdings nur 3 &nbsp; als einfacher Abstandhalter).

Quellcode:

<table border>
<tr>
   <td>
   1. Zeile / 1. Spalte &nbsp;&nbsp;&nbsp;
   </td>
   <td>
   1. Zeile / 2. Spalte &nbsp;&nbsp;&nbsp;
   </td>
   <td>
   1. Zeile / 3. Spalte &nbsp;&nbsp;&nbsp;
   </td>
</tr>
<tr>
   <td>
   2. Zeile / 1. Spalte
   </td>
   <td>
   2. Zeile / 2. Spalte
   </td>
   <td>
   2. Zeile / 3. Spalte
   </td>
</tr>
<tr>
   <td>
   3. Zeile / 1. Spalte
   </td>
   <td>
   3. Zeile / 2. Spalte
   </td>
   <td>
   3. Zeile / 3. Spalte
   </td>
</tr>
</table>
Ergebnis:

1. Zeile / 1. Spalte     1. Zeile / 2. Spalte     1. Zeile / 3. Spalte    
2. Zeile / 1. Spalte 2. Zeile / 2. Spalte 2. Zeile / 3. Spalte
3. Zeile / 1. Spalte 3. Zeile / 2. Spalte 3. Zeile / 3. Spalte

2) Beispiel mit den drei genannten table-Attributen

Gleiche Tabelle wie oben, festgelegt ist die Dicke des Rahmens (5 Pixel: x = 5), die der Gitterstäbe (2 Pixel: y = 2) und der Abstand des Zelleninhaltes von den Rändern bzw. Gittern (7 Pixel: z = 7). Beachte: Zum Zelleninhalt gehören auch &nbsp;-Zeichen!

Quellcode:

<table border="5" cellspacing="2" cellpadding="7">
<tr>
   <td>
   1. Zeile / 1. Spalte &nbsp;&nbsp;&nbsp;&nbsp;
   </td>
   <td>
   1. Zeile / 2. Spalte &nbsp;&nbsp;&nbsp;&nbsp;
   </td>
   <td>
   1. Zeile / 3. Spalte &nbsp;&nbsp;&nbsp;&nbsp;
   </td>
</tr>
<tr>
   <td>
   2. Zeile / 1. Spalte
   </td>
   <td>
   2. Zeile / 2. Spalte
   </td>
   <td>
   2. Zeile / 3. Spalte
   </td>
</tr>
<tr>
   <td>
   3. Zeile / 1. Spalte
   </td>
   <td>
   3. Zeile / 2. Spalte
   </td>
   <td>
   3. Zeile / 3. Spalte
   </td>
</tr>
</table>
Ergebnis:

1. Zeile / 1. Spalte      1. Zeile / 2. Spalte      1. Zeile / 3. Spalte     
2. Zeile / 1. Spalte 2. Zeile / 2. Spalte 2. Zeile / 3. Spalte
3. Zeile / 1. Spalte 3. Zeile / 2. Spalte 3. Zeile / 3. Spalte

 


Zelle: Höhe (absolut: Pixel), Breite (absolut: Pixel), Ausrichtung (horizontal)

<table border><tr><td width="x">, height="y", align="left", ="right", ="center"> ... </td></tr><table>
<table border><tr><th width="x">, height="y", align="left", ="right", ="center"> ... </th></tr><table>


Den Attributen width="" und height="" werden Werte in Pixel zugeordnet, wenn man absolute Maße erreichen will; align="" richtet den Text aus. Voreingestellt ist bei td align="left" und bei th align="center". In beiden folgenden Beispielen sind zwei Boxen (Zellen) mit gleicher Höhe miteinander verbunden.

1) Beispiel mit td

Quellcode:

<table border>
<tr>
   <td width="300" height="50">
   Zeile 1 / Spalte 1
   </td>
   <td width="80" align="center">
   Zeile 1 / Spalte 2
   </td>
</tr>
</table>
Ergebnis:

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2

2) Beispiel mit th

Quellcode:

<table border="30">
<tr>
   <th width="300" height="50">
   Zeile 1 / Spalte 1
   </th>
   <th width="80" align="left">
   Zeile 1 / Spalte 2
   </th>
</tr>
</table>
Ergebnis:

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2

 


Relative Tabellengröße (%)

<table border width="x%" height="y%"> <tr><td align="left", ="right", ="center"> ... </td></tr></table>


Für relative Maße werden den Attributen width="" und height="" Prozentwerte zugeordent, sie beziehen sich auf den Bildschirm oder eine Tabelle. td align="" richtet, wie oben gesehen, den Text in den Zellen aus (bei td ist align="left" voreingestellt, bei th align="center"). Beipiel: width="60%", height="80%", align="right"

Die hier für den HTML-Text verwendete allgemeine Darstellungstafel ist 750 Pixel breit, cellpadding ist auf 10 Pixel festgelegt. Demnach beträgt die effektive Breite (die Breite des Schriftspiegels) 730 Pixel. Eine Breite von 60% davon müßte also 438 Pixel umfassen. Die Vergleichstafel 3 zeigt: Setzt man 438 Pixel ein, stimmt das Ergebis fast, es sind 2 Pixel zuviel. Mit 436 Pixel stimmt dann die Breite (siehe Tafel 2). Setzt man probehalber width="438" in ein Zellen-Tag td ein, stimmen die Berechnungen nicht einmal mehr annähernd (siehe Tafel 4).

Quellcode:

<table border width="60%" height="80%">
<tr>
   <td>
   Spalte 1
   </td>
   <td align="right">
   Spalte 2
   </td>
</tr>
</table>

<table border width="436"> <tr> <td align="center"> Tafel 2: 436 Pixel </td> </tr> </table>

<table border width="438"> <tr> <td align="center"> Tafel 3: 438 Pixel </td> </tr> </table>

<table border> <tr> <td width="438" align="center"> Tafel 4: 438 Pixel </td> </tr> </table>

Ergebnis:

Spalte 1 Spalte 2

Tafel 2: 436 Pixel

Tafel 3: 438 Pixel

Tafel 4: 438 Pixel

 


Zellen verbinden: Zelle über Spalten (colspan)

<table><tr><td colspan="x" align=""> ... <td></tr><tr><td> ... </td><td> ... </td></tr></table>
<table><tr><th colspan="x" align=""> ... <th></tr><tr><td> ... </td><td> ... </td></tr></table>


Dem Attribut colspan="" wird die Anzahl der darunterliegenden Zellen zugeordnet. Hier in den Beispiel: 2 bzw. 3. Für den Text in der colspan-Zelle ist bei td align="left", bei th align="center" voreingestellt.

Quellcode:

<table border>
<tr>
   <td colspan="2">
   1 Zeile
   </td>
</tr>
<tr>
   <td>
   1
   </td>
   <td>
   Spalte 2
   </td>
</tr>
</table>
Ergebnis:

1 Zeile
1 Spalte 2

Quellcode:

<table border cellpadding="10">
<tr>
   <td colspan="2" align="right">
   1 Zeile
   </td>
</tr>
<tr>
   <td>
   1
   </td>
   <td>
   Spalte 2
   </td>
   </td>
   <td>
   Spalte 3
   </td> 
</tr>
</table>
Ergebnis:

1 Zeile
Spalte 1 Spalte 2 Spalte 3

 


Zellen verbinden: Zelle vor oder nach Zellen (rowspan)

<table><tr><th rowspan="x"> ... </th><td align=""> ... </td></tr><td align=""> ... </td></tr></table>


Dem Attribut rowspan="" wird die Anzahl der vorausgehenden oder abschließenden Zellen zugeordnet. Hier im Beispiel: 5. Die Voreinstellung bei td ist align="left", bei th align="center".

Quellcode 1:

<table border cellpadding="15">
<tr>
   <th rowspan="5">
   Am Anfang war das Wort
   </th>
   <td>
   Zeile 1
   </td>
</tr>
<tr>
   <td>
   2
   </td>
</tr>
<tr>
   <td align="right">
   3
   </td>
</tr>
<tr>
   <td>
   4
   </td>
</tr>
<tr>
   <td align="center">
   5
   </td>
</tr>
</table>
Ergebnis 1:

Am Anfang war das Wort Zeile 1
2
3
4
5

Quellcode 2:

<table border cellpadding="15">
<tr>
   <td>
   Zeile 1
   </td>
   <th rowspan="5">
   Das Anfangswort am Ende
   </th>
</tr>
<tr>
   <td>
   2
   </td>
</tr>
<tr>
   <td align="right">
   3
   </td>
</tr>
<tr>
   <td>
   4
   </td>
</tr>
<tr>
   <td align="center">
   5
   </td>
</tr>
</table>
Ergebnis 2:

Zeile 1 Das Anfangswort am Ende
2
3
4
5

 


Tabellenüberschrift

<table><caption align=""> ... </caption><tr><td> ... </td></tr>


align="center" ist für die Ausrichtung der Überschrift voreingestellt. Achtung: Der MSIE (6.0 SP2) rückt den Titel bei align="left" bzw. align="right" ordungsgemäß bündig nach links oder rechts; der Firefox (1.5.0.7) aber rückt den Titel unsinnig links bzw. rechts NEBEN die Tabelle!

Quellcode: Siehe Quelltext

Das ist eine Überschrift.
Spalte 1 Spalte 2 Spalte 3 Spalte 4 Kasten 1004 5

 


Fadenrand

Tafel außen: <table cellspacing="1" cellpadding="0" oder cellspacing="0" cellpadding="1">
Tafel innen : <table cellspacing="0" cellpadding="x">


Zunächst ein einfaches Beispiel.

Quellcode 1:

<table bgcolor="#800080" cellspacing="0" cellpadding="1">
<tr>
   <td>
   <table cellspacing="0" cellpadding="20">
   <tr>
      <td bgcolor="#ffffff">
      Fadenrand, einfaches Beispiel
      </td>
   </tr>
   </table>
   </td>
</tr>
</table>

Ergebnis 1:

Fadenrand, einfaches Beispiel

Quellcode 2:

<table bgcolor="#800080" cellspacing="0" cellpadding="1">
<tr>
   <td>
   <table cellspacing="0" cellpadding="4">
   <tr>
      <td bgcolor="#ffffff">Inhalt 1 für dieses Feld 1</td>
      <td bgcolor="#ffffff">Inhalt 2 für dieses Feld 2</td>
   </tr>
   <tr>
      <td bgcolor="#ffffff">Inhalt 3 für dieses Feld 3</td>
      <td bgcolor="#ffffff">Inhalt 4 für dieses Feld 4</td>
   </tr>
   </table>
   </td>
</tr>
</table>
Ergebnis 2:

Inhalt 1 für dieses Feld 1 Inhalt 2 für dieses Feld 2
Inhalt 3 für dieses Feld 3 Inhalt 4 für dieses Feld 4

Quellcode 3:

<table bgcolor="#800080" cellspacing="1" cellpadding="0">
<tr>
   <td>
   <table cellspacing="0" cellpadding="4">
   <tr>
      <td bgcolor="#ffffff">Inhalt 1 für dieses Feld 1</td>
      <td bgcolor="#ffffff">Inhalt 2 für dieses Feld 2</td>
   </tr>
   <tr>
      <td bgcolor="#ffffff">Inhalt 3 für dieses Feld 3</td>
      <td bgcolor="#ffffff">Inhalt 4 für dieses Feld 4</td>
   </tr>
   </table>
   </td>
</tr>
</table>
Ergebnis 3 = Ergebnis 2:

Inhalt 1 für dieses Feld 1 Inhalt 2 für dieses Feld 2
Inhalt 3 für dieses Feld 3 Inhalt 4 für dieses Feld 4

 


Barockrahmen

Tafel 1: <table border="x" cellspacing="0" cellpadding="0">
Tafel 2: <table border="y" cellspacing="0" cellpadding="0">
usw.


So ähnlich, wie vorher gezeigt, funktioniert auch der sogenannte Barockrahmen. Er ist ein trickreiches Gebilde, das etliche Abwandlungen erfahren kann. Beachte: Der unten wiedergegebene Quellcode verwendet die proprietären MSIE-Tags (= MSIE-eigenen Tags) bordercolorlight und bordercolordark. Im Firefox ist deshalb die farbliche Wirkung nicht sehr beeindruckend. Um mit ihm die gleiche oder eine ähnliche Wirkung zu erzielen, müssen CSS-Befehle (Cascading Style Sheets-Befehle) eingesetzt werden (mehr darüber in Planung).

Quellcode:

<table bgcolor="#aaddff">
<tr>
   <td>
   <table border="14" bordercolorlight="#b0c4de" bordercolordark="#0000ff"
   cellpadding="0" cellspacing="0">
   <tr><td>
   <table border="4" bordercolorlight="#b0c4de" bordercolordark="#0000ff"
   cellpadding="0" cellspacing="0">
   <tr><td>
   <table border="3" bordercolorlight="#b0c4de" bordercolordark="#0000ff"
   cellpadding="0" cellspacing="0">
   <tr><td>
   <table border="2" bordercolorlight="#b0c4de" bordercolordark="#0000ff"
   cellpadding="0" cellspacing="0">
   <tr><td>
   <img src="lycdnow.jpg" width="186" height="211" alt="Prez: Lester Young">
   </td></tr>
   </td></tr>
   </td></tr>
   </td></tr>
   </table></table></table></table>
   </td>
</tr>
</table>
Ergebnis:

Prez: Lester Young
Prez: Lester Young

 
Stand: 5.10.2006


Zum Inhaltsverzeichnis  Nach oben  Weiter