Tabellen

Tabellen können in HTML mit dem „table“-Element erstellt werden. Die einzelnen Zeilen werden dann mit dem „tr“-Element definiert. Das „tr“ steht für „table row“, d. h. auf dt. Tabellenzeile. Innerhalb der „tr“-Elemente werden dann die einzelnen Spalten mit dem „td“-Element gebildet. Das „td“ steht für „table data“, d. h. auf dt. Tabellendaten.

<table>

   <tr><td>Feld 1, Zeile 1</td><td>Feld 2, Zeile 1</td></tr>

   <tr><td>Feld 1, Zeile 2</td><td>Feld 2, Zeile 2</td></tr>

</table>

Ergebnis:

Mit dem „th“-Element können Überschriften innerhalb der Tabelle erstellt werden. Das „th“ steht für „table header“, d. h. auf dt. Tabellenkopf. Diese können als Spaltenüberschriften innerhalb eines „tr“-Elements oder als Zeilenüberschriften jeweils als erstes Element innerhalb eines „tr“-Elements vor den „td“-Elementen definiert werden:

<table>

   <tr><th>Überschrift Spalte 1</th><th>Überschrift Spalte 2</th></tr>

   <tr><td>Feld 1, Zeile 1</td><td>Feld 2, Zeile 1</td></tr>

   <tr><td>Feld 1, Zeile 2</td><td>Feld 2, Zeile 2</td></tr>

</table>

Ergebnis:

<table>

   <tr><th>Überschrift Zeile 1</th><td>Feld 1, Zeile 1</td><td>Feld 2, Zeile 1</td></tr>

   <tr><th>Überschrift Zeile 2</th><td>Feld 1, Zeile 2</td><td>Feld 2, Zeile 2</td></tr>

</table>

Ergebnis:

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Mit dem „border“-Attribut kann eine Umrandung für die Tabelle und Tabellenelemente erstellt werden. Mit dem Wert „1“ wird eine Umrandung für die ganze Tabelle erstellt. Wird ein höherer Wert verwendet, wird ein entsprechend dickerer Rahmen um die Tabelle gelegt, die inneren Elemente behalten aber die Standarddicke.

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Mit dem „caption“-Element können Überschriften für Tabellen erstellt werden. Das „caption“-Element wird dabei innerhalb des „table“-Elements nach dem Start-Tag platziert. Die Überschrift wird zentriert und ansonsten unformatiert direkt über der Tabelle dargestellt. Soll diese z. B. „fett“ dargestellt werden, muss zusätzlich das „b“-Element verwendet werden.

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Erstelle als Abschlussübung für dieses Kapitel eine Seite mit folgender Tabelle:

Nachdem du die Seite erstellt hast, kannst du dir zur Kontrolle die Lösung mit folgendem Link herunterladen:

https://wiki.selfhtml.org/wiki/Referenz:HTML/table

https://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle

http://www.w3schools.com/tags/tag_table.asp

http://www.w3schools.com/tags/tag_tr.asp

http://www.w3schools.com/tags/tag_td.asp

http://www.w3schools.com/tags/tag_th.asp