Inhaltsverzeichnis

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

  1. Kopiere die Datei table.html und speichere sie in deinem Laufwerk
  2. Bearbeite die Tabelle und füge dein eigenes Inhalt hinzu
  3. Kopiere die fertige Datei in austausch_alle/Toufexis (vergiss deinen Namen nicht)