☰
✕

HTML-Tabelle: Einfache Tabelle

Supereinfache Tabelle mit table, tr, td

So sieht Sie aus, weiter unten ist der Code:

Stadt Einwohnende Fläche
Berlin, Stadt 3 644 826 891,68 km²
Hamburg, Freie und Hansestadt 1 841 179 755,22 km²
München, Landeshauptstadt 1 471 508 310,7 km2
Köln, Stadt 1 085 664 405,02 km2
Frankfurt am Main, Stadt 753 056 248,31 km2 
<table>
  <tr>
    <th>Stadt</th>
    <th>Einwohnende</th>
    <th>Fläche</th>
  </tr>
  <tr>
    <td>Berlin, Stadt</td>
    <td>3 644 826</td>
    <td>891,68 km²</td>
  </tr>
  <tr>
    <td>Hamburg, Freie und Hansestadt</td>
    <td>1 841 179</td>
    <td>755,22 km²</td>
  </tr>
  <tr>
    <td>München, Landeshauptstadt</td>
    <td>1 471 508</td>
    <td>310,7 km2</td>
  </tr>
  <tr>
    <td>Köln, Stadt</td>
    <td>1 085 664</td>
    <td>405,02 km2</td>
  </tr>
  <tr>
    <td>Frankfurt am Main, Stadt</td>
    <td>753 056</td>
    <td>248,31 km2</td>
  </tr>
</table>

#1 Semantische einfache Tabelle mit table, tr, td, th, thead, tbody

So sieht Sie aus, weiter unten ist der Code:

Stadt Einwohnende Fläche
Berlin, Stadt 3 644 826 891,68 km²
Hamburg, Freie und Hansestadt 1 841 179 755,22 km²
München, Landeshauptstadt 1 471 508 310,7 km2
Köln, Stadt 1 085 664 405,02 km2
Frankfurt am Main, Stadt 753 056 248,31 km2 
<table>
  <thead>
    <tr>
      <th>Stadt</th>
      <th>Einwohnende</th>
      <th>Fläche</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Berlin, Stadt</td>
      <td>3 644 826</td>
      <td>891,68 km²</td>
    </tr>
    <tr>
      <td>Hamburg, Freie und Hansestadt</td>
      <td>1 841 179</td>
      <td>755,22 km²</td>
    </tr>
    <tr>
      <td>München, Landeshauptstadt</td>
      <td>1 471 508</td>
      <td>310,7 km2</td>
    </tr>
    <tr>
      <td>Köln, Stadt</td>
      <td>1 085 664</td>
      <td>405,02 km2</td>
    </tr>
    <tr>
      <td>Frankfurt am Main, Stadt</td>
      <td>753 056</td>
      <td>248,31 km2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Stadt</th>
      <th>Einwohnende</th>
      <th>Fläche</th>
    </tr>
  </tfoot>
</table>

Alle HTML-Elemente einer Tabelle

<table>
    <thead>
        <tr>
            <th>Element</th>
            <th>Wofür ist das Element</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>&lt;table&gt;</code></td>
            <td>Die Tabelle selbst</td>
        </tr>
        <tr>
            <td><code>&lt;caption&gt;</code></td>
            <td>Die Beschriftung für die Tabelle. Wie eine Beschriftung zu einer Abbildung.</td>
        </tr>
        <tr>
            <td><code>&lt;thead&gt;</code></td>
            <td>Der Tabellenkopf</td>
        </tr>
        <tr>
            <td><code>&lt;tbody&gt;</code></td>
            <td>Der Tabellenkörper</td>
        </tr>
        <tr>
            <td><code>&lt;tfoot&gt;</code></td>
            <td>Der Tabellenfußzeile</td>
        </tr>
        <tr>
            <td><code>&lt;tr&gt;</code></td>
            <td>Eine Tabellenreihe</td>
        </tr>
        <tr>
            <td><code>&lt;th&gt;</code></td>
            <td>Eine Tabellenzelle, die eine Kopfzelle ist</td>
        </tr>
        <tr>
            <td><code>&lt;td&gt;</code></td>
            <td>Eine Tabellenzelle, die Daten enthält</td>
        </tr>
        <tr>
            <td><code>&lt;col&gt;</code></td>
            <td>Eine Spalte in einer Tabelle</td>
        </tr>
        <tr>
            <td><code>&lt;colgroup&gt;</code></td>
            <td>Eine Gruppe von Spalten in einer Tabelle</td>
        </tr>
    </tbody>
</table>

Quellen

HTML-Tabelle: … ›