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>


Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Bold Italic Underline Strike Superscript Subscript Code PHP Quote Line Bullet Numeric Link Email Image Video
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
What is the day after Friday?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics