cellpadding="10"
cellspacing="8"
cellpadding="10" cellspacing="0"
table (Tabelle)
tr = table row = Tabellen Zeile
th = table head = Tabellen-Titel
td = table data = Tabellen Daten
cellpadding="10"
cellspacing="8"
cellpadding="10" cellspacing="0"
border="1": Formatierung der Tabelle mit Gitternetzlinien
th: Zellen für Titel fett und zeintriert
td: Zellen für Text normal und linksbündig
1) Angabe im Quelltext
<table border="1"> <tr> <th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> <th>Bemerkungen</th> </tr> <tr> <td>Zeile 2/Spalte 1</td> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> <td>Zeile 2/Spalte 4</td> </tr> <tr> <td>Zeile 3/Spalte 1</td> <td>Zeile 3/Spalte 2</td> <td>Zeile 3/Spalte 3</td> <td>Zeile 3/Spalte 4</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 | Bemerkungen |
---|---|---|---|
Zeile 2/Spalte 1 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 | Zeile 2/Spalte 4 |
Zeile 3/Spalte 1 | Zeile 3/Spalte 2 | Zeile 3/Spalte 3 | Zeile 3/Spalte 4 |
cellpadding="10"
cellpadding="10": Zellen-Innenabstand
1) Angabe im Quelltext
<table border="1" cellpadding="10"> <tr> <th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr> <tr> <td>Zeile 2/Spalte 1</td> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> </tr> <tr> <td>Zeile 3/Spalte 1</td> <td>Zeile 3/Spalte 2</td> <td>Zeile 3/Spalte 3</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 |
---|---|---|
Zeile 2/Spalte 1 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 |
Zeile 3/Spalte 1 | Zeile 3/Spalte 2 | Zeile 3/Spalte 3 |
cellspacing="8"
cellspacing="8": Zellen-Aussenabstand
1) Angabe im Quelltext
<table border="1" cellspacing="8"> <tr> <th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr> <tr> <td>Zeile 2/Spalte 1</td> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> </tr> <tr> <td>Zeile 3/Spalte 1</td> <td>Zeile 3/Spalte 2</td> <td>Zeile 3/Spalte 3</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 |
---|---|---|
Zeile 2/Spalte 1 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 |
Zeile 3/Spalte 1 | Zeile 3/Spalte 2 | Zeile 3/Spalte 3 |
cellpadding="10" cellspacing="0"
cellpadding="10": Zellen-Innenabstand
cellspacing="0": Zellen-Aussenabstand
1) Angabe im Quelltext
<table border="1" cellpadding="10" cellspacing="0"> <tr> <th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr> <tr> <td>Zeile 2/Spalte 1</td> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> </tr> <tr> <td>Zeile 3/Spalte 1</td> <td>Zeile 3/Spalte 2</td> <td>Zeile 3/Spalte 3</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 |
---|---|---|
Zeile 2/Spalte 1 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 |
Zeile 3/Spalte 1 | Zeile 3/Spalte 2 | Zeile 3/Spalte 3 |
1) Angabe im Quelltext
<table style="border:1px solid #f00;" width="50%" > <tr> <td>Tabelle mit dünnem Rahmen in Rot</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Tabelle mit dünnem Rahmen in Rot |
Beispiel
table border="0" (gibt die Tabelle ohne Gitternetzlinie)
border="0": Formatierung der Tabelle ohne Gitternetzlinien
Bemerkungen:
Der Rand der Tabelle wird während dem Entwickeln eingeschaltet (border="1"), damit exakt ersichtlich ist, wo was anfangt und aufhört.
Ist das Design dann entsprechend fertig, werden die Ränder normalerweise ausgeschaltet (border="0")
Um ein wenig Rand zwischen den Zellen der Tabelle zu schaffen, kann die Tabelle zum Beispiel mit cellpadding, cellspacing oder mit einer grösseren Breite formatiert werden.
1) Angabe im Quelltext
<table border="0" cellspacing="12"> <tr> <th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> <th>Bemerkungen</th> </tr> <tr> <td>Zeile 2/Spalte 1</td> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> <td>Zeile 2/Spalte 4</td> </tr> <tr> <td>Zeile 3/Spalte 1</td> <td>Zeile 3/Spalte 2</td> <td>Zeile 3/Spalte 3</td> <td>Zeile 3/Spalte 4</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 | Bemerkungen |
---|---|---|---|
Zeile 2/Spalte 1 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 | Zeile 2/Spalte 4 |
Zeile 3/Spalte 1 | Zeile 3/Spalte 2 | Zeile 3/Spalte 3 | Zeile 3/Spalte 4 |
"th" in der ersten Spalte anstatt erster Zeile
1) Angabe im Quelltext
<table border="1"cellpadding="10"> <tr> <th>Titel 1</th> <td>Zeile 1/Spalte 2</td> <td>Zeile 1/Spalte 3</td> </tr> <tr> <th>Titel 2</th> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Zeile 1/Spalte 2 | Zeile 1/Spalte 3 |
---|---|---|
Titel 2 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 |
1) Angabe im Quelltext
<table border="1"> <tr> <td><h6>London</h6></td> <td>Hauptstadt von England<br> Grösste Stadt des Landes</td> </tr> <tr> <td><h6>Paris</h6></td> <td>Hauptstadt von Frankreich</td> </tr> </table>
2) Ausgabe im HTML-Dokument
London |
Hauptstadt von England Grösste Stadt des Landes |
Paris |
Hauptstadt von Frankreich |
ARQ |
Automatic Repeat Request. Eine allgemeine Bezeichnung für Fehlerprotokolle, die Übertragungsfehler erkennt und defekte Blöcke selbständig wiederholt |
HDLC |
High Level Data Link Control. Ein Standard-Protokoll, das von der Kommission für internationale Standards für Softwareanwendungen in synchronen Anlagen verwendet wird. |
bgcolor="#33FF00" (Hintergrundfarbe)
Die Hintergrundfarbe der Tabelle - je nach Geschmack, aber immer mit der Prämisse der
bestmöglichen Lesbarkeit!
height="300" (Höhe)
Eine bestimmte Höhe der Tabelle
height="100%" (Höhe)
Den gesamten Bildschirm als Höhe der Tabelle
Bemerkung: Tabellenhöhe für den ganzen Bildschirm mit table height="100%" gibt eine gute Anzeige über den ganzen Bildschirm, wird aber vom W3C Validator nicht angenommen
td width="175" (table width = Tabellen Breite)
Die Breite dieser Tabelle - für das Logo und die Steuerung reichen im Normalfall 150
Punkte aus es soll ja auch noch Platz für den eigentichen Inhalt übrig bleiben
border="0" (ohne Rand)
border="1" (mit Rand)
Der Rand der Tabelle wird während dem Entwickeln eingeschaltet,
damit exakt ersichtlich ist, wo was anfangt und aufhört.
Ist das Design dann entsprechend fertig, werden die Ränder
normalerweise ausgeschaltet (border="0")
cellpadding="10" (Rand der Zelle)
Um ein Wenig Rand zwischen Tabelle und Tabelleninhalt zu schaffen.
Design bis an den Rand
Damit die Tabelle bündig an die Seitenränder anschliesst
müssen Body-Tag folgende Sequenz auftauchen:
body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"
width="70%": Breite der Tabelle (hier in Prozent der Bildschirmbreite)
1) Angabe im Quelltext
<table border="1" cellpadding="10" cellspacing="0" width="70%"> <tr> <th>Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr> <tr> <td>Zeile 2/Spalte 1</td> <td>Zeile 2/Spalte 2</td> <td>Zeile 2/Spalte 3</td> </tr> <tr> <td>Zeile 3/Spalte 1</td> <td>Zeile 3/Spalte 2</td> <td>Zeile 3/Spalte 3</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 |
---|---|---|
Zeile 2/Spalte 1 | Zeile 2/Spalte 2 | Zeile 2/Spalte 3 |
Zeile 3/Spalte 1 | Zeile 3/Spalte 2 | Zeile 3/Spalte 3 |
table bgcolor="#33CCFF" (Tabellen-Farbe)
table border="0" (Tabelle ohne Gitternetz)
1) Angabe im Quelltext
<table bgcolor="#33CCFF" border="0"> <tr><td> Text 1a Spalte 1<br>Text 1b Spalte 1</td> <td>Text 2a Spalte 2a<br>Text 2b Spalte 2</td></tr> </table>
2) Ausgabe im HTML-Dokument
Text 1a Spalte 1 Text 1b Spalte 1 |
Text 2a Spalte 2a Text 2b Spalte 2 |
table cellpadding="10" (Tabellen-Randababstand)
table bgcolor="#33CCFF" (Tabellen-Farbe)
table border="0" (Tabelle mit Gitternetz)
1) Angabe im Quelltext
<table cellpadding="10" bgcolor="#33CCFF" border="0"> <tr><td>Text 1a Spalte 1<br>Text 1b Spalte 1</td> <td>Text 2a Spalte 2a<br>Text 2b Spalte 2</td></tr> </table>
2) Ausgabe im HTML-Dokument
Text 1a Spalte 1 Text 1b Spalte 1 |
Text 2a Spalte 2a Text 2b Spalte 2 |
table cellpadding="15" (Tabellen-Randababstand)
table border="0" (Tabelle mit Gitternetz)
td bgcolor="#33CCFF" (Zellen-Farbe)
td bgcolor="lime" (Zellen-Farbe)
1) Angabe im Quelltext
<table cellpadding="15" border="0"> <tr> <td bgcolor="#33CCFF"> Text 1a Spalte 1<br> Text 1b Spalte 1 </td> <td bgcolor="lime"> Text 2a Spalte 2<br> Text 2b Spalte 2 </td> </tr> </table>
2) Ausgabe im HTML-Dokument
Text 1a Spalte 1 Text 1b Spalte 1 |
Text 2a Spalte 2 Text 2b Spalte 2 |
HTML-Seminar gibt an:
table height="100%" (Tabellenhöhe)
table cellpadding="10" (Tabellen-Randababstand)
table border="1" (Tabelle mit Gitternetz)
td width="175" (bestimmte Zellenbreite)
td bgcolor="aquamarin" (Zellenfarbe)
Aber Achtung !!!
height="100% geht nicht
<table height="300">wird vom Validator nicht akzeptiert
<td height="300">wird akzeptiert
1) Angabe im Quelltext
<table cellpadding="10" border="1"> <tr> <td width="175" height="300" bgcolor="#33FF00"> Text 1 Spalte 1<br> Text 2 Spalte 1<br> <br> Text 3 Spalte 1 </td> <td> Text 1 Spalte 2<br> Text 2 Spalte 2 </td> </tr> </table>
2) Ausgabe im HTML-Dokument
Text 1 Spalte 1 Text 2 Spalte 1 Text 3 Spalte 1 |
Text 1 Spalte 2 Text 2 Spalte 2 |
Tabellen mit Randabstand
Zelle mit weisser Schrift
Zelle mit schwarzer Hintergrundfarbe
1) Angabe im Quelltext
<table cellpadding="10"> <tr> <td style="color:white;background-color:black;"> Irgendein Text in dieser Zelle </td> </tr> </table>
2) Ausgabe im HTML-Dokument
Irgendein Text in dieser Zelle |
Breit und hoch mit HTML:
1) Angabe im Quelltext
<table border="1" width="60%"> <tr> <th width="50%" height="100">Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr> <tr> <td>Text 1.1</td> <td>Text 2.1</td> <td>Text 3.1</td> </tr> <tr> <td>Text 1.2</td> <td>Text 2.2</td> <td>Text 3.2</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 |
---|---|---|
Text 1.1 | Text 2.1 | Text 3.1 |
Text 1.2 | Text 2.2 | Text 3.2 |
1) Angabe im Quelltext
Breit und hoch mit CSS (CSS-Inline)
<table border="1" style="width:60%"> <tr> <th style="width:50%;height:100px">Titel 1</th> <th>Titel 2</th> <th>Titel 3</th> </tr> <tr> <td>Text 1.1</td> <td>Text 2.1</td> <td>Text 3.1</td> </tr> <tr> <td>Text 1.2</td> <td>Text 2.2</td> <td>Text 3.2</td> </tr> lt/table>
2) Ausgabe im HTML-Dokument
Titel 1 | Titel 2 | Titel 3 |
---|---|---|
Text 1.1 | Text 2.1 | Text 3.1 |
Text 1.2 | Text 2.2 | Text 3.2 |
Mit caption-side: kann die Position der Tabellenüberschrift bestimmt werden.
Folgende Angaben sind erlaubt:
top = oberhalb der Tabelle
bottom = unterhalb der Tabelle
left = links neben der Tabelle
right = rechts neben der Tabelle
1) Angabe im Quelltext
<table border="1"><caption style="caption-side:top">
Assoziationen</caption>
<tr> <th>Berlin</th><th>Hamburg</th> <th>München</th> </tr> <tr> <td>Buletten</td><td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Berlin | Hamburg | München |
---|---|---|
Buletten | Frikadellen | Fleischpflanzerl |
colspan="2"
rowspan="2"
colspan="2"
colspan:
col = column = Kolonne = Spalte
span = Abgrenzung = Spanne
Beispiel
1) Angabe im Quelltext
<table border="1"> <tr> <th colspan="2">Die Menschheit besteht aus</th> </tr> <tr><td>Eseln</td><td>Affen</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Die Menschheit besteht aus | |
---|---|
Eseln | Affen |
rowspan="2"
rowspan:
row = Reihe (Spalte oder Kolonne)
span = Abgrenzung = Spanne
Beispiel
1) Angabe im Quelltext
<table border="1"> <tr> <th rowspan="2">Die Eselheit besteht aus</th> <td>echten Eseln</td> </tr> <tr> <td>verkappten Eseln</td> </tr> <tr> <th rowspan="2">Die Affenheit besteht aus</th> <td>echten Affen</td> </tr> <tr> <td>verkappten Affen</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Die Eselheit besteht aus | echten Eseln |
---|---|
verkappten Eseln | |
Die Affenheit besteht aus | echten Affen |
verkappten Affen |
Beispiel
1) Angabe im Quelltext
<table border="1"> <tr><th colspan="2" rowspan="2">Der Mensch ist...</th> <td>zum einen Teil ein Esel</td></tr> <tr><td>zum anderen Teil ein Affe</td></tr> <tr><td>weder ein richtiger Esel</td> <td>noch ein richtiger Affe</td> <td><b>menschlich, allzumenschlich</b></td></tr> </table>
2) Ausgabe im HTML-Dokument
Der Mensch ist... | zum einen Teil ein Esel | |
---|---|---|
zum anderen Teil ein Affe | ||
weder ein richtiger Esel | noch ein richtiger Affe | menschlich, allzumenschlich |
colspan="3": Zeilen-Zellen zusammenfassen
rowspan="2": Spalten-Zellen zusammenfassen
1) Angabe im Quelltext
<table border="1" cellpadding="10" cellspacing="0"> <tr> <th colspan="3">Titel der 3 Spalten</th> </tr> <tr> <td rowspan="2">Text der Zeilen 2 und 3 in Spalte 1</td> <td>Zeile 2 in Spalte 2</td> <td>Zeile 2 in Spalte 3</td> </tr> <tr> <td>Zeile 3 in Spalte 2</td> <td>Zeile 3 in Spalte 3</td> </tr> </table>
2) Ausgabe im HTML-Dokument
Titel der 3 Spalten | ||
---|---|---|
Text der Zeilen 2 und 3 in Spalte 1 | Zeile 2 in Spalte 2 | Zeile 2 in Spalte 3 |
Zeile 3 in Spalte 2 | Zeile 3 in Spalte 3 |