Eine Table mit HTML 5 Elementen

Die HTML 5 TABLE Elemente Übersicht

Ich gehe hier nicht weiter auf die Unterschiede zum alten HTML ein.
Die sind nicht wirklich erwähnenswert.

Webentwickler sollten einfach die typischen HTML5 Table Elemente kennen
und für die Webentwicklung nutzen.

Die neue Strukturierung der Tags ist auf jeden Fall auch wichtig
für responsives Webdesign,
sofern die Seite auch mal auf einem kleineren, mobilen Endgerät aufgerufen werden sollte.

HTML 5 TABLE Elemente
HTML Tag	Beschreibung
<table>	Markiert eine Tabelle, d.h. Daten mit mehr als einer Dimension.
<caption>	Kennzeichnet die Beschriftung (Titel) einer Tabelle.
<colgroup>	Steht für eine Gruppe aus einer oder mehreren Tabellenspalten.
<col>	Steht für eine Tabellenspalte.
<tbody>	Steht für die Spalten, die die eigentlichen Daten einer Tabelle enthalten.
<thead>	Markiert die Gruppe der Tabellenzeilen, die die Beschriftungen der Tabellenspalten enthalten.
<tfoot>	Markiert die Gruppe der Tabellenzeilen, die die Zusammenfassungen der Tabellenspalten enthalten.
<tr>	Steht für eine Zeile mit Tabellenzellen.
<td>	Kennzeichnet eine einzelne Tabellenzelle.
<th>	Kennzeichnet eine Tabellenzelle mit einer Beschriftung.

HTML5 Table Beispiel mit CSS

Zunächst mal ein HTML5-Table Aufbau Beispiel.
Im wesentlichen neu sind die Blöcke (Tags) thead, tbody und tfoot
welche auch für eine responsive Darstellung verantwortlich sind.


      <table border="1">
          <colgroup>
              <col style="width:20%">
              <col style="width:30%">
              <col style="width:20%">
              <col span="2" style="width:20%; background: ivory">
          </colgroup>
      <caption> Beschriftung der Tabelle </caption>
      <thead>
              <tr>
                      <th>&Uuml;berschrift Spalte 1</th>
                      <th>&Uuml;berschrift Spalte 2</th>
                      <th>&Uuml;berschrift Spalte 3</th>
                      <th>&Uuml;berschrift Spalte 4</th>
              </tr>
       </thead>

      <tbody>
              <tr>
                      <td>table body1</td>
                      <td>table body1</td>
                      <td>table body1</td>
                      <td>table body1</td>
              </tr>
              <tr>
                      <td>table body2</td>
                      <td>table body3</td>
                      <td>table body4</td>
                      <td>table body4</td>
              </tr>
       </tbody>

       <tfoot>
              <tr>
                      <td>footer 1</td>
                      <td>footer 2</td>
                      <td>footer 3</td>
                      <td>footer 4</td>
              </tr>
       </tfoot>
      </table>

Das Ergebnis sieht dann so aus:

Beschriftung der Tabelle
Überschrift Spalte 1	Überschrift Spalte 2	Überschrift Spalte 3	Überschrift Spalte 4
table body1	table body1	table body1	table body1
table body2	table body3	table body4	table body4
footer 1	footer 2	footer 3	footer 4

HTML5 Table Elemente mit CSS Formatieren

selbstverständlich ist hier eine einfache CSS-Formatierung
für die jeweiligen HTML5 Table Elemente (Blöcke) möglich:


<style>
         thead {color:green;}
         tbody {color:blue;}
         tfoot {color:red;}

         table, th, td {
             border: 1px solid black;
         }
</style>