|
8. Tafeln, Tabellen
Einfache Tabelle <table><tr><td> ... </td></tr></table> Ein einfaches Beispiel für eine Tabelle mit drei Zeilen und drei Spalten. Beachte: als behelfsmäßiger Abstandhalter. Quellcode:
<table> <tr> <td> 1. Zeile / 1. Spalte </td> <td> 1. Zeile / 2. Spalte </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:
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 als einfacher Abstandhalter). Quellcode:
<table border> <tr> <td> 1. Zeile / 1. Spalte </td> <td> 1. Zeile / 2. Spalte </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:
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 -Zeichen! Quellcode:
<table border="5" cellspacing="2" cellpadding="7"> <tr> <td> 1. Zeile / 1. Spalte </td> <td> 1. Zeile / 2. Spalte </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:
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> 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:
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:
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>Ergebnis:
Zellen verbinden: Zelle über Spalten (colspan)
<table><tr><td colspan="x" align=""> ... <td></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:
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:
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:
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:
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
Fadenrand
Tafel außen: <table cellspacing="1" cellpadding="0" oder cellspacing="0" cellpadding="1"> 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:
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:
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:
Barockrahmen
Tafel 1: <table border="x" cellspacing="0" cellpadding="0"> 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:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
