Webentwicklung
21.05.2008
14:34

Tabellen mit CSS simulieren

Tabellengestützte Layouts sind suchmaschinenunfreundlich, out und bergen verschiedene Barrieren. Deshalb setzen die meisten Webdesigner heute auf tabellenlose XHTML/CSS-Layouts. Soweit alles schön und gut.

Allerdings gibt es Situationen, in denen sich manch Designer heimlich die Zeiten zurückwünscht, in denen die Tabellenkonstrukte noch nicht verpöhnt waren. Z.B. wenn es darum geht ein dreispaltiges Layout zu realisieren, bei dem alle drei Spalten gleich hoch sind und sich trotzdem in der Höhe automatisch dem Inhalt anpassen.

Es gibt jedoch eine Lösung, die nur divs und CSS verwendet. Dabei bedient man sich der CSS-Eigenschaft display und deren Werte table, table-cell und table-row.

table.css
.table{
   display: table;
}
.tr{
   display: table-row;
}
.td{
   display: table-cell;
   vertical-align: top;
}

Natürlich gibt es bei dieser verblüffend einfachen Lösung auch einen kleinen Haken, und der liegt -wie so oft- beim Internet Explorer. Doch mit folgendem zusätzlichen CSS, dass sich z.B. mit Conditional Comments einfügen lässt arbeiten auch IE 6 & 7 mit:

ie6-tables.css
.td{
   margin-bottom: -10000px;
   padding-bottom: 10000px;
   float:left;
}
ie7-tables.css
.td{
   margin-bottom: -10000px;
   padding-bottom: 10000px;
   float:left;
   height: 100%;
}

Mit folgendem HTML-Code lässt sich dann die Tabelle erstellen:

table.html
<html>
<head>
   <title>CSS-Simulierte Tabellen</title>
   <link href="fileadmin/templates/table.css" type="text/css" 
rel="stylesheet" />
   <!--[if IE 6]>
   <link href="fileadmin/templates/ie6-tables.css" type="text/css" 
rel="stylesheet" />
   <![endif]-->
   <!--[if IE 7]>
   <link href="fileadmin/templates/ie7-tables.css" type="text/css" 
rel="stylesheet" />
   <![endif]-->
</head>
<body>
   <div class="table">
      <div class="tr">
         <div class="td first">
            Sehr kurzer Text
         </div>
         <div class="td second">
            Sehr langer Text, der sich über mehrere Zeilen erstreckt
            und somit den Container in der Höhe streckt.
         </div>
         <div class="td third">
            Etwas kürzerer Text, der über zwei Zeilen geht.
         </div>
      </div>
   </div>
</body>
</html>

Diese Methode hat Thomas Biller in einem TYPO3-Podcast vorgestellt. Vielen Dank dafür!

Trackback link
Tags: webentwicklung, css
Views: 122
1 Kommentar(e)
Diesen Kommentar kommentieren
Gravatar: Christian HoffmannChristian Hoffmann
21.10.2009
18:38
Yaml

Finde die Idee nicht schlecht. Jedoch greife ich lieber auf Yaml zurück. Wenn Tabellen gefordert werden (tabelleraische Darestellungen) werde ich natürlich auch weiter Tabellen einsetzen ;-) Trotzdem tolles Engagement das du Usern diesen Codeschnippsel zur Verfügung stelltst

http://www.hoffmann-christian.net

Mein Kommentar

Ich möchte über jeden weiteren Kommentar in diesem Post benachrichtigt werden.

Zurück