Stil mit {stil}

Mai 2008

HTML-Tag tbody • Tabellen mit Scrollleiste

tbody ist eines der drei Tags für Tabellen aus HTML 4. Diese drei Tags unterteilen eine Tabelle in drei Bereiche:

tbody definiert den Tabellenkörper, in dem die Daten der Tabelle liegen, thead definiert den Tabellenkopf und tfoot die Fußnote zur Tabelle. Diese Unterteilung soll ein Scrollen durch den Tabelleninhalt möglich machen, während der Tabellenkopf und die Fußnote fest im Browserfenster stehen und sichtbar bleiben. Zurzeit ist dieses Feature jedoch nur in den unterschiedlichen Varianten des Mozilla-Browsers implementiert.

Beachten Sie, dass die korrekte Folge für diese drei Tags thead, tfoot und dann tbody sein muss.

Attribute für tbody

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 <tbody>-Tag erst, wenn es 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.

Internet Explorer 7 fasst den CSS-Stil height: 200px; overflow: scroll für das tbody-Element mit jeder Tabellenzelle auf und rendert die Tabelle ellenlang.

<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

           

Die Browserstatistik eines Fotoblogs im Dez. 2007

Top 15 of 3219 Total User Agents
#	Hits		User Agent
Tabellen werden für die Strukturierung von tabellarischen Daten empfohlen. Zur Strukturierung der Seite wird der Einsatz von Stylesheets empfohlen.
1	497913	16.27%	Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11)
2	267810	8.75%	Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.11) Gec
3	183157	5.99%	Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1
4	170926	5.59%	Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-us) AppleWebKit
5	164865	5.39%	Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET
6	105948	3.46%	Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11
7	79322	2.59%	Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.11)
8	63173	2.06%	Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NE
9	54409	1.78%	Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8

Kernattribute und Ereignisse für p-Elemente

Kernattribute	Ereignisse
class, dir, id, lang, style, title	onblur onclick ondblclick onkeydown, onkeypress, onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup

Zum Seitenanfang