Tabellen

  1. Tabelle Standard
  2. Tabelle mit verschiedenen Rahmen
  3. Weitere Tabellenangaben
  4. Tabelle mit farbigem Hintergrund
  5. Tabelle mit farbiger Schrift
  6. Umgebender Text
  7. MSIE Tabellenfunktionen

Tabelle Standard

Eine Tabelle, können Sie benützen um Daten tabellarisch anzuzeigen oder um Mehrspaltentext in HTML zu erzeugen. Für Für Mehrspaltentext verwendet man Tabellen ohne Rahmen. Eine Tabelle wird mit folgendem Tag eingeleitet:


<table border>   <!-- dann folgt das Tag für die Tabellenzeile: -->
   <tr>   <!-- nun folgen die Spalten -->
      <td>Daten Zeile 1 Spalte 1</td>
      <td>Daten Zeile 1 Spalte 2</td>
      <td>Daten Zeile 1 Spalte 3</td>
   </tr>   <!-- Ende der Tabellenzeile -->
   <tr>   <!-- Beginn der nächsten Tabellenzeile -->
      <td>Daten Zeile 2 Spalte 1</td>
      <td>Daten Zeile 2 Spalte 2</td>
      <td>Daten Zeile 2 Spalte 3</td>
   </tr>  <!-- Ende der Tabellenzeile -->
</table>   <!-- Ende der Tabelle -->

Anzeigebeispiel

In einer Tabelle können Sie auch eine Kopfzeile festlegen

<table border>   <!-- Beginn der Tabelle -->
   <tr>   <!-- Tabellenzeile -->
      <th>Kopf der Tabelle Zeile 1 Spalte 1</td>
      <th>Kopf der Tabelle Zeile 1 Spalte 2</td>
      <th>Kopf der Tabelle Zeile 1 Spalte 3</td>
   </tr>   <!-- Ende der Tabellenzeile -->
   <tr>   <!-- Beginn der nächsten Tabellenzeile -->
      <td>Daten Zeile 2 Spalte 1</td>
      <td>Daten Zeile 2 Spalte 2</td>
      <td>Daten Zeile 2 Spalte 3</td>
    </tr>   <!-- Ende der Tabellenzeile -->
</table>   <!-- Ende der Tabelle -->

Anzeigebeispiel

Eine blinde Tabelle erzeugen Sie indem Sie einfach die Angabe border im Tabellentag weglassen oder den Rahmen auf 0 setzen.

<table>   <!-- Beginn der Tabelle -->
   <tr>   <!-- Tabellenzeile -->
      <th>Kopf der Tabelle Zeile 1 Spalte 1</td>
      <th>Kopf der Tabelle Zeile 1 Spalte 2</td>
      <th>Kopf der Tabelle Zeile 1 Spalte 3</td>
   </tr>   <!-- Ende der Tabellenzeile -->
   <tr>   <!-- Beginn der nächsten Tabellenzeile -->
      <td>Daten Zeile 2 Spalte 1</td>
      <td>Daten Zeile 2 Spalte 2</td>
      <td>Daten Zeile 2 Spalte 3</td>
   </tr>   <!-- Ende der Tabellenzeile -->
</table>   <!-- Ende der Tabelle -->


Erzeugt dieselbe Tabelle wie folgendes Beispiel

<table border=0>   <!-- Beginn der Tabelle -->
   <tr>   <!-- Tabellenzeile -->
      <th>Kopf der Tabelle Zeile 1 Spalte 1</td>
      <th>Kopf der Tabelle Zeile 1 Spalte 2</td>
      <th>Kopf der Tabelle Zeile 1 Spalte 3</td>
   </tr>   <!-- Ende der Tabellenzeile -->
   <tr>   <!-- Beginn der nächsten Tabellenzeile -->
      <td>Daten Zeile 2 Spalte 1</td>
      <td>Daten Zeile 2 Spalte 2</td>
      <td>Daten Zeile 2 Spalte 3</td>
   </tr>   <!-- Ende der Tabellenzeile -->
</table>   <!-- Ende der Tabelle -->

Anzeigebeispiel


Tip!
Um in einer Tabelle ein leeres Feld zu erzeugen fügen Sie einfach ein erzwungenes Leerzeichein (&#160;) ein.

Zurück zum Anfang

Tabelle mit verschiedenen Rahmen

Um bei einer Tabelle die Dicke des Rahmens festzulegen, geben Sie einfach nach border=(Wert) die gewünschte Rahmendicke in Pixel ein.

<table border=6> Beginn der Tabelle, dicke des Rahmens 6 Pixel
Tabelleninhalt …
</table> Ende der Tabelle

Anzeigebeispiel

In einer Tabelle können Sie auch die Dicke des Inneren Rahmens festlegen verwenden Sie dazu cellspacing=(wert)

<table cellspacing=6> Beginn der Tabelle, dicke des inneren Rahmens 6 Pixel
Tabelleninhalt …
</table> Ende der Tabelle

Anzeigebeispiel

Durch die Angabe cellpadding=(Wert) legen Sie den Randabstand des Zelleninhaltes zum inneren Rahmen fest. Diese Angabe bezieht sich sowohl auf den rechten, linken, oberen und unteren Abstand.

<table cellpadding=10> Beginn der Tabelle, Randabstand zum inneren Rahmen 10 Pixel
Tabelleninhalt …
</table> Ende der Tabelle

Anzeigebeispiel

Zurück zum Anfang

Weitere Tabellenangaben

Tabellenhöhe und Breite festlegen

Mit folgenden Angaben könne Sie für eine Tabelle die Höhe und die Breite bestimmen. Diese Angaben können entweder können entweder entweder in Pixel oder Prozentwerten erfolgen. Die Pixel sind dabei ein absoluter Wert währen die Angabe in Prozent sich auf den Ausgabebereich bezieht.

<table border width=80%> Tabelle mit der Breite von 80% des Anzeigebereiches
Tabelleninhalt …
</table>
<table border height=200> Tabelle mit der Höhe von 200 Pixel
Tabelleninhalt …
</table>

<table border=1 width=80% height=200>
   <tr>
      <th>Daten Zeile 1 Spalte 1</th>
      <th>Daten Zeile 1 Spalte 2</th>
   </tr>
   <tr>
      <td>Daten Zeile 2 Spalte 1</td>
      <td>Daten Zeile 2 Spalte 2</td>
   </tr>
</table>

Anzeigebeispiel

Höhe einer Zeile Festlegen

Um die Höhe einzelner Tabellenzeilen festzulegen, verwenden Sie in den Tags <th> oder <td> die Angabe height=(Wert).

<table border>
   <tr>
      <th height=300>
      Tabelleninhalt …
</table>

<table border=1>
   <tr>
      <th height=50>Daten Zeile 1 Spalte 1 Zeilenhöhe 50 Pixel</th>
      <th>Daten Zeile 1 Spalte 2</th>
   </tr>
   <tr>
      <td height=100>Daten Zeile 2 Spalte 1 Zeilenhöhe 100 Pixel</td>
      <td>Daten Zeile 2 Spalte 1</td>
   </tr>
</table>

Anzeigebeispiel

Breite einer Spalte festlegen

Um die Breite einzelner Tabellenspalten festzulegen, verwenden Sie in den Tags <th> oder <td> die Angabe width=(Wert).

<table border>
   <tr>
      <th width=300>
      Weiterer Tabelleninhalt …
</table>

<table border=1>
   <tr>
      <th width=300>Daten Zeile 1 Spalte 1 Breite 300 Pixel</th>
      <th width=140>Daten Zeile 1 Spalte 2 Breite 140 Pixel</th>
   </tr>
   <tr>
      <td>Daten Zeile 2 Spalte 1</td>
      <td>Daten Zeile 2 Spalte 2</td>
   </tr>
</table>


Anzeigebeispiel

Zeilen als nicht umbrechbar kennzeichnen

Verwenden Sie dazu in einem Zellentag die Angabe nowrap

<table border>
   <tr>
      <td nowrap>
      Weiterer Tabelleninhalt …
</table>

<table border=1>
   <tr>
      <th nowrap>Dies ist eine extralange Zeile, sie dient nur dazu Ihnen zu zeigen wie sich der Zusatz nowrap in einer Tabellenzeile Auswirken kann. Damit Sie sich nun endlich einen neuen 24" Monitor zulegen wurde der ganze Inhalt dieser Zeile so lang gemacht. :-)></th>
   </tr>
   <tr>
      <td>Daten Zeile 2 Spalte 1</td>
   </tr>
</table>

Anzeigebeispiel

Einzelne Zelleninhalte Ausrichten

Verwenden Sie dazu in den Zellentags die folgenden Angaben
für die horizontale Ausrichtung:
<th align=left|center|right>
oder
<td align=left|center|right>     Ausrichtung links|zentriert|rechts

für die vertikale Ausrichtung: <th valign=top|middle|bottom>
oder
<th valign=top|middle|bottom>    Ausrichtung oben|mitte|unten

<table border=1>
   <tr>
      <th height=100 width=140 align=left>align=left</th>
      <th align=right>align=right</th>
      <th valign=top>valign=top</th>
      <th valign=bottom>valign=bottom</th>
      <th>Standard</th>
   </tr>
   <tr>
      <td height=100 align=center>align=center</td>
      <td align=right valign=bottom>align=right valign=bottom</td>
      <td align=center valign=top>align=center valign=top</td>
      <td>Standard</td>
      <td>Standard</td>
   </tr>
</table>

Anzeigebeispiel

Mehrere Zellen miteinander verbinden

Verwenden Sie in den Zellentags folgende Angabe wenn Sie innerhalb einen Zeile mehrere Zellen miteinander verbinden möchten <th colspan=(Wert)> oder <td colspan=(Wert)>. Für den Wert, geben Sie die Anzahl der Zellen ein, die Sie miteinander verbinden Möchten. Achten Sie darauf, das Sie für z.B. zwei miteinander verbundenen Zellen in einer Zeile nur ein Zellentag brauchen!
Zum besseren Verständnis sind die Zellentags die wegzulassen sind in den folgenden Beispielen in hellblau markiert.

<table border>
   <tr>
      <th colspan=2>Diese beiden Zellen sind verbunden</th></tr>
      <th>Diesen Eintrag weglassen!</th>
   <tr>
      <td>Daten Zeile 1 Spalte 3</td>
      <td>Daten Zeile 1 Spalte 3</td>
   </tr>
   <tr>
      <td>Daten Zeile 1 Spalte 3</td>
      <td>Daten Zeile 1 Spalte 3</td>
   </tr>
</table>

Anzeigebeispiel

Verwenden Sie in den Zellentags folgende Angabe wenn Sie innerhalb einen Spalte mehrere Zellen miteinander verbinden möchten <th rowspan=(Wert)> oder <td rowspan=(Wert)>. Für den Wert, geben Sie die Anzahl der Zellen ein, die Sie miteinander verbinden Möchten. Achten Sie darauf, das Sie für z.B. zwei miteinander verbundenen Zellen in einer Spalte nur ein Zellentag brauchen!

<table border=1>
   <tr>
      <th rowspan=3>Diese drei Zellen sind verbunden</th>
      <th>Daten Zeile 1 Spalte 2</td>
   </tr>
   <tr>
      <th>Diesen Eintrag weglassen!</th>
      <td>Daten Zeile 2 Spalte 2</td>
   </tr>
   <tr>
      <th>Diesen Eintrag weglassen!</th>
   <td>Daten Zeile 3 Spalte 2</td>
   </tr>
</table>

Anzeigebeispiel

Um mehrere Zellen in den Zeilen und Spalten miteinander zu verbinden, können Sie die Angabe rowspan und colspan miteinander Kombinieren.

<table border>
<tr>
      <th colspan=2 rowspan=2>Daten Zeile 1+2 Spalte 1+2</td>
      <th>Diesen Eintrag weglassen!</th>
      <th>Daten Zeile 1 Spalte 3</td>
      <th>Daten Zeile 1 Spalte 4</td>
   </tr>
   <tr>
      <th>Diesen Eintrag weglassen!</th>
      <th>Diesen Eintrag weglassen!</th>
      <td>Daten Zeile 2 Spalte 3</td>
      <td>Daten Zeile 2 Spalte 4</td>
   </tr>
   <tr>
      <td>Daten Zeile 3 Spalte 1</td>
      <td>Daten Zeile 3 Spalte 2</td>
      <td>Daten Zeile 3 Spalte 3</td>
      <td>Daten Zeile 3 Spalte 4</td>
   </tr>
</table>

Anzeigebeispiel

Hinweis
Sie können in Tabellen auch Tabellen einfügen! Dies ist nützlich, wenn Sie z.B. Mehrspaltentext mit einer blinden Tabelle erzeugen und in dem Mehrspaltentext eine Tabelle vorkommen soll!
Anzeigebeispiel

Zurück zum Anfang

Tabelle mit farbigem Hintergrund

Gesamter Hintergrund einer Tabelle farbig machen

Verwenden Sie dazu im Tabellen Tag die Angabe bgcolor="(Farbe)" ein. Dabei steht Farbe für einen Farbnamen oder einen hexadezimalen Farbwert.

<table border bgcolor="Farbe">
Tabelleninhalt …
</table>

<table border=1 bgcolor="darkseagreen">
   <tr><th nowrap colspan=3>Unser Angebot</th></tr>
   <tr>
      <th align=left>ArtikelNr</th>
      <th>Bezeichnung</th>
      <th align=right>Preis</th>
   </tr>
   <tr>
      <td>ABC1</td>
      <td>Besen</td>
      <td align=right>10,- DM</td>
   </tr>
   <tr>
      <td>F0815</td>
      <td>Dosenbier 08/15</td>
      <td align=right>5,- DM</td>
   </tr>
</table>

Anzeigebeispiel

Einzelne Zeilen oder Zellen farbig

Um einzelne Zeilen oder Zellen farbig zu gestalten, geben Sie im Zeilentag oder im Zellentag bgcolor="(Farbe)" ein. Dabei steht Farbe für einen Farbnamen oder einen hexadezimalen Farbwert. <table border bgcolor="Farbe">
   <tr bgcolor="Farbe">
      <td bgcolor="Farbe">Daten</td>
   </tr>
</table>

<table border=1>
   <tr><th nowrap colspan=3>Unser Angebot</th></tr>
   <tr bgcolor="#8080FF">
      <th align=left>ArtikelNr</th>
      <th>Bezeichnung</th>
      <th align=right>Preis</th>
   </tr>
   <tr>
      <td bgcolor="#FF8080">ABC1</td>
      <td bgcolor="#FF8040">Besen</td>
      <td align=right bgcolor="#FF80C0">10,- DM</td>
   </tr>
   <tr>
      <td bgcolor="#FF8080">F0815</td>
      <td bgcolor="#FF8040">Dosenbier 08/15</td>
      <td align=right bgcolor="#FF80C0">5,- DM</td>
   </tr>
</table>

Anzeigebeispiel

Zurück zum Anfang

Tabelle mit farbiger Schrift

Um die Farbe der Schrift in einer Tabelle zu ändern, verwenden Sie das Tag für die Schriftfarbe.

<table border=1>
   <tr><th nowrap colspan=3><font color="#FF00FF">Unser Angebot</font></th></tr>
   <tr bgcolor="#8080FF">
      <th align=left>ArtikelNr</th>
      <th>Bezeichnung</th>
      <th align=right>Preis</th>
   </tr>
   <tr>
      <td bgcolor="#FF8080"><font color="#00FF00">ABC1</font></td>
      <td bgcolor="#FF8040"><font color="#80FF00">Besen</font></td>
      <td align=right bgcolor="#FF80C0"><font color="#80FF80">10,- DM</font></td>
   </tr>
   <tr>
      <td bgcolor="#FF8080">F0815</td>
      <td bgcolor="#FF8040">Dosenbier 08/15</td>
      <td align=right bgcolor="#FF80C0">5,- DM</td>
   </tr>
</table>

Anzeigebeispiel

Zurück zum Anfang

Umgebender Text

Tabellenüberschrift -unterschrift

Um eine Tabellenüberschrift -unterschrift zu erzeugen geben Sie nach dem <table border> Tag folgedes ein:

Überschrift
<table border>
   <caption align=top>Überschrift der Tabelle</caption>
      Tabelleninhalt …
</table>

Unterschrift
<table border>
   <caption align=bottom>Unterschrift der Tabelle</caption>
      Tabelleninhalt …
</table>

<table border=1>
   <caption align=top>Unser Angebot</caption>
   <tr>
      <th align=left>ArtikelNr</th>
      <th>Bezeichnung</th>
      <th align=right>Preis</th>
   </tr>
   <tr>
      <td>ABC1</td>
      <td>Besen</td>
      <td align=right>10,- DM</td>
   </tr>
   <tr>
      <td>F0815</td>
      <td>Dosenbier 08/15</td>
      <td align=right>5,- DM</td>
   </tr>
</table>

Anzeigebeispiel

Umfließender Text

Um Text um eine Tabelle herumfließen zu lassen, geben Sie einfach im Tabellen Tag die Angabe align=(Ausrichtung) an.

Text links um die Tabelle herumfließen lassen
<table border align=left>
   Tabelleninhalt …
</table>

Text rechts um die Tabelle herumfließen lassen
<table border align=right>
   Tabelleninhalt …
</table>

Anzeigebeispiel

Textabstand (momentan nur Netscape 3.0)

Um einen horizontalen und vertikalen Abstand zwischen der Tabelle und dem umfließenden Text zu schaffen, verwenden Sie im Tabellen Tag die Angabe hspace=(Wert) vspace=(Wert). Wert steht für die Pixelanzahl.

<table border=1 align=(Ausrichtung) hspace=(Wert) vspace=(Wert)>
   Tabelleninhalt …
</table>

Anzeigebeispiel

Zurück zum Anfang

MSIE Tabellenfunktionen

Die folgenden Tabellenfunktionen werden nur vom MS-Internet Explorer verwendet!

Regeln für Gitternetzlinien

<table border=1 rules=(Wert)>   Geben Sie für Wert einen der folgenden Werte ein.
Wert:

basic Linien zwischen Tabellenkopf, Tabellenkörper und Tabellenfuß nicht zwischen den Tabellenzeilen
none Nur der äußere Tabellenrahmen wird angezeigt
rows Es werden nur der äußere Tabellenrahmen und die Linien zwischen den Zeilen angezeigt
cols Es werden nur der äußere Tabellenrahmen und die Linien zwischen den Spalten angezeigt
all Alle Linien werden angezeigt (verhält sich wie eine Standardtabelle

Anzeigebeispiel

Rahmeneingenschaften

Mit den folgenden Angaben können Sie den Rahmen beeinflussen <table border=1 frame=(Wert)>

Wert:
box Alle Linien werden angezeigt (verhält sich wie eine Standardtabelle)
void Es wird kein Tabellenrahmen angezeigt, Die inneren Gitternetzlienien werden angezeigt
above Es wird am oberen Rand eineLinie angezeigt
below Es wird am unteren Rand eine Linie angezeigt
hsides Es wird am oberen und unteren Rand eine Linie angezeigt
vsides Es wird nur am linken und rechten Rand eine Linie angezeigt
lhs Es wird nur am linken Rand eine Linie angezeigt
rhs Es wird nur am rechten Rand eine Linie angezeigt
Anzeigebeispiel

Rahmenfarbe

Mit der folgenden Angabe, können Sie die Farbe des gesammten Tabellenrahmens einstellen. Die Tabelle wirkt dadurch nicht mehr dreidimensional. <table border bordercolor="(Farbe)"> Geben Sie für Farbe einen Farbnamen oder einen hexadezimalen Farbwert ein.

Anzeigebeispiel

Mit den folgenden Angaben, können Sie den Schattenlinie und die Lichtlinie des Rahmens festlegen. Die Tabelle wirkt dadurch dreidimensional. <table border bordercolordark="(Farbe)" bordercolorlight="(Farbe)"> Geben Sie für Farbe einen Farbnamen oder einen hexadezimalen Farbwert ein.
Anzeigebeispiel

Hintergrundbilder für eine Tabelle

Um für eine Tabelle das Hintergrundbild festzulegen verwenden Sie die folgenden Angaben. <table border background="(Bild)"> Hintergrund gesamte Tabelle

<th background="(Bild)">Daten</th> Hintergrund Zelle
<td background="(Bild)">Daten</td> Hintergrund Zelle
Geben Sie für Bild den Dateinamen der Grafik ein die Sie verwenden wollen.
Anzeigebeispiel
Zurück zum Anfang