Wenn die Aufzählung mit ihren Möglichkeiten zur Unter-Aufzählung irgendwann nicht mehr ausreicht um die benötigte Menge an Daten übersichtlich darzustellen, greifen wir auf die Tabelle zurück.
HTML bietet das nötige Werkzeug um Tabellen beliebiger Größe so anzuzeigen, wie Sie es gerade wollen. Das Grundgerüst einer Tabelle sieht in etwa so aus:
<table>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<tr>
<td>2. Zeile, 1. Spalte</td>
<td>2. Zeile, 2. Spalte</td>
<td>2. Zeile, 3. Spalte</td>
</tr>
</table>
Die Tabelle selbst wird durch <table> und </table> begrenzt. Die Tabelle ist dann zeilenweise gegliedert durch <tr> und </tr>. Innerhalb jeder Zeile befinden sich dann die einzelnen Spalten, erzeugt mit <td> und </td>.
Je nach Browser (IE, Firefox, Chrome, …) kann es sich unterscheiden, ob die Tabelle standardmäßig mit oder ohne sichtbaren Rahmen angezeigt wird. Um hier ein fixes Verhalten und damit browserübergreifend gleiches Design zu erzwingen, wird die Verwendung des border-attributs im <table> Tag empfohlen.
<table border=„1„>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<tr>
<td>2. Zeile, 1. Spalte</td>
<td>2. Zeile, 2. Spalte</td>
<td>2. Zeile, 3. Spalte</td>
</tr>
</table>
Wird einen Tabellen-Rahmen erzeugen.
<table border=„0„>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<tr>
<td>2. Zeile, 1. Spalte</td>
<td>2. Zeile, 2. Spalte</td>
<td>2. Zeile, 3. Spalte</td>
</tr>
</table>
Wird den Rahmen entfernen.
Durch Verwendung von Attributen können Sie auch das Verhalten der einzelnen Spalten und Zeilen beeinflussen:
<table border=“1″>
<tr>
<td colspan=“2″>Zwei Spalten breit</td>
<td>Eine Spalte breit</td>
<td>Eine Spalte breit</td>
</tr>
<tr>
<td>Eine Spalte breit</td>
<td>Eine Spalte breit</td>
<td>Eine Spalte breit</td>
</tr>
<tr>
<td colspan=“3″>Drei Spalten breit</td>
</tr>
</table>
Das Attribut „Colspan“ bestimmt also über wie viele Spalten sich ein Inhalt erstreckt.
Wie sieht es mit Inhalten aus, die in der selben Spalte, aber über mehrere Reihen hinweg, stehen? „Rowspan“ ist das Zauberwort.
<table border=“1″>
<tr>
<td rowspan=“3″>Eine Spalte breit, aber 3 Reihen hoch</td>
<td>Eine Spalte breit</td>
<td>Eine Spalte breit</td>
</tr>
<tr>
<td>Eine Spalte breit</td>
<td>Eine Spalte breit</td>
</tr>
<tr>
<td>Eine Spalte breit</td>
<td>Eine Spalte breit</td>
</tr>
</table>