w3docs logo

HTML-Tabellen

Für die Erstellung von Tabellen in HTML wird das Element <table> verwendet. Er dient als ein Container für die Elemente, die den Inhalt der Tabelle bestimmen.

Die Tabellenzeilen werden mit gepaarten Tags <tr> (Abk. aus engl. “table row” - Tabellenzeile). Jede Zeile in der Tabelle wird im einzelnen Tag <tr> geschrieben.

Im Tag <tr> werden die Zellen der Tabelle, die mithilfe des Tags <td> (Abk. aus engl. “table data” - Tabellen-Data) hinzugefügt werden, geschrieben. Jede Zelle wird im einzelnen Tag <td> geschrieben. In den Zellen wird der Inhalt der Tabelle (Zahlen, Text usw.) geschrieben.

Der Kopf der Zeile oder der Kolone der Tabelle wird mithilfe des Tags <th> (Abk. aus engl. “table head” - Tabellenkopf) erstellt. Das Tag <th> wird in der ersten Zeile der Tabelle platziert. Im Browser wird es automatisch fett angezeigt.

Syntax

Das Tag <table> wird gepaart verwendet, der Inhalt des Tages wird zwischen den Start- (<table>) und Endtags (</table>) geschrieben.

Das Tag <th> ist kein notwendiges Element der Tabelle, aber wir empfehlen Ihnen, es in die Tabelle einzuschließen. Es hilft Ihnen, den Inhalt besser zu strukturieren sowie es hilft den Suchmaschinen, die Tabellen besser zu indexieren.

Beispiel

<!DOCTYPE html>
<html>
<head>
    <title>Der Titel des Dokuments</title>
</head>
<body>
  <table> 
    <tr>
      <th>Monat</th>
      <th>Datum</th>
    </tr>
    <tr>
      <td>Januar</td>
      <td>10.01.2014</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>10.01.2014</td>
    </tr>
  </table>
</body>
</html>

Beispiel

Monat Datum
Januar 10.01.2014
Februar 10.01.2014

Die Grenzen der Tabelle

Wie man aus dem Beispiel sehen kann, stellt der Browser den Rahmen der Tabelle automatisch nicht dar. Den Rahmen kann man in zwei Weisen ergänzen: durch das Attribut border, oder mithilfe der CSS-Stile. Weiter werden wir beide Methoden betrachten.

Das Attribut border stellt einen Rahmen um die Tabelle sowie der Grenze zwischen den Zellen fest. Wenn der Wert des Attributes nicht angegeben ist, stellt der Browser den Rahmen von der Dicke in einem Pixel dar. Automatisch wird der Rahmen verdoppelt dargestellt.

Das sieht so aus: 

<table border="1">
<!DOCTYPE html>
<html>
<head>
    <title>Der Titel des Dokuments</title>
</head>
<body>
  <table border="1"> 
    <tr>
      <th>Monat</th>
      <th>Datum</th>
    </tr>
    <tr>
      <td>Januar</td>
      <td>10.01.2014</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>10.01.2014</td>
    </tr>
  </table>
</body>
</html>

Ergebnis

Monat Datum
Januar 10.01.2014
Februar 10.01.2014

Die Grenzen der Tabelle kann man auch mithilfe der CSS-Eigenschaft border, die die Dicke und den Stil des Rahmens aufgibt, festlegen.

Beispiel

<!DOCTYPE html>
<html>
<head>
    <title>Der Titel des Dokuments</title>
    <style>
        table,th,td{border:1px solid #cccccc}
    </style>
</head>
<body>
  <table> 
    <tr>
      <th>Monat</th>
      <th>Datum</th>
    </tr>
    <tr>
      <td>Januar</td>
      <td>10.01.2014</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>10.01.2014</td>
    </tr>
  </table>
</body>
</html>

Ergebnis

Month Date
January 10.01.2014
February 10.01.2014

Gruppierung der Tabellenelemente

Den Inhalt der Tabelle kann man in die logischen Blöcke gruppieren. Dafür sind in HTML folgende Tags vorgesehen:

  • Das Tag <thead> - (Abk. aus engl. “table head” - Tabellenüberschrift) gruppiert eine oder mehrere obere Zeilen in der Tabelle, das heißt schafft "eine Mütze" der Tabelle.
  • Das Tag <tbody> - (Abk. aus engl. “table body” - Tabellenbody) gruppiert die zentralen Zeilen in der Tabelle mit dem Hauptinhalt. (In einer Tabelle ist die Nutzung einiger solcher Blöcke erlaubt).
  • Das Tag <tfoot> - (Abk. aus engl. “table footer” - Tabellenfuß) gruppiert untere Zeilen der Tabelle. (In einer Tabelle kann man nur ein Tag <tfoot>).
Im Code wird das Tag <tfoot> vor dem Tag <tbody> hingesetzt. Es wird so gemacht, weil der Browser den unteren Teil der Tabelle darstellen muss, bis er alle (potenziell zahlreichen) Daten, die das Tag <tbody> enthalten kann, bekommt.

Beispiel

<!DOCTYPE html>
<html>
<head>
    <title>Der Titel des Dokuments</title>
    <style>
        table,th,td{border:1px solid #cccccc}
    </style>
</head>
<body>
   <table>
     <thead>
       <tr>
         <th>Monat</th>
         <th>Ausgegeben</th>
       </tr>
      </thead>
     <tfoot>
       <tr>
        <td>Betrag</td>
        <td>200$</td>
       </tr>
     </tfoot>
   </table>
     <tbody>
       <tr>
        <td>Juni</td>
        <td>150$</td>
       </tr>
        <tr>
        <td>Juli</td>
        <td>50$</td>
       </tr>
     </tbody>
     
</body>
</html>

Zusammenführen der Zellen

Fürs Zusammenführen der Zellen in der Tabelle werden die Attribute colspan und rowspan verwendet. Das Attribut colspan stellt die Anzahl von horizontalen Zellen, die zusammengeführt werden müssen, ein. Das Attribut rowspan ist für vertikales Zusammenführen vorgesehen.

Beispiel eines horizontalen Zusammenführens

<!DOCTYPE html>
<html>
<head>
    <title>Der Titel des Dokuments</title>
    <style>
        table,th,td{border:1px solid #cccccc}
    </style>
</head>
<body>
  <table> 
    <tr>
      <th colspan="2">Monat und Datum</th>
    </tr>
    <tr>
      <td>Januar</td>
      <td>10.01.2014</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>10.01.2014</td>
    </tr>
  </table>
</body>
</html>

Ergebnis

Monat und Datum
January 10.01.2014
February 10.01.2014

Beispiel eines vertikalen Zusammenführens

<!DOCTYPE html>
<html>
<head>
    <title>Der Titel des Dokuments</title>
    <style>
        table,th,td{border:1px solid #cccccc}
   </style>
</head>
<body>
  <table > 
    <tr>
      <th>Monat</th>
      <th>Datum</th>
    </tr>
    <tr>
      <td>Januar</td>
      <td rowspan="2">10.01.2014</td>
    </tr>
    <tr>
      <td>Februar</td>
    </tr>
  </table>
</body>
</html>

Ergebnis

Monat Datum
Januar 10.01.2014
Februar

Übe dein Wissen

Wie können Sie eine Tabelle in HTML erstellen?
Finden Sie das nützlich?