Erzeugen Sie eine einfache Tabelle im HTML
Eine Tabelle mit dem <tr>-Tag und dem <th>-Element
Damit haben Sie die wichtigsten Dinge kennen gelernt, um selbst Tabellen zu erzeugen. Hier wollen wir es an einem einfachen Beispiel versuchen. Wir erzeugen eine Tabelle, die angibt, welche Farbe Sie erhalten, wenn Sie die drei Primärfarben mischen.
Abbildung zeigt die Tabelle, die wir in dieser Übung erzeugen wollen.
Hier noch ein kurzer Hinweis für Ihre Arbeit mit Tabellen: Da HTML eine Tabelle auf zeilenweiser Basis definiert, kann es manchmal schwierig sein, die Spalten im Auge zu behalten, insbesondere bei sehr komplexen Tabellen. Bevor Sie beginnen, HTML-Code zu schreiben, sollten Sie sich eine Skizze Ihrer Tabelle anlegen, in der Sie festlegen, welche Überschriften verwendet werden und welche Werte in den Zellen enthalten sein sollen. Möglicherweise ist es dabei am einfachsten, ein Textverarbeitungsprogramm mit einem Tabellen-Editor oder eine Tabellenkalkulation zu Hilfe zu nehmen, um ein zufrieden stellendes Layout für Ihre Tabellen zu entwerfen. Wenn das Layout und die Zellenwerte feststehen, schreiben Sie den HTML-Code für diese Tabelle oder konvertieren die erstellte Datei in HTML. Dafür bieten die meisten Standardprogramme inzwischen entsprechende Möglichkeiten an.
Beginnen Sie mit einem einfachen HTML-Framework für die Seite, die eine Tabelle enthält. Wie bei allen HTML-Dateien, können Sie diese Datei in einem Text-Editor Ihrer Wahl erstellen:
<html>
<head>
<title>Colors</title>
</head>
<body>
<table border="1">
...hier koennen Sie noch mehr Zeilen und Zellen einfuegen...
</table>
</body>
</html>
Nun fügen wir Zeilen innerhalb der <table>-Kennungen ein (wo sich oben die Zeile mit " ... hier koennen Sie noch mehr Zeilen und Zellen einfuegen ... " befindet). Die erste Zeile enthält die drei Überschriften oben in der Tabelle. Die Tabellenzeile wird durch </tr>, die einzelnen Zellen werden durch jeweils ein <th>-Tag gekennzeichnet.
<tr>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
Sie können den HTML-Code beliebig formatieren. Der Browser ignoriert die meisten zusätzlichen Leerzeichen und Zeilenschaltungen. Ich verwende gerne diese Formatierung, wobei der Inhalt der einzelnen Zeilen eingerückt ist und die Zellen-Tags auf separaten Zeilen dargestellt werden, sodass ich Zeilen und Spalten auf Anhieb erkennen kann.
Jetzt fügen wir die zweite Zeile ein. Die erste Zelle in der zweiten Zeile ist die Überschrift Red auf der linken Seite der Tabelle, damit also die erste Zelle in dieser Zeile, gefolgt von den Zellen mit den Tabellendaten:
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
Nun fügen wir die beiden restlichen Zeilen in die Tabelle ein. Sie tragen die Überschriften Yellow und Blue. Damit haben Sie bisher die folgende Tabelle erzeugt:
<table border="1">
<tr>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
Schließlich fügen wir noch einen einfachen Titel ein. Das <caption>-Tag folgt direkt nach dem <table>-Tag und kommt unmittelbar vor dem ersten <tr>-Tag:
<table border="1">
<caption>Mixing the Primary Colors</caption>
<tr>
Mit diesem ersten Codekonzept testen Sie Ihre HTML-Datei in Ihrem Browser, der Tabellen unterstützt. Abbildung zeigt, wie das im Safari aussieht.
Hoppla! Was ist mit der obersten Zeile passiert? Die Überschriften sind völlig durcheinander geraten.
Die Antwort lautet natürlich, dass Sie am Anfang der ersten Zeile eine leere Zelle benötigen, um die Überschriften korrekt über den entsprechenden Spalten auszurichten. HTML erledigt nicht alles automatisch für Sie (das ist genau der Fehler, dem Sie am Anfang beim Testen Ihrer Tabellen begegnen werden).
Nun fügen wir eine leere Zelle in die erste Zeile ein (in diesem Fall wird das die Zeile <th><br></th>):
<tr>
<th><br></th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
Ich habe hier <th> verwendet, aber Sie könnten genausogut <td> angeben. Da in der Zelle kein Wert enthalten ist, spielt die Formatierung keine Rolle.
Wenn Sie es jetzt noch einmal versuchen, erhalten Sie ein korrektes Ergebnis, und alle Überschriften sind über den entsprechenden Spalten angeordnet, wie das Originalbeispiel in Abbildung zeigt.
