Tabelle - Zeilen und Zellen im HTML

Tabelle - der <tr>-Tag und die <th>-Elemente

Da Sie jetzt schon einige Kenntnisse zum <table>-Tag haben, gehen wir zu den Zeilen und den Zellen über. Innerhalb der <table> ... </table>-Tags definieren Sie den eigentlichen Tabelleninhalt. Tabellen werden in  HTML zeilenweise spezifiziert, und jede Zeilendefinition enthält wiederum weitere Definitionen für die einzelnen Zellen in dieser Zeile. Um also eine Tabelle zu definieren, beginnen Sie bei der obersten Zeile, definieren dort die einzelnen Zellen, definieren eine zweite Zeile und ihre Zellen usw. Die Spalten werden automatisch berechnet, basierend darauf, wie viele Zellen in den einzelnen Zeilen enthalten sind.

Jede Tabellenzeile wird durch das <tr>-Tag (Table Row = Tabellenreihe) gekennzeichnet und endet mit dem entsprechenden </tr>-Tag. Jede Tabellenzeile hat wiederum eine Anzahl von Tabellenzellen, die durch <th> ... </th> (für Table Header = Tabellen-Überschrift) und <td> ... </td> (für Table Data = Tabellendaten, die eigentlichen Tabellenzellen) angezeigt werden. Sie können beliebig viele Zeilen und innerhalb jeder Zeile beliebig viele Zellen definieren. Achten Sie jedoch darauf, dass jede Zeile dieselbe Anzahl Zellen verwendet, sodass die Spalten übereinstimmen.

• <th> ... </th>-Elemente werden für Kopfzellen verwendet. Kopfzellen werden in der Regel anders als Tabellenzellen angezeigt, und zwar in fettgedruckter Schrift. Sie sollten mit dem </th>-Tag geschlossen werden.
• <td> ... </td>-Elemente werden für Datenzellen verwendet. TD steht für Table Data. Das <td>-Tag sollte mit dem </td>-Tag geschlossen werden.

In den frühen Spezifikationen für Tabellen waren die Abschluss-Kennungen </tr>, </th> und </td> für jede Zeile und Zelle erforderlich. Seither ist die Tabellendefinition dahingehend verfeinert worden, dass jedes dieser Abschluss-Tags optional ist. Gleichzeitig erwarten aber viele Browser doch noch diese Kennungen, sodass eine Tabelle auseinanderfallen kann, wenn Sie diese Abschluss-Kennungen nicht eingefügt haben. Bis die Tabellen konsequent quer durch die Browser-Landschaft verwirklicht werden, ist es sicherer, die optionalen Abschluss-Kennungen weiterhin einzusetzen. Da es immer noch korrekt ist diese zu verwenden, gibt es keinen zwingenden Grund diese wegzulassen.

In den Beispieltabellen, die Sie bis jetzt sehen konnten, erscheint die Kopfzelle in der obersten Zeile und wird mit folgendem Code definiert:

<tr>
 <th>Name</th>
 <th>Height</th>
 <th>Weight</th>
 <th>Eye Color</th>
</tr>
<p>
	This is followed by three rows of data cells, which are coded as follows:
</p>
<tr>
 <td>Alison</td>
 <td>5'4"</td>
 <td>140</td>
 <td>Blue</td>
</tr>
<tr>
 <td>Tom</td>
 <td>6'0"</td>
 <td>165</td>
 <td>Blue</td>
</tr>
<tr>
 <td>Susan</td>
 <td>5'1"</td>
 <td>97</td>
 <td>Brown</td>
</tr>

Abbildung zeigt das Ergebnis dieser Tabellen.

Tabelle - Zeilen und Zellen im HTML

Wie Sie sehen, können Sie die Kopfzeilen am obersten Ende ausrichten, indem Sie das <th>-Element innerhalb der ersten Reihe definieren. Ändern wir die Tabelle nun leicht ab. Setzen Sie die Kopzeilen jetzt an den linken oberen Rand. Um dies zu vervollständigen, setzen Sie jedes <th>- in die erste Zelle einer jeden Reihe, und geben Sie anschließend die Daten ein, die zu jeder Kopfzeile gehören. Der neue Code sieht folgendermaßen aus:

<tr>
 <th>Name</th>
 <td>Alison</td>
 <td>Tom</td>
 <td>Susan</td>
</tr>
<tr>
 <th>Height</th>
 <td>5'4"</td>
 <td>6'0"</td>
 <td>5'1"</td>
</tr>
<tr>
 <th>Weight</th>
 <td>140</td>
 <td>165</td>
 <td>97</td>
</tr>
<tr>
 <th>Eye Color</th>
 <td>Blue</td>
 <td>Blue</td>
 <td>Brown</td>
</tr>

Abbildung zeigt das Ergebnis dieser Tabellen.

Tabelle - Zeilen und Zellen im HTML

Leere Zellen

Tabellenkopfzellen und auch Datenzellen können Text, einen HTML-Code, oder beides enthalten. Sie können ebenfalls Links, Listen, Formen und andere Tabellen enthalten. Aber was machen Sie, wenn Sie eine Zelle ohne Inhalt brauchen? Ganz einfach. Definieren Sie eine Zelle mit einem <th>- oder einem <td>-Tag ohne Inhalt.

<table border="1">
<tr>
  <td></td>
  <td>10</td>
  <td>20</td>
</tr>
</table>

Manchmal werden solche Zellen auch so dargestellt, als ob sie gar nicht vorhanden wären.

<table border="1">
<tr>
  <td><br /></td>
  <td>10</td>
  <td>20</td>
</tr>
</table>

Überschriften

Tabellen-Überschriften erklären dem Leser den Inhalt der Tabelle. Sie könnten auch einen normalen Absatz oder eine Überschrift für Ihre Tabelle verwenden, aber es gibt ein <caption>-Tag genau für diesen Zweck. Da das <caption>-Tag Überschriften als solche kennzeichnet, könnten Werkzeuge zur Verarbeitung von  HTML-Dateien sie in eine separate Datei extrahieren, sie automatisch nummerieren oder auf irgendeine andere spezielle Weise behandeln, einfach nur, weil es sich um Überschriften handelt.

Aber was, wenn Sie keine Überschrift wollen? Sie müssen nicht unbedingt eine verwenden. Überschriften sind optional. Wenn Sie einfach nur eine Tabelle ohne Überschrift brauchen, dann lassen Sie die Überschrift einfach weg.

Das <caption>-Tag geht direkt von den Tabellenzeilen in das <table>-Tag ein und enthält den Tabellentitel. Es wird mit dem </caption>-Tag abgeschlossen.

<table>
<caption>Vital Statistics</caption>
<tr>