Tabellen 1

Tabellen haben in HTML-Dokumenten zwei wichtige Funktionen

• Formatierung von Daten wie bei der Textverarbeitung
• Gestaltung des Layouts von Webseiten

Tabellen sind aufgebaut aus Reihen <tr> und Zellen <td>

<table border="2">
  <tr>
    <td> Zeile 1 / Zelle 1 </td>
    <td> Zeile 1 / Zelle 2 </td>
    <td> Zeile 1 / Zelle 3 </td>
  </tr>
  <tr>
    <td> Zeile 2 / Zelle 1 </td>
    <td> Zeile 2 / Zelle 2 </td>
    <td> Zeile 2 / Zelle 3 </td>
  </tr>
  <tr>
    <td> Zeile 3 / Zelle 1 </td>
    <td> Zeile 3 / Zelle 2 </td>
    <td> Zeile 3 / Zelle 3 </td>
  </tr>
</table>

Und so sieht's aus. Man kann Tabellen ausrichten , ihre Größe festlegen auch die einzelnen Zellen können mit Hilfe von bestimmten Attributen wie width und height verändert werden.

Manchmal möchte man, daß Zellen über mehrere Zeilen gehen. Dazu dient das Attribut rowspan. Hier der Code für eine Tabelle, bei der eine Zelle über zwei Zeilen geht.

<table border="2">
  <tr>
    <td rowspan="2"> Zeile 1+2 / Zelle 1 </td>
    <td> Zeile 1 / Zelle 2 </td>
    <td> Zeile 1 / Zelle 3 </td>
  </tr>
  <tr>
    <td> Zeile 2 / Zelle 2 </td>
    <td> Zeile 2 / Zelle 3 </td>
  </tr>
  <tr>
    <td> Zeile 3 / Zelle 1 </td>
    <td> Zeile 3 / Zelle 2 </td>
    <td> Zeile 3 / Zelle 3 </td>
  </tr>
</table>

Und so sieht's aus. Wichtig ist, daß die Zeilen, die überspannt werden, eine Zelle weniger haben

Entsprechendes gilt für Zellen, die über mehrere Spalten gehen sollen:

<table border="2">
  <tr>
    <td colspan="2"> Zeile 1 / Zelle 1+2 </td>
    <td> Zeile 1 / Zelle 3 </td>
  </tr>
  <tr>
    <td> Zeile 2 / Zelle 1 </td>
    <td> Zeile 2 / Zelle 2 </td>
    <td> Zeile 2 / Zelle 3 </td>
  </tr>
  <tr>
    <td> Zeile 3 / Zelle 1 </td>
    <td> Zeile 3 / Zelle 2 </td>
    <td> Zeile 3 / Zelle 3 </td>
  </tr>
</table>

Und so sieht's aus. Hier ist wichtig, daß die Reihe, in der Zellen überspannt werden, enstprechend weniger Zellen haben