2.10.2 Tabelle
en Table
fr Tableau

• 1 Grundlagen
  • a) Bezeichnungen
  • b) Grundlagen-Websites & Workshops
• 2 Tabelle mit Gitternetzlinien (table with border)
  • a) Beispiel 1: Tabellen mit Gitternetzlinien (Rahmen)
  • b) Beispiel 2: Tabellenrahmen Zellen-Innenabstand cellpadding="10"
  • c) Beispiel 3: Tabelkenrahmen Zellen-Aussenabstand cellspacing="8"
  • d) Beispiel 4: Dünner Rahmen cellpadding="10" cellspacing="0"
  • e) Beispiel 5: Dünner roter Rahmen border:1px solid:#f00, Breite="50%"
  • f) Dekorative Tabellenrahmen
• 3 Tabelle ohne Gitternetzlinien (table without border)
  • a) Prinzip
  • b) Beispiel
• 4 Tabelle mit Tiltel in der ersten Spalte
  • a) Prinzip
  • b) Beispiel 1
  • c) Beispiel 2: Titel links, formatiert wie Überschrift 6
• 5 Tabelle mit bestimmten Breiten, Höhen und Farben
  • a) Attribute
  • b) Beispiel 1: Tabelle mit Breite width="70%"
  • c) Beispiel 2: Tabelle mit Farbe, ohne Rand
  • d) Beispiel 3: Tabelle mit Randabstand (cellpadding) und mit Farbe, ohne Rand
  • e) Beispiel 4: Tabelle mit Randabstand, ohne Rand, Zellen mit verschiedener Farbe
  • f) Beispiel 5: Tabelle mit einer bestimmten Höhe und Breite der ersten Spalte
  • g) Beispiel 6: Tabelle mit schwarzem Hintergrund und weisser Farbe
  • h) Beispiel 7: Breite und Höhe mit HTML resp. CSS formatieren
  • i) Beispiel 8: Farben in Tabellen
• 6 Tabellenüberschrift
  • a) Prinzip
  • b) Beispiel: Titel über der Tabelle
• 7 Zellen miteinander verbinden
  • a) Allgemein
  • b) Beispiel 1: Nebeneinanderliegend Zellen verbinden colspan="2"
  • c) Beispiel 2: Übereinanderliegende Zellen verbinden rowspan="2"
  • d) Beipiel 3: Neben- und übereinanderliegende Zellen verbinden (colspan + rowspan)

-

⇧ 1 Grundlagen

• a) Bezeichnungen
• b) Grundlagen-Websites & Workshops

-

↑ a) Bezeichnungen

• table (Tabelle)

• tr = table row = Tabellen Zeile

• th = table head = Tabellen-Titel

• td = table data = Tabellen Daten

-

↑ b) Grundlagen-Websites & Workshops

• SELFHTML de Aufbau einer Tabelle

• HTML-Seminar de HTML Tabellen - Grundlagen

• Bachmann (via Wayback)
  de Mit Tabellen ist (fast) alles möglich
  de Dekorative Tabellenrahmen

• Bjellis Webwelt de Aufbau einer Tabelle mit Gitternetzlinien

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

• W3C Recommendation - CSS2.1 Specification en Tables

• W3Schools en CSS-Reference
  W3Schools en CSS-Reference: Font
  W3Schools en CSS-Reference: Text
  W3Schools en CSS-Reference: Table
  

-

⇧ 2 Tabelle mit Gitternetzlinien (table with border)

• a) Beispiel 1: Tabellen mit Gitternetzlinien (Rahmen)
• b) Beispiel 2: Tabellenrahmen Zellen-Innenabstand cellpadding="10"
• c) Beispiel 3: Tabellenrahmen Zellen-Aussenabstand cellspacing="8"
• d) Beispiel 4: Dünner Rahmen cellpadding="10" cellspacing="0"
• e) Beispiel 5: Dünner roter Rahmen border:1px solid:#f00, Breite="50%"
• f) Dekorative Tabellenrahmen

-

↑ a) Beispiel 1: Tabellen mit Gitternetzlinien (Rahmen)

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

-

↑ b) Beispiel 2: Tabellenrahmen Zellen-Innenabstand 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

-

↑ c) Beispiel 3: Tabellenrahmen Zellen-Aussenabstand 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

-

↑ d) Beispiel 4: Dünner Rahmen 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

-

↑ e) Beispiel 5: Dünner roter Rahmen border:1px solid:#f00, Breite="50%"

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

• CSS 4 You de Dünne Tabellenrahmen

-

↑ f) Dekorative Tabellenrahmen

Beispiel

• Bachmann (via Wayback)
  de Mit Tabellen ist (fast) alles möglich
  de Dekorative Tabellenrahmen

-

⇧ 3 Tabelle ohne Gitternetzlinien (table without border)

• a) Prinzip
• b) Beispiel

-

↑ a) Prinzip

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

-

↑ b) Beispiel

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

-

⇧ 4 Tabelle mit Tiltel in der ersten Spalte

• a) Prinzip
• b) Beispiel 1
• c) Beispiel 2: Titel links, formatiert wie Überschrift 6

-

↑ a) Prinzip

"th" in der ersten Spalte anstatt erster Zeile

-

↑ b) Beispiel 1

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

-

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

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.

-

⇧ 5 Tabelle mit bestimmten Breiten, Höhen und Farben

• a) Attribute
• b) Beispiel 1: Tabelle mit Breite width="70%"
• c) Beispiel 2: Tabelle mit Farbe, ohne Rand
• d) Beispiel 3: Tabelle mit Randabstand (cellpadding) und mit Farbe, ohne Rand
• e) Beispiel 4: Tabelle mit Randabstand, ohne Rand, Zellen mit verschiedener Farbe
• f) Beispiel 5: Tabelle mit einer bestimmten Höhe und Breite der ersten Spalte
• g) Beispiel 6: Tabelle mit schwarzem Hintergrund und weisser Farbe
• h) Beispiel 7: Breite und Höhe mit HTML resp. CSS formatieren
• i) Beispiel 8: Farben in Tabellen

-

↑ 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 Breite width="70%"

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

-

↑ c) Beispiel 2: Tabelle mit Farbe, ohne Rand

• 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

-

↑ d) Beispiel 3: 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)
  

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

-

↑ e) Beispiel 4: Tabelle mit Randabstand, ohne Rand, Zellen mit verschiedener Farbe

• 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

-

↑ f) Beispiel 5: 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

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

• HTLM-Seminar: Grunddesign

-

↑ g) Beispiel 6: Tabelle mit schwarzem Hintergrund und weisser Farbe

• 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

-

↑ h) Beispiel 7: Breite und Höhe mit HTML resp. CSS formatieren

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

• SELFHTML de Breit und hoch mit HTML resp. CSS

-

↑ i) Beispiel 8: Farben in Tabellen

• SELFHTML de Tabellen - Hintergrundfarben und Hintergrundbilder
  SELFHTML de Beispiel

-

⇧ 6 Tabellenüberschrift

• a) Prinzip
• b) Beispiel: Titel über der Tabelle

-

↑ a) Prinzip

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

-

↑ b) Beispiel: Titel über 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

Assoziationen

Berlin	Hamburg	München
Buletten	Frikadellen	Fleischpflanzerl

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

-

⇧ 7 Zellen miteinander verbinden

• a) Allgemein
• b) Beispiel 1: Nebeneinanderliegend Zellen verbinden colspan="2"
• c) Beispiel 2: Übereinanderliegende Zellen verbinden rowspan="2"
• d) Beipiel 3: Neben- und übereinanderliegende Zellen verbinden (colspan + rowspan)

-

↑ a) Allgemein

• SELFHTML de Zellen verbinden

-

-

↑ b) Beispiel 1: Nebeneinanderliegend Zellen verbinden 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

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

-

↑ c) Beispiel 2: Übereinanderliegende Zellen verbinden 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

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

-

↑ d) Beipiel 3: Neben- und übereinanderliegende Zellen verbinden (colspan + rowspan)

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

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

-

↑ e) Beispiel 4: Zellen colspan="3" und rowspan="2"

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

↑