Sprung zum Inhalt / Skip to main content
Ein Mittel ist das Umfließen von Texten mittels float. Diese Variante hat bestimmte Schwachstellen – wenn man z.B. einen Rahmen zwischen beide Elemente haben möchte und unklar ist, welches größer ist. Aber es gibt auch noch die Möglichkeit über display:
<html><head><title>display-Attribut</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse;
}
div.tr { display:table-row;
}
div.td { display:table-cell; border:thin solid red; padding:5px;
}
</style>
</head><body>
<div class="table">
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle<br>und habe einen Zeilenumbruch</div>
</div>
<div class="tr">
<div class="td">ich</div>
<div class="td">bin eine</div>
<div class="td">größere</div>
<div class="td">Tabelle</div>
</div>
</div>
</body></html>
Es ist eine sehr geniale Möglichkeit, mit CSS Tabellen nachzubauen. Insbesondere werden dabei die Seiten barrierefrei. Die Tabellen tauchen nicht im HTML auf, sondern eben nur im CSS. Die Umsetzung ist sehr einfach. Man verschachtelt 3 div-Elemente ineinander. Wie bei HTML ist die äußere die Tabelle an sich, dann hat man Zeilen und Zellen.
Opera und Firebird/Firefox interpretieren diese Angaben hervorragend:
Sorgen macht mir wieder einmal das Werkzeug des Teufels:
Eine weitere Idee wäre, float und clear ins Spiel zu bringen:
<style type="text/css">
div.table { display:table; border-collapse:collapse;
}
div.tr { display:table-row; clear:both;
}
div.td { display:table-cell; border:thin solid red; padding:5px; float:left;
}
</style>
Opera läßt sich davon nicht beeindrucken, der Firebird und der IE stellen es allerdings nun so dar:
Im Gegensatz zu HTML-Tabellen gibt es bei CSS noch kein colspan/rowspan.
Mein Fazit: getrennte CSS machen Sinn – eine Frickellösung für den InternetExplorer, eine perfekte CSS für die anderen.
Die Eigenschaften display:table; usw. sind für die nächste Browsergeneration sehr spannend (auch umgekehrt, um Tabellen als <table> auszuzeichnen, aber anders darzustellen). Momentan sollte man aber noch die Finger davon lassen und sich mit float und position begnügen.
Hallo,
habe eine verbesserte Variante gebaut, sodaß die Pseudotabelle bei Mozilla 1.x, Netscape 7.x, Firefox 0.8-1.0, Opera 6.x-8.00b1 und IE6 gleich aussieht.
Dazu habe ich den IE-Code vor den Geckobrowsern mit * html als eine Art Präfix versteckt und in eine eigene CSS-Definition verlagert. Außerdem mußte ich für die Anpassung der Breiten und Höhen zusätzliche Klassen (für die Breite jeder Zelle) und ID-s (für die Höhe der jeweiligen Zeile) definieren.
Bei Interesse Beispielcode per E-Mail anfordern.
(Betreff: Pseudotabelle für alle Browser
- alles andere wird wegen Spamverdacht ignoriert!)
Habe noch vergessen zu erwähnen, daß der Code wie ich ihn ausgebaut habe, bei IE6 nur funktioniert, wenn dieser im Standardmodus bleibt. Der sogenannte Quirks-modus macht die Darstellung kaputt.
Kannst du nicht den Text gleich an Ort und Stelle posten? Oder zumindest auf deiner Seite publik machen und darauf linken? Das wäre zumindest praktischer, als bei Interesse erst eine Mail zu schicken.
Habe das Ganze wie erwähnt mal angepaßt, sodaß IE6 es so anzeigt wie Mozilla 1.7.5 und Opera 7.11-7.54. Bei Weglassen von doctype müssen die Höhen und Breiten im IE6-Teil (mit * html – nach http://www.lipfert-malik.de/webdesign/tutorial/css.html#BrowserweichenCSS) vergrößert werden, da es sonst nicht mehr klappt (hab es getestet). Eine Variante mit Pseudotabellarischer Liste (div, ul, li) und Grafiken befindet sich unter http://www.esperanto-nb.de (Pflege ich seit 2003.).
<!doctype html public »-//W3C//DTD HTML 4.01 Transitional//EN« »http://www.w3.org/TR/html4/loose.dtd«>
<html><head><title>display-Attribut</title>
<style type=»text/css«>
<!--
/* Fuer Mozilla 1.x, Netscape 7, Firefox, Opera 7.x-8.00b1 */
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:1px solid red; padding:5px; }
/* Fuer IE 6 (* html versteckt es vor allen anderen) – Gesamtbreite ist nicht Summe aus den Zellenbreite sondern mehr! */
/* Breiten optimieren, da Automatik bei IE 6 nicht moeglich */
/* Hoehen anpassen – anders hat es nicht geklappt */
-->
</style>
</head><body>
<div class=»table«>
<div id=»tr1« class=»tr«>
<div class=»td td1«>ich</div>
<div class=»td td2«>bin</div>
<div class=»td td3«>eine</div>
<div class=»td td4«>Tabelle<br>und habe einen Zeilenumbruch</div>
</div>
<div id=»tr2« class=»tr«>
<div class=»td td1«>ich</div>
<div class=»td td2«>bin eine</div>
<div class=»td td3«>größere</div>
<div class=»td td4«>Tabelle</div>
</div>
</div>
</body></html>
Statt der grüner Pfeile müssen natürlich im Quelltext, der nicht wie einer aussieht, Sterne stehen wie an zweiter Stelle am Anfang eines Kommentars.
Dein Code ist ein gutes Beispiel, daß ich noch etwas an meiner Ersetzungsfunktion arbeiten muß. Mit dem code-Tag erreichst du erst einmal eine code-übliche Darstellung.
Nur das Sternchen erkennen muß ich innerhalb von code noch verbieten ...
Ansonsten erst einmal danke, ich werde es bei Gelegenheit einmal testen!
Bitte beim Testen beachten, daß der Internetexplorer sehr große Unterschiede macht zwischen Standardmodus und Kompatibilität-/Quirksmodus. Besonders groß sind diese bei irgendwelchen Abmessungen, weil er das Box-Modell nach http://www.w3.org [genaue url weiß ich jetzt nicht] nicht richtig umsetzt.
Wenn vor dem sogenannte doctype am Anfang der html/xhtml-Datei ein Kommentar (hat da eigentlich nichts zu suchen) oder ein xml-Kram steht, dann schaltet der IE 6 auf Quirks. Also aufpassen.
Die Ergänzungen funktionieren nicht nur mit dem Internetexplorer 6, sondern auch 5.x unter Windows. Nur der alte 4er kann es nicht, was aber keine Rolle mehr spielen dürfte.
Den Internetexplorer 5 unter MacOS konnte ich nicht testen.
Habe noch vergessen zu erwähnen, daß die 5er Internetexplorer unter Windows andere Werte für width und height brauchen, weil sie das Bos-Model von http://w3.org falsch umsetzten.