Tabellen in HTML - Teil 1
(HTML-Kurs, 6)

Grundbegriffe

<table>...</table> Tabelle
<tr>...</tr> Zeile einer Tabelle
<td>...</td> "normale" Tabellenzelle
<th>...</th> Überschriften-Zelle
table row (tr)
Zeile (cf. Reihe im Theater)
table data (td)
"normale" Zelle
table header (th)
Überschriften-Zelle
column
Spalte (Säule)
"Die Tabelle hat so viele Zeilen, wie es <TR>-Elemente gibt, und die Spaltenzahl ergibt sich aus der maximalen Anzahl von <TD>- bzw. <TH>-Elementen in einer Zeile."
(Ramm, S. 180)
M.a.W.: Die Zahl der Zeilen wie der Spalten wird nicht explizit festgelegt.

1.) Einfache Tabellen

1.a.) Einzeilige Tabelle mit drei Zellen (= 3 Spalten)

7 12 1

Quelltext: 
<table border>
          <tr>
                <td>7</td>
                <td>12</td>
                <td>1</td>
          </tr>
</table>
Der Inhalt der Zellen läßt sich wie anderer Text markieren, z.B. als "wichtig" (<STRONG>), Überschrift (<H1-6>) oder Link. Die Rahmenbreite in Pixel kann hinzugefügt werden, z.B. <table border=5>.

1.b.) Die gleiche Tabelle mit Spaltenüberschriften

Eine Tabellenzeile mit drei Zellen (=Spalten), je eine Überschrift pro Spalte (also insgesamt zwei Zeilen).

Essen Dortmund Hilden
7 12 1

Quelltext: 

<table border>
            <tr>
                 <th>Essen</th>
                 <th>Dortmund</th>
                 <th>Hilden</th>
            </tr>
            <tr>
                <td>7</td>
                <td>12</td>
                <td>1</td>
            </tr>
</table>

1.c.) Tabelle mit drei Zeilen und einer Spalte

Zeile 1
Zeile 2
Zeile 3

Quelltext: 
<table border>
            <tr><td>Zeile 1</td></tr>
            <tr><td>Zeile 2</td></tr>
            <tr><td>Zeile 3</td></tr>
</table>

1.d.) Die gleiche Tabelle, mit einer Überschrift pro Spalte

Drei Tabellenzeilen mit je einer Zelle (=Spalten), je eine Überschrift pro Zeile (also insgesamt zwei Spalten).

Essen 7
Dortmund 12
Hilden 1

Quelltext: 

<table border>
            <tr>
                 <th>Essen</th>
                 <td>7</td>
             </tr>
             <tr>
                 <th>Dortmund</th>
                 <td>12</td>
              </tr>
              <tr>
                 <th>Hilden</th>
                 <td>1</td>
              </tr>
</table>
Anmerkung: die abschließenden </tr>, </th> und </td> können auch weggelassen werden - das ist zwar nicht ganz korrekt, ergibt aber bei weblint keine Fehlermeldung.

2.) Tabellen mit Zeilen-, Spalten- und Gesamt-Überschriften

2.a.) Tabelle mit Zeilen- und Spaltenüberschriften

Drei "normale" Zeilen und eine Überschriften-Zeile (also insgesamt 4 Zeilen) und drei Spalten und eine Überschrifts-Spalte (also insgesamt 4 Spalten).


Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext: 
<table border>
          <tr>
                <td><br></td>
                <th>Essen</th>
                <th>Dortmund</th>
                <th>Hilden</th>
           </tr>
           <tr>
                <th>Punkte</th>
                <td>7</td>
                <td>12</td>
                <td>1</td>
            </tr>
            <tr>
                 <th>Platz</th>
                 <td>zwei</td>
                 <td>eins</td>
                 <td>drei</td>
             </tr>
             <tr>
                  <th>Preis</th>
                  <td>Silber</td>
                  <td>Gold</td>
                  <td>Bronze</td>
              </tr>
</table>

2.b.) Die gleiche Tabelle (2.a.) mit Gesamtüberschrift

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext: 

<table border=5>

     <caption>NRW-Spiele</caption>

          <tr>
                <td><br></td>
                <th>Essen</th>
                <th>Dortmund</th>
                <th>Hilden</th>
           </tr>
... usw.

2.c.) Die gleiche Tabelle (2.a.) mit Gesamtüberschrift unterhalb der Tabelle

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext: 
<table border=5>

     <caption align=bottom>NRW-Spiele</caption>

          <tr>
                <td><br></td>
                <th>Essen</th>
                <th>Dortmund</th>
                <th>Hilden</th>
           </tr>
... usw.

3.) Abstand zwischen den Zellen und Breite der Zellen verändern

3.a.) Abstand zwischen den Zellen ändern: cellspacing (Tabelle 2.c.)

Dabei werden der Rand und die Linien zwischen den Zellen verbreitert oder verschmälert; die Größe der einzelnen Zellen ändert sich nicht.

In das beginnende <table>-Tag wird das Attribut cellspacing=n eingefügt (n=Abstand zwischen den Zellen in Pixel; Standardwert=2 - d.h. das Attribut ist nur dann erforderlich, wenn n nicht = 2 sein soll).

Also: das Attribut cellspacing legt den Abstand zwischen benachbarten Zellen und zwischen Tabellenrahmen und angrenzenden Zellen fest (engl. spacing - Abstand).

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext:

Ersetze <table border=1> durch <table border=1 cellspacing=20>

Hinweis:

Probieren Sie es auch einmal mit cellspacing=0, das sieht dann z.B. so aus:

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

3.b.) Größe der Zellen ändern: cellpadding (Tabelle 2.c.)

Dabei ändert sich der Mindest-Abstand zwischen Inhalt und Rand der einzelnen Zellen.

In das beginnende <table>-Tag wird das Attribut cellpadding=n eingefügt (n=Abstand zwischen Zellinhalt und -rand in Pixel; Standardwert=1 - d.h. das Attribut ist nur dann erforderlich, wenn n nicht = 1 sein soll).

Also: das Attribut cellpadding legt den Abstand zwischen Inhalt und Rahmen im Innern der einzelnen Zellen fest (engl. padding - Polsterung, Füllwerk).

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext:

Ersetze <table border=5> durch <table border=1 cellpadding=20>.

3.c.) CELLSPACING und CELLPADDING sind kombinierbar.

4.) Breite und Höhe ändern

4.a.) Breite und Höhe der gesamten Tabelle ändern (Tabelle 2.c.)

In das beginnende <table>-Tag werden die Attribute width="n" (Tabellenbreite) und/oder height="n" (Tabellenhöhe) eingefügt
(n= Maß für Breite bzw. Höhe in Pixel oder prozentual, bezogen auf das Browser-Fenster).

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext:

Ersetze <table border=5> durch <table border=5 width="100%" height="250">.

Anmerkung:

Eine vollständige Kontrolle hat man nicht, der Browser berücksichtigt diese Attribute lediglich als Mindestangaben. Sinnvoll ist es, einen prozentualen Wert für die Breite anzugeben.

4.b.) Breite und Höhe einzelner Zellen ändern (Tabelle 2.c.)

In das beginnende Tag (<td> oder <th>) werden die Attribute width="n" (Zellenbreite) und/oder height="n" (Zellenhöhe) eingefügt
(n= Maß für Breite bzw. Höhe in Pixel oder prozentual, bezogen auf die Größe der gesamten Tabelle).

Dabei führt die Verbreiterung einer einzelnen Zelle zur Verbreiterung der ganzen Spalte (cellpadding hingegen verbreitert alle Spalten und Zeilen einer Tabelle).
Wird die Höhe einer Zelle vergrößert, vergrößern sich auch die Höhen der anderen Zellen dieser Reihe.
Das Attribut muß also nur einmal pro Spalte und Zeile gesetzt werden.

NRW-Spiele

Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze

Quelltext: 

<table border=5>

     <caption>NRW-Spiele</caption>

          <tr>
                <td><br></td>
                <th>Essen</th>
                <th width="150">Dortmund</th>
                <th>Hilden</th>
           </tr>
           <tr>
                <th>Punkte</th>
                <td>7</td>
                <td>12</td>
                <td>1</td>
            </tr>
            <tr>
                 <th>Platz</th>
                 <td>zwei</td>
                 <td>eins</td>
                 <td>drei</td>
             </tr>
             <tr>
                  <th>Preis</th>
                  <td>Silber</td>
                  <td height="50">Gold</td>
                  <td>Bronze</td>
              </tr>
</table>

Anmerkung:

Falls sich Angaben nach 4.a. und b. widersprechen, richten sich die Browser meist nach den Angaben, die für die gesamte Tabelle festgelegt sind (4.a.).
Beispiel: td width="100" kommt viermal vor, gleichzeitig ist definiert table width="300".

HTML-Kurs, 7: Tabellen, Teil 2

HTML-Kurs

TNL: Publizieren im Internet

Letzte Änderung: 06.04.2002 13:43:53.
Dr. Thomas Hilberer, th@hilberer.de.
http://www.hilberer.de/html/tab1.html