Markup

CSS-Tips: table-layout

Eine weitgehend unbenutzte CSS-Eigenschaft ist table-layout. Eric Wendelin zeigt in einem kurzen Beitrag, welchen Nutzen man damit aber erzielen kann: Use the table-layout CSS property to speed up table rendering.

/* Set table to "fixed" (fastest render) layout */
.fixed_table {
   table-layout: fixed;
}
/* Set table to "auto" (best fit) layout. This is the default */
.auto_table {
   table-layout: auto;
}

Der Unterschied zwischen beiden Anweisungen liegt im Rendering der darzustellenden Tabelle: Im ersten Beispiel werden nur die Elemente der ersten Zeile (in der die Breite oftmals schon festgelegt ist) genauer betrachtet und die Breite der Zellen nach eben diesen Elementen (Tabellen- und Spaltenbreite) festgelegt. So können Tabellen schneller dargestellt werden.

Der Nachteil: Unterscheiden sich die Inhalte stark in ihrer Länge von einander, entstehen so merkwürdig aussehende Tabellenlayouts, in denen lange Inhalte an Stellen gebrochen werden, wo man es nicht erwartet. Vor allem bei kurzen Tabellen ist das auffällig.

Der beste Einsatz ist also in langen Tabellen mit Inhalten von gleicher Breite.

Für Interessierte: Die Spezifikation (hier deutsch).

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.