Tabellen

27.10.2016 07:31 Uhr

Es gibt eine Reihe von Tags, die „zusammenarbeiten“, um komplexere Effekte zu erzielen.

Ein Beispiel dafür bietet die Definition von Tabellen:

  1. Jede Tabelle wird durch <table> … </table> umgrenzt.
  2. Innerhalb jeder Tabelle wird jede Zeile durch <tr> … </tr> begrenzt. (tr= „table row“)
  3. Innerhalb jeder Zeile wird jedes Feld durch <td> … </td> umrahmt. (td = table definition)

Also beispielsweise:

<table> 
<tr><td>1. Zeile, 1. Spalte </td><td>1. Zeile, 2. Spalte</td></tr> 
<tr><td>2. Zeile, 1. Spalte </td><td>2. Zeile, 2. Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

1. Zeile, 1. Spalte 1. Zeile, 2. Spalte
2. Zeile, 1. Spalte 2. Zeile, 2. Spalte

 

Tabellen gewinnen ein wesentlich anderes Aussehen, wenn Sie mit einem Rahmenumgeben werden. Das geschieht durch das Attribut border im table-tag, das als Wert die Dicke des Rahmens in Pixeln erwartet.

Also beispielsweise:

<table border="3"> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Erste Zeile, Erstes Spalte Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte Zweite Zeile, Zweite Spalte

 

Beziehungsweise:

<table border="20"> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Erste Zeile, Erstes Spalte Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte Zweite Zeile, Zweite Spalte

 

Innerhalb von Zeilen können manche Eintragungen, z.B. Überschriften, mehrere Spalten überspannen.
Dies wird duch das colspan – Attribut beim td-Tag vereinbart, das als Wert die Anzahl der zu überspannenden Spalten erwartet.

Also beispielsweise:

<table border="3"> 
<tr><td colspan="2">Eine Überschrift</td></tr> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Eine Überschrift
Erste Zeile, Erstes Spalte Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte Zweite Zeile, Zweite Spalte

 

Innerhalb von Tabelleneinträgen sind die bisher im laufenden Text besprochenen Auszeichnungen voll anwendbar.

Also beispielsweise:

<table border="3"> 
<tr><td colspan="2"><i><center>Eine Überschrift</center></i></td></tr> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Eine Überschrift
Erste Zeile, Erstes Spalte Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte Zweite Zeile, Zweite Spalte

Der Tabellen-Kopf

Oft ist es sinnvoll, den Tabellenkopf (z.B. die erste Zeile) gesondert zu formatieren oder formatiert auszugeben. Dazu gibt es grundsätzliche mehrere Möglichkeiten.

Eine einfache ist:

<table border="2">
<tr><th>Erste Zeile, Erstes Spalte</th><th>Erste Zeile, Zweite Spalte</th></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>

was folgende Darstellung durch den Browser ergibt:

Erste Zeile, Erstes Spalte Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte Zweite Zeile, Zweite Spalte
Schlagwörter: