Tabellen

Tabellen sind das wichtigeste HTML. Eingesetzt werden sie nicht nur um wirklich Tabellen darzustellen, sondern vor allem als Gestaltungselement.

Eine erste Tabelle

1 2 3
4 5 6
Eine Tabelle, bestehend aus zwei Zeilen mit je drei Spalten. 
<table border="1">

<tr> <!-- Zeile 1 -->
  <td>1</td> <!-- Spalte 1 -->
  <td>2</td> <!-- Spalte 2 -->
  <td>3</td> <!-- Spalte 3 -->
</tr>

<tr> <!-- Zeile 2 -->
  <td>4</td> <!-- Spalte 1 -->
  <td>5</td> <!-- Spalte 2 -->
  <td>6</td> <!-- Spalte 3 -->
</tr>

</table>
Die Inhalte der Tabellen mŸssen immer in den 'table datas' - den td-Zellen sein.

Breite, Zusammenfassen von Zellen

width... absolut (Anzahl der Pixel) oder relativ (in %)
colspan=..
rowspan=
1 2 3
4 6
7 8 
<table border="1" width="100%">

<tr> <!-- Zeile 1 -->
  <td>1</td> <!-- Spalte 1 -->
  <td>2</td> <!-- Spalte 2 -->
  <td>3</td> <!-- Spalte 3 -->
</tr>

<tr> <!-- Zeile 2 -->
  <td colspan="2">4</td> <!-- Spalte 1 + 2 -->
  <!-- Zusammengefasst mit Zelle 4 -->
  <td rowspan="2">6</td> <!-- Spalte 3 -->
</tr>

<tr> <!-- Zeile 3 -->
  <td>7</td> <!-- Spalte 1 -->
  <td>8</td> <!-- Spalte 2 -->
  <!-- Zelle 9, rowspan von oben -->
</tr>

</table>

Weitere Parameter

HTML-Guide
Handout

HTML-Guide Download Tabellen

HTML-Guide Download Aufgabenblatt 2
<table> <td>

Tabellen als Frame-Ersatz


<html>
<head>
  <title>Tabellen als Frame-Ersatz</title>
</head>
<body>

<table border="1" width="100%">

<tr> <!-- Nur eine Zeile, links die Navigation, rechts der Inhalt -->

  <td valign="top">Navigation</td> 

  <td valign="top"> <!-- Hier beginnt der Inhalt -->

Hier kommt jetzt der ganz normale Inhalt

...

...

  </td> <!-- Ende vom Inhalt -->
</tr>

</table>

</body>
</html>

Tabellennloses Layout: Tabellen durch CSS ersetzen

Weitere Informationen zu CSS siehe CSS-Linksammlung vom HTML_Guide.