2.8.2 Tabelle (table)

1 Grundlagen und Workshops

a) Bezeichnungen

• table (Tabelle)
• tr = table row = Tabellen Zeile
• th = table head = Tabellen-Titel
• td = table data = Tabellen Daten

b) Grundlagen

• SELFHTML: Aufbau einer Tabelle

• W3C Recommendation - CSS2.1 Specification: Tables

• W3Schools: CSS2-Reference: table

c) Workshops - Allgemein

• HTML-Seminar: Tabellen

• Bjellis Webwelt: Aufbau einer Tabelle mit Gitternetzlinien

d) Workshop - CSS-Layouts

• The Styleworks: Tabellenformatierung mit CSS - Einführung
  The Styleworks: Tabellen-Layout mit CSS

2 Tabelle mit Gitternetzlinien (table with border)

a) Allgemein

table border="1": gibt die Tabelle mit Gitternetzlinie

<table border="1">
 <tr>
  <th>Titel 1<br>Zeile 1/Spalte 1</th>
  <th>Titel 2<br>Zeile 1/Spalte 2</th>
  <th>Titel 3<br>Zeile 1/Spalte 3</th>
  <th>Bemerkungen<br>Zeile 1/Spalte 4</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 2/Spalte 3</td>
  <td>Zeile 3/Spalte 4</td>
 </tr>
</table>

Titel 1 Zeile 1/Spalte 1	Titel 2 Zeile 1/Spalte 2	Titel 3 Zeile 1/Spalte 3	Bemerkungen Zeile 1/Spalte 4
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 2/Spalte 3	Zeile 3/Spalte 4

b) Dünne Tabellenrahmen

Beispiel 1: normaler Rahmen mit border="1"

<table border="1">
 <tr><th colspan="3">Tabelle mit normalem Rahmen
 (ohne cellpadding)</th></tr>
 <tr><td colspan="3">Zellen verbinden mit colspan="3"</td></tr>
 <tr><td>border="1"</td><td>-</td><td>-</td></tr>
</table>

Tabelle mit normalem Rahmen (ohne cellpadding)
Zellen verbinden mit colspan="3"
border="1"	-	-

Beispiel 2: normaler Rahmen mit border="1" und cellpadding="10"

<table border="1" cellpadding="10">
 <tr><th colspan="3">Tabelle mit normalem Rahmen
 (mit cellpadding)</th></tr>
 <tr><td colspan="3">Zellen verbinden mit colspan="3"</td></tr>
 <tr><td>border="1"</td><td>cellpadding="10"</td
><td>-</td></tr>
</table>

Tabelle mit normalem Rahmen (mit cellpadding)
Zellen verbinden mit colspan="3"
border="1"	cellpadding="10"	-

Beispiel 3: dünner Rahmen mit border="1" cellpadding="3" und cellspacing="0"

<table border="1" cellpadding="3" cellspacing="0">
 <tr><th colspan="3">Tabelle mit dünnem Rahmen
 (mit cellpadding und cellspacing)</th></tr>
 <tr><td colspan="3">Zellen verbinden mit colspan="3"</td></tr>
 <tr><td>border="1"</td><td>cellpadding="3"</td>
 <td>cellspacing="0"</td></tr>
</table>

Tabelle mit dünnem Rahmen (mit cellpadding und cellspacing)
Zellen verbinden mit colspan="3"
border="1"	cellpadding="3"	cellspacing="0"

Beispiel 4: dünner roter Rahmen, Breite 30% border:1px solid:#f00

 <table width="30%" style="border:1px solid #f00;">
 <tr><td>Tabelle mit dünnen Rahmen in Rot</td></tr>
 </table>

Tabelle mit dünnen Rahmen in Rot

• CSS 4 You: Dünne Tabellenrahmen

c) Dekorative Tabellenrahmen

Beispiel

• Bachmann: Dekorative Tabellenrahmen

3 Tabelle ohne Gitternetzlinien (table without border)

a) Prinzip

table border="0" (gibt die Tabelle ohne Gitternetzlinie)

b) Beispiel

<table border="0">
 <tr><th>Zeile 1/Spalte 1</th>
 <th>Zeile 1/Spalte 2</th></tr>
 <tr><td>Zeile 2/Spalte 1</td>
 <td>Zeile 2/Spalte 2</td></tr>
</table>

Zeile 1/Spalte 1	Zeile 1/Spalte 2
Zeile 2/Spalte 1	Zeile 2/Spalte 2

4 Tabelle mit Tiltel in der ersten Spalte

a) Prinzip

"th" in der ersten Spalte anstatt erster Zeile

b) Beispiel 1

Titel 1: Zeile 1/Spalte 1	Zeile 1/Spalte 2	Zeile 1/Spalte 3
Titel 2: Zeile 2/Spalte 1	Zeile 2/Spalte 2	Zeile 2/Spalte 3

b) Beispiel 2: Titel links, formatiert wie Überschrift 6

<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>

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.

5 Tabelle mit bestimmten Breiten, Höhen und Farben

a) Attribute

• 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"

b) Beispiel 1: Tabelle mit Farbe, ohne Rand

• table bgcolor="#33CCFF" (Tabellen-Farbe)
  
• table border="0" (Tabelle ohne Gitternetz)
  

<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>

Text 1a Spalte 1 Text 1b Spalte 1

Text 2a Spalte 2a Text 2b Spalte 2

c) Beispiel 2: Tabelle mit Randabstand (cellpadding) und mit Farbe, ohne Rand

• table cellpadding="10" (Tabellen-Randababstand)
  
• table bgcolor="#33CCFF" (Tabellen-Farbe)
  
• table border="0" (Tabelle mit Gitternetz)
  

<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>

Text 1a Spalte 1 Text 1b Spalte 1

Text 2a Spalte 2a Text 2b Spalte 2

d) Beispiel 3: Tabelle mit Randabstand, ohne Rand, Zellen mit verschiedener Farbe

• table cellpadding="10" (Tabellen-Randababstand)
  
• table border="0" (Tabelle mit Gitternetz)
  
• td bgcolor="#33CCFF" (Zellen-Farbe)
  
• td bgcolor="lime" (Zellen-Farbe)
  

<table cellpadding="10" border="0">
 <tr><td bgcolor="#33CCFF">Text 1a Spalte 1<br>
 Text 1b Spalte 1</td>
 <td bgcolor="lime">Text 2a Spalte 2a<br>
 Text 2b Spalte 2</td></tr>
</table>

Text 1a Spalte 1 Text 1b Spalte 1

Text 2a Spalte 2a Text 2b Spalte 2

e) Beispiel 4: Tabelle mit einer bestimmten Höhe und Breite der ersten Spalte

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

<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>

Text 1 Spalte 1 Text 2 Spalte 1 Text 3 Spalte 1

Text 1 Spalte 2 Text 2 Spalte 2

• HTLM-Seminar: Grunddesign

f) Beispiel 5: Tabelle mit schwarzem Hintergrund und weisser Farbe

• Tabellen mit Randabstand
  
• Zelle mit weisser Schrift
  
• Zelle mit schwarzer Hintergrundfarbe

<table cellpadding="10">
 <tr><td style="color:white;background-color:black;">
 Irgendein Text in dieser Zelle</td></tr>
</table>

Irgendein Text in dieser Zelle

g) Beispiel 6: Breite und Höhe mit HTML resp. CSS formatieren

Breit und hoch mit HTML:

 <table border="1" width="60%">
   <tr>
     <th width="50%" height="100">Titel 1</th>
     <th>Titel 2</th>
     <td>Titel 3</td>
   </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>

Titel 1	Titel 2	Titel 3
Text 1.1	Text 2.1	Text 3.1
Text 1.2	Text 2.2	Text 3.2

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>

Titel 1	Titel 2	Titel 3
Text 1.1	Text 2.1	Text 3.1
Text 1.2	Text 2.2	Text 3.2

• SELFHTML: Breit und hoch mit HTML resp. CSS

h) Beispiel 6: Farben in Tabellen

• SELFHTML: Tabellen - Hintergrundfarben und Hintergrundbilder
  SELFHTML: Beispiel

6 Tabellenüberschrift

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

Beispiel mit einem Titel über der Tabelle

<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>

Assoziationen

Berlin	Hamburg	München
Buletten	Frikadellen	Fleischpflanzerl

• SELFHTML: caption-side (Ausrichtung der Tabellenüberschrift
  SELFHTML: Beispiel

7 Zellen miteinander verbinden

a) Allgemein

• SELFHTML: Zellen verbinden

b) Nebeneinanderliegend Zellen verbinden (colspan)

colspan:
col = column = Kolonne = Spalte
span = Abgrenzung = Spanne

Beispiel

<table border="1">
 <tr><th colspan="2">Die Menschheit besteht aus</th></tr>
 <tr><td>Eseln</td><td>Affen</td></tr>
</table>

Die Menschheit besteht aus
Eseln	Affen

• SELFHTML: Zellen in einer Zeile spaltenweise verbinden
  SELFHTML: Beispiel

c) Übereinanderliegende Zellen verbinden (rowspan)

rowspan:
row = Reihe
span = Abgrenzung = Spanne

Beispiel

<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>

Die Eselheit besteht aus	echten Eseln
	verkappten Eseln
Die Affenheit besteht aus	echten Affen
	verkappten Affen

• SELFHTML: Zellen in einer Spalte zeilenweise verbinden
  SELFHTML: Beispiel

d) Neben- und übereinanderliegende Zellen verbinden (colspan + rowspan)

Beispiel

<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>

Der Mensch ist...		zum einen Teil ein Esel
		zum anderen Teil ein Affe
weder ein richtiger Esel	noch ein richtiger Affe	menschlich, allzumenschlich

• SELFHTML: Zellen spalten- und zeilenweise zugleich verbinden
  SELFHTML: Beispiel

↑