Stil mit {stil}

Mai 2008

HTML-Tag <thead> ... </thead> • Fest stehender Tabellenkopf

Das <thead>-Tag ist eines der drei neuen Tags der Version 4.0, die eine Tabelle in drei Bereiche aufteilen.

Das <tbody>-Tag definiert den "Tabellenkörper", in dem die Inhalte dargestellt werden, das <thead>-Tag definiert den Header und das <tfoot>-Tag die Fußnote einer Tabelle. Diese Einteilung wurde eingeführt, damit der Tabellenkörper in langen Tabellen scrollen kann, während Header und Fußnote im Browserfenster sichtbar bleiben. Beachten Sie, dass die korrekte Aufruffolge für diese Tags thead gefolgt von tfoot und zuletzt tbody ist.

Attribute für thead

char

weist ein Zeichen für die Ausrichtung des Inhalts einer Zelle aus. An diesem Zeichen werden Dezimalstellen in einer Spalte vertikal ausgerichtet. Der Vorgabewert ist länderspezifisch. In den USA wird das erste Vorkommen eines Kommas oder eines Dezimalpunktes benutzt.

charoff

ist eine ganze Zahl, die den Abstand des Zeichens für die Ausrichtung vom Zellenrand angibt. Per Vorgabe wird der Abstand vom linken Zellenrand berechnet.

Beispiel

So richtig in Gang kommt das <thead>-Tag erst, wenn das <tbody>-Tag mit dem CSS-Stil overflow formatiert wird. Dann kann die angezeigte Höhe des Tabellenkörpers beschränkt werden und ein Scrollbalken zeigt weitere Zeilen in ähnlicher Manier wie z.B. Microsoft Excel. Diese Kombination wird derzeit aber nur von den verschiedenen Mozilla-Varianten unterstützt.

<table summary="Browser-Statistik" border="1" cellspacing="2" cellpadding="3">
   <colgroup>
      <col width="10" /><col width="50" />
      <col width="50" /><col width="400" />
   </colgroup>
   <caption>Die Browserstatistik eines Fotoblogs im Dez. 2007</caption>
   <thead>
      <tr>
         <th colspan="4">Top 15 of 3219 Total User Agents</th>
      </tr>
      <tr>
         <th>#</th>
         <th colspan="2">Hits</th>
         <th>User Agent</th>
      </tr>
   </thead>
   <tfoot>      
      <tr>    
         <td colspan="4">Tabellen werden für die Strukturierung 
            von tabellarischen Daten empfohlen. 
            Zur Strukturierung der Seite wird der 
            Einsatz von Stylesheets empfohlen. </td>   
      </tr>
   </tfoot>
   <tbody style="height: 200px; overflow: scroll">
      <tr>
         <td>1</td>
         <td style="text-align: right;">497913</td>
         <td style="text-align: right;">16.27%</td>
         <td style="background: mistyrose;">Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) </td>
      </tr>

      …
   </tbody>
</table>

Darstellung

Darstellung

Kernattribute und Ereignisse für p-Elemente

Zum Seitenanfang