Tabellen in HTML definieren
Eine Tabelle in HTML ist nichts anderes als ein zweidimensionaler Raster. Tabellen bestehen aus einzelne Daten und Metadaten (stehen in der Regel in Überschriftzellen). Metadaten (Kategorien) beschreiben die ihnen zugeordneten Daten.
Die Daten in den Datenzellen sind im eigentlichen Sinn für sich genommen sinnfrei, sie können nur sinnvoll interpretiert werden in Zusammenhang mit Metadaten in den Überschriftzellen.
Wie ist eine Tablle strukturiert
- Ein HTML-Tabelle wird definiert mit <table> Start-Tag und einem</table> End-Tag.
- Jede Tabellen-Zeile wird definiert mit <tr> Start-Tag und einem </tr> End-Tag.
- Jede Tabellen-Kopfzelle wird definiert mit <th> Start-Tag und einem </th> End-Tag.
- Jede Tabellen-Datenzelle wird definiert mit <td> Start-Tag und einem </td> End-Tag.
- Verwende das HTML <caption> Element zum definieren einer Tabellen Überschrift.
- Verwende das rowspan Attribut zum verbinden von Reihen.
- Verwende das colspan Attribut zum verbinden von Spalten.
- Das Aussehen einer Tabelle kann mit CSS noch gestylt werden.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| <style> |
| tr , td , th { |
| border: 1px solid black; |
| } |
| table { |
| border-collapse: collapse; |
| margin: 0 auto; |
| } |
| </style> |
| </head> |
| <body> |
| <h2 style="color:black;text-align:center">HTML Tabelle ohne CSS (nur Border)</h2> |
| <table style="width:80%"> |
| <caption style="color: dodgerblue; margin-bottom:0.5rem;">Personen und ihr Alter</caption> |
| <tr> |
| <th colspan="2">Vorname und Nachname</th> |
| <th>Alter</th> |
| </tr> |
| <tr> |
| <td>Jill</td> |
| <td>Smith</td> |
| <td>50</td> |
| </tr> |
| <tr> |
| <td>Eve</td> |
| <td>Jackson</td> |
| <td>94</td> |
| </tr> |
| </table> |
| </body> |
| </html> |
HTML Tabelle ohne CSS (nur Border)
| Vorname und Nachname | Alter | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
