Tabellen in HTML - Teil 2
(HTML-Kurs, 7)

Weitere Details der Einflußnahme auf die Darstellung.

5.) Zellen über mehrere Spalten und Zeilen

5.a.) Zelle über mehrere Spalten (Tabelle 2.c.)

Erweiterung von <th> (oder <td>) durch colspan=n
(n= Zahl der Spalten, über die sich die Zelle erstrecken soll).

NRW-Spiele

Favoriten Außenseiter

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 colspan=2>Favoriten</th>
                <th>Außenseiter</th>
           </tr>
           <tr>
                <td><br></td>
                <th>Essen</th>
                <th>Dortmund</th>
                <th>Hilden</th>
           </tr>
... usw.

5.b.) Zelle über mehrere Zeilen (Tabelle 5.a.)

Erweiterung von <td> oder <th> durch rowspan=n
(n= Zahl der Zeilen, über die sich die Zelle erstrecken soll).

NRW-Spiele

Favoriten Außenseiter
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 rowspan=2><br></td>
                <th colspan=2>Favoriten</th>
                <th>Außenseiter</th>
           </tr>
           <tr>
               <! - - Anmerkung: hier entfällt <td><br></td>, da diese Zelle bereits
                       in der ersten Zeile definiert ist -->
                <th>Essen</th>
                <th>Dortmund</th>
                <th>Hilden</th>
           </tr>
... usw.

6.) Tabellen und Zellinhalte ausrichten

Die standardmäßige Anzeige ist Browser-abhängig.

Die explizite Ausrichtung des Zellinhaltes wird nicht von allen Browsern berücksichtigt.

6.a.) Tabelle horizontal ausrichten

Erweiterung von <table> durch align=left/center/right.

6.b.) Zellinhalte horizontal ausrichten (Tabelle 4.a.)

Erweiterung von <td> oder <th> durch align=left/center/right.

NRW-Spiele

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

Quelltext:

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

     <caption>NRW-Spiele</caption>

          <tr>
                <td><br></td>
                <th align=center>Essen</th>
                <th align=center>Dortmund</th>
                <th align=center>Hilden</th>
           </tr>
           <tr>
                <th align=left>Punkte</th>
                <td align=center>7</td>
                <td align=center>12</td>
                <td align=center>1</td>
            </tr>
            <tr>
                 <th align=left>Platz</th>
                 <td align=center>zwei</td>
                 <td align=center>eins</td>
                 <td align=center>drei</td>
             </tr>
             <tr>
                  <th align=left>Preis</th>
                  <td align=center>Silber</td>
                  <td align=center>Gold</td>
                  <td align=center>Bronze</td>
              </tr>
</table>
Anmerkung:
Erweitert man <tr> durch align=left/center/right, so werden dadurch die Inhalte aller Zellen dieser Reihe entsprechend ausgerichtet. Für einzelne Zellen dieser Reihe kann diese Ausrichtung aufgehoben werden, indem ein anderer Wert für das align-Attribut in das entsprechende <th> oder <td> gesetzt wird.

6.c.) Zellinhalte vertikal ausrichten (Tabelle 4.a.)

Erweiterung von <td> oder <th> durch valign=top/middle/bottom/baseline.

Standardmäßig, d.h. ohne das Attribut valign, wird der Zellinhalt vertikal zentriert.

NRW-Spiele

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

Quelltext:

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

     <caption>NRW-Spiele</caption>

          <tr>
                <td><br></td>
                <th align=center valign=middle>Essen</th>
                <th align=center valign=middle>Dortmund</th>
                <th align=center valign=middle>Hilden</th>
           </tr>
           <tr>
                <th align=left valign=bottom>Punkte</th>
                <td align=center valign=bottom>7</td>
                <td align=center valign=bottom>12</td>
                <td align=center valign=bottom>1</td>
            </tr>
            <tr>
                 <th align=left valign=top>Platz</th>
                 <td align=center valign=top>zwei</td>
                 <td align=center valign=top>eins</td>
                 <td align=center valign=top>drei</td>
             </tr>
             <tr>
                  <th align=left valign=middle>Preis</th>
                  <td align=center valign=middle>Silber</td>
                  <td align=center valign=middle>Gold</td>
                  <td align=center valign=middle>Bronze</td>
              </tr>
</table>

7.) Zeilenumbrüche

Im Allgemeinen :-) fügen die Browser Zeilenumbrüche im Text einer Zelle automatisch so ein, wie es die Breite und Höhe der Zelle und der gesamten Tabelle erfordert: ist der Text-Inhalt einer Zelle so umfangreich, daß die Zeile über den rechten Bildrand hinausragen würde, wird ein Zeilenumbruch eingefügt, und die Zelle wird dadurch höher.

Erzwungen werden Umbrüche, wie stets, durch <br> oder <p>.

Erweitert man <table>, <tr>, <td> oder <th> durch nowrap, dann wird der automatische Zeilenumbruch in der entsprechenden Zelle verhindert, auch wenn die Tabelle dann über den Bildschirmrand hinausragt. Ein Umbruch muß dann explizit mit <br> oder <p> erzeugt werden.

8.) Übungsbeispiel

Vorlage ist eine Seite aus dem elektronischen Fahrplan (Sommer 1997) der Deutschen Bahn AG. Die Seite wurde stark gekürzt und vereinfacht.
Keine Gewähr für die Richtigkeit der Fahrplanangaben :-( !

Zuglauf des "RB 6837"

Bahnhof Ankunft Abfahrt Zug/
Richtung
Erfurt Hbf
18:27 RB 6837
Neudietendorf 18:39 18:39
Arnstadt Hbf 18:51 18:55
Plaue (Thür.) 19:03 19:04
Oberhof (Thür.) 19:29 19:29
Meiningen 20:23

Bemerkungen:
K2 nur 2. Kl.
(für die Gesamtstrecke)
FB Fahrradmitnahme begrenzt mögl.
(für die Gesamtstrecke)

9.) Farbiger Tabellenhintergrund

Das Attribut BGCOLOR="RRGGBB" (cf. HTML-Kurs, 5: Hintergrundgraphik und Farben) kann <table>, <tr>, <td> oder <th> ergänzen:


 Essen Dortmund Hilden
Punkte 7 12 1
Platz zwei eins drei
Preis Silber Gold Bronze 
<table border=5>
          <tr BGCOLOR="#FF0000">
                <td><br></td>
                <th>Essen</th>
                <th BGCOLOR="#0000FF">Dortmund</th>
                <th>Hilden</th>
           </tr>

Mit BORDERCOLOR="RRGGBB" kann man <table> ergänzen und damit Rahmen- und Gitternetzfarbe für die ganze Tabelle festlegen.

Ein wirkungsvolles Gestaltungsmittel stellen farbige Querbalken dar. Mindestinhalt einer Zelle: <br>, sonst wird die Farbe des Seitenhintergrundes verwendet.


Überschrift 

<TABLE align=center width="100%">
<TR>
<TD Height=30 BGCOLOR="#7878ff"><br>

<TR>
<TD ALIGN=center VALIGN=MIDDLE>
<FONT SIZE=6 FACE="Arial"><STRONG>Überschrift</STRONG></FONT>
<TR>
<TD HEIGHT=28 BGCOLOR="#7878ff"><br>
</TABLE>

Weiteres Beispiel; weiteres Beispiel.

Damit wären wir aber schon beim nächsten Thema:

HTML-Kurs, 8: Seitengestaltung mit Tabellen

HTML-Kurs

TNL: Publizieren im Internet

Letzte Änderung: 12.07.2004 16:05:44.
Dr. Thomas Hilberer, th@hilberer.de.
http://www.hilberer.de/html/tab2.html