Eine einfache Tabelle

Eine HTML Tabelle wird mit dem <table>-Tag erzeugt.

Eine Zeile wird mit dem <tr>-Tag bestimmt, <th> gibt Überschriften an. Zellen werden mit <td> bestimmt.

<table>
  <tr>
    <th>Vorname</th>
    <th>Nachname</th> 
    <th>Alter</th>
  </tr>
  <tr>
    <td>Hans</td>
    <td>Schmidt</td> 
    <td>23</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Ziegel</td> 
    <td>32</td>
  </tr>
</table>

Zellen verbinden

Über mehrere Spalten

Mit dem colspan-Attribut lassen sich Zellen über mehrere Spalten horizontal verbinden.

<table>
  <tr>
    <th>Frucht</th>
    <th colspan="2">Sorten</th>
  </tr>
  <tr>
    <td>Apfel</td>
    <td>Braeburn</td>
    <td>Golden Delicious</td>
  </tr>
</table>

Über mehrere Zeilen

Mit dem rowspan-Attribut lassen sich Zellen über mehrere Spalten vertikal verbinden.

<table>
  <tr>
    <th>Familie:</th>
    <td>Buchengewächse</td>
    <td>Birkengewächse</td>
  </tr>
  <tr>
    <th rowspan="2">Arten:</th>
    <td>Buchen</td>
    <td>Birken</td>
  </tr>
  <tr>
    <td>Eichen</td>
    <td>Erlen</td>
  </tr>
</table>