Tabellen - Beispiele

Standardtabelle

<table border="1">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
</tr>
</table>

Und hier ist das Ergebnis:

R1 C1 R1 C2
R2 C1 R2 C2
R3 C1 R3 C2

Blinde Tabelle

Blinde Tabellen werden häufig zur Strukturierung des Textes oder zum Nebeneinanderstellen von Text und Bildern gebraucht.

<table border="0">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
</tr>
</table>

Und hier ist das Ergebnis:

R1 C1 R1 C2
R2 C1 R2 C2
R3 C1 R3 C2

Mögliche Anwendungen:

GIF stellt 256 Farben dar
JPEG stellt 16,7 Millionen Farben dar
PNG stellt 16,7 Millionen Farben dar

oder:

gelb7.gif (1K) Hausaufgaben machen
gruen7.gif (1K) Freundin treffen
grau7.gif (1K) ins Kino gehen

Tabellen mit Kopf und caption

<table border="1">
<caption>Text</caption>
<tr>
<th>R1 C1</th>
<th>R1 C2</th>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
</tr>
</table>

Und hier das Ergebnis:

Text
R1 C1 R1 C2
R2 C1 R2 C2
R3 C1 R3 C2

Tabellen mit cellspacing und cellpadding

Diese beiden Attribute verwendet man zum Platzschaffen zwischen den Zellen und den Zellrändern.

<table border="1" cellpadding="5" cellspacing="10">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
</tr>
</table>

Und nun das Egebnis:

R1 C1 R1 C2
R2 C1 R2 C2
R3 C1 R3 C2

Hintergrund der Zellen

<table border="1">
<caption>Caption</caption>
<tr>
<td bgcolor="White">R1 C1</td>
<td bgcolor="Red">R1 C2</td>
</tr>
<tr>
<td bgcolor="Purple">R2 C1</td>
<td bgcolor="Yellow">R2 C2</td>
</tr>
<tr>
<td bgcolor="Aqua">R3 C1</td>
<td bgcolor="Fuchsia">R3 C2</td>
</tr>
</table>

Ob das nun schön ist oder nicht, das ist eine andere Frage. Trotzdem, hier ist das Ergebnis:

Caption
R1 C1 R1 C2
R2 C1 R2 C2
R3 C1 R3 C2

Zellen verbinden

horizontal mit colspan

<table border="1">
<tr>
<td colspan="2">R1 C1/C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
</tr>
</table>

ergibt:

R1 C1/C2
R2 C1 R2 C2
R3 C1 R3 C2

vertikal mit rowspan

<table border="1">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td rowspan="2">R2/R3 C1</td>
<td>R2 C2</td>
</tr>
<tr>
<td>R3 C2</td>
</tr>
</table>

und hier das Ergebnis:

R1 C1 R1 C2
R2/R3 C1 R2 C2
R3 C2

horizontal und vertikal mit colspan und rowspan

<table border="1">
<caption>Caption</caption>
<tr>
<td colspan="5" bgcolor="Silver">colspan1-5</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td colspan="2" rowspan="2" bgcolor="Aqua">colspan 34 und rowspan 23 </td>
<td>R2 C5</td>
</tr>
<tr>
<td rowspan="2" bgcolor="Red">rowspan3-4</td>
<td>R3 C2</td>
<td>R3 C5</td>
</tr>
<tr>
<td>R4 C2</td>
<td>R4 C3</td>
<td>R4 C4</td>
<td>R4 C5</td>
</tr>
</table>

Müßte man diese Tabellendeklaration von Hand eingeben, wäre das nicht so einfach. Fehler würden nicht ausbleiben. Mit dem Tabellen-Plugin ist es dagegen ein Kinderspiel. Und hier das Ergebnis:

Caption
colspan1-5
R2 C1 R2 C2 colspan 34 und rowspan 23 R2 C5
rowspan3-4 R3 C2 R3 C5
R4 C2 R4 C3 R4 C4 R4 C5

Zurück Start Weiter Home Übungen Beispiele