Tabellen in HTML

Einfache Tabelle:

<table>
<tr>
<td>Inhalt</td>
</tr>
</table>

<table>

<table>

Leitet eine Tabelle ein (table = Tabelle)

<tr>

Leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile)

Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert.

<th>

<th> leitet eine Kopfzelle ein

th = table header = Tabellenkopf

<td>

Leitet eine normale Datenzelle (td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Start-Tag notiert.

Tabelle Aufbau

Beispieldatei

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aufbau einer Tabelle</title>
<style>
table, td, th { border: 1px solid black; }
</style>
</head>
<body>
<h1>einfache Tabelle</h1>
<table>
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>München</th>
</tr>
<tr>
<td>Miljöh</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

Aufgabe

Kopiere die Datei table.html und speichere sie in deinem Laufwerk

Bearbeite die Tabelle und füge dein eigenes Inhalt hinzu

Kopiere die fertige Datei in austausch_alle/Toufexis (vergiss deinen Namen nicht)