Für die Erstellung von Tabellen in HTML wird das Element <table> verwendet. Er dient als ein Container für die Elemente, die den Inhalt der Tabelle bestimmen.
Die Tabellenzeilen werden mit gepaarten Tags <tr> (Abk. aus engl. “table row” - Tabellenzeile). Jede Zeile in der Tabelle wird im einzelnen Tag <tr> geschrieben.
Im Tag <tr> werden die Zellen der Tabelle, die mithilfe des Tags <td> (Abk. aus engl. “table data” - Tabellen-Data) hinzugefügt werden, geschrieben. Jede Zelle wird im einzelnen Tag <td> geschrieben. In den Zellen wird der Inhalt der Tabelle (Zahlen, Text usw.) geschrieben.
Der Kopf der Zeile oder der Kolone der Tabelle wird mithilfe des Tags <th> (Abk. aus engl. “table head” - Tabellenkopf) erstellt. Das Tag <th> wird in der ersten Zeile der Tabelle platziert. Im Browser wird es automatisch fett angezeigt.
Syntax
Das Tag <table> wird gepaart verwendet, der Inhalt des Tages wird zwischen den Start- (<table>) und Endtags (</table>) geschrieben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<table>
<tr>
<th>Monat</th>
<th>Datum</th>
</tr>
<tr>
<td>Januar</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Februar</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Beispiel
| Monat | Datum |
|---|---|
| Januar | 10.01.2014 |
| Februar | 10.01.2014 |
Die Grenzen der Tabelle
Wie man aus dem Beispiel sehen kann, stellt der Browser den Rahmen der Tabelle automatisch nicht dar. Den Rahmen kann man in zwei Weisen ergänzen: durch das Attribut border, oder mithilfe der CSS-Stile. Weiter werden wir beide Methoden betrachten.
Das Attribut border stellt einen Rahmen um die Tabelle sowie der Grenze zwischen den Zellen fest. Wenn der Wert des Attributes nicht angegeben ist, stellt der Browser den Rahmen von der Dicke in einem Pixel dar. Automatisch wird der Rahmen verdoppelt dargestellt.
Das sieht so aus:
<table border="1"><!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<table border="1">
<tr>
<th>Monat</th>
<th>Datum</th>
</tr>
<tr>
<td>Januar</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Februar</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Ergebnis
| Monat | Datum |
|---|---|
| Januar | 10.01.2014 |
| Februar | 10.01.2014 |
Die Grenzen der Tabelle kann man auch mithilfe der CSS-Eigenschaft border, die die Dicke und den Stil des Rahmens aufgibt, festlegen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<tr>
<th>Monat</th>
<th>Datum</th>
</tr>
<tr>
<td>Januar</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Februar</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Ergebnis
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Gruppierung der Tabellenelemente
Den Inhalt der Tabelle kann man in die logischen Blöcke gruppieren. Dafür sind in HTML folgende Tags vorgesehen:
- Das Tag <thead> - (Abk. aus engl. “table head” - Tabellenüberschrift) gruppiert eine oder mehrere obere Zeilen in der Tabelle, das heißt schafft "eine Mütze" der Tabelle.
- Das Tag <tbody> - (Abk. aus engl. “table body” - Tabellenbody) gruppiert die zentralen Zeilen in der Tabelle mit dem Hauptinhalt. (In einer Tabelle ist die Nutzung einiger solcher Blöcke erlaubt).
- Das Tag <tfoot> - (Abk. aus engl. “table footer” - Tabellenfuß) gruppiert untere Zeilen der Tabelle. (In einer Tabelle kann man nur ein Tag <tfoot>).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Monat</th>
<th>Ausgegeben</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Betrag</td>
<td>200$</td>
</tr>
</tfoot>
</table>
<tbody>
<tr>
<td>Juni</td>
<td>150$</td>
</tr>
<tr>
<td>Juli</td>
<td>50$</td>
</tr>
</tbody>
</body>
</html>Zusammenführen der Zellen
Fürs Zusammenführen der Zellen in der Tabelle werden die Attribute colspan und rowspan verwendet. Das Attribut colspan stellt die Anzahl von horizontalen Zellen, die zusammengeführt werden müssen, ein. Das Attribut rowspan ist für vertikales Zusammenführen vorgesehen.
Beispiel eines horizontalen Zusammenführens
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Monat und Datum</th>
</tr>
<tr>
<td>Januar</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Februar</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Ergebnis
| Monat und Datum | |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Beispiel eines vertikalen Zusammenführens
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table >
<tr>
<th>Monat</th>
<th>Datum</th>
</tr>
<tr>
<td>Januar</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>Februar</td>
</tr>
</table>
</body>
</html>Ergebnis
| Monat | Datum |
|---|---|
| Januar | 10.01.2014 |
| Februar |
Übe dein Wissen
