Startseite > Blog > Seitenlayout mit CSS-Tabellen?

Seitenlayout mit CSS-Tabellen?

Dirk Jesse, der das CSS-Framework YAML geschaffen hat, geht in seinem Blog highresolution.info auf die Möglichkeit ein, Webseiten mit CSS-Tabellen zu layouten.

Lesenswert sind in diesem Zusammenhang auch die Kommentare sowie die zugrunde liegenden englischen Artikel

Der Vorteil dieser neuen Technik besteht in gleichlangen Spalten. Allerdings unterstützt der Internet Explorer (IE) bis Version 6 CSS-Tabellen nicht. Ingo Chao weist in seinem Kommentar zwar darauf hin, dass Inline-Blocks eine Alternative für den IE sein können, aber ein solcher Workaround dürfte für ein auf CSS-Tabellen basierendes Seitenlayout alles andere als trivial sein.

In seinem zusammen mit Corina Rudel geschriebenen Buch “Fortgeschrittene CSS-Techniken inkl Debugging” zeigt er auf den Seiten 288 – 293 eine entsprechende Anpassung für eine horizontale Navigation, die mit display: table-cell erstellt wurde. Ein interessanter Ansatz, dessen Anwendung auf ein komplettes Seitenlayout allerdings mein Vorstellungsvermögen überschreitet.

Da warte ich erst einmal in Ruhe ab, ob praxistaugliche Lösungen im Web auftauchen und bleibe erst mal beim auf Floats basierenden CSS-Framework YAML. Das optische Problem gleichlanger Spalten bekommt man(n) (Frau auch) mit der Faux Column-Technik sowie CSS-Techniken (Equal Height Columns using CSS und Companion column method) in den Griff.

Für Interessierte und Experimentierfreudige, die sich gleichwohl mal mit CSS-Tabellen und Inline-Blocks beschäftigen wollen, hier der Link zu dem anspruchsvollen Buch:

[amtap book:isbn=3836211386]

3 Kommentare

  1. makcie sagt:

    Hallo Dieter,

    bin bei Google auf Deinen Beitrag gestoßen.
    Das Thema interessiert mich auch.

    Hier nur kurz eine Ergänzung zu Deiner Linkliste:
    – Buch von Rachel Andrew und Kevin Yank:
    Everything You Know About CSS Is Wrong
    Sitepoimt 2008
    http://www.sitepoint.com/books/faq.php?book=csswrong1
    – 2 Demoseiten von Andy Clark – einmal die Seite mit Floats und einmal mit CSS-Tabellen
    forabeautifulweb.com/demo/2008/10/08/index.html und forabeautifulweb.com/demo/2008/09/24/index.html
    http://www.webmasterpro.de/coding/news/2008/11/08/css-tabellen-fuers-webseitenlayout.html
    Artikel mit Pro und Contra

    In der YAML Version 3.1 gibt es zwei Seiten mit Ansätzen, display: table und display-cell zu verwenden, auf der Grundlage von Subtemplates.

    Ansonsten kenne ich nur die Beispiele aus dem Buch von Rachel Andrew/Kevin Yank und von Andy Clark.

    Die Begeisterung für ein CSS-Tabellen-Layout hält sich in Grenzen, in den Diskussionen gibt es Pro und Contra und viele Missverständnisse.

    Ich beginne, mich jetzt etwas intensiver damit zu beschäftigen, komme aber nur langsam voran. Ein endgültiges Urteil kann und will ich mir noch nicht bilden.

    Viele Grüße, makcie

  2. Dieter sagt:

    Hallo makcie,

    in dem halben Jahr seit diesem Blogbeitrag hat sich schon wieder viel getan.

    Vielen Dank für Deine ergänzenden Infos und Links! :-)

    Ich habe mich mit dem Thema CSS-Tabellen noch nicht näher beschäftigt. Das wird vielleicht anders werden, wenn das WordPress-Theme Projekt X von Michael Preuß kommen sollte, das voraussichtlich auf YAML 3.1 basieren wird und damit dann auch Subtemplates mit CSS-Layouts beinhalten dürfte.

    Beste Grüße
    Dieter

Hinterlasse eine Antwort

Deine Mailadresse bleibt geheim. Pflichtfelder sind mit * gekennzeichnet.

Kommentare prüfe ich grundsätzlich vor einem Freischalten!
Ich bitte um Verständnis für diese Spamschutz-Maßnahme.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Webseite veröffentlicht am Sonntag, den 16. November 2008, um 21:29 Uhr,
zuletzt geändert am Donnerstag, den 23. Juni 2011, um 22:29 Uhr.
Tags: , , , , ,


Statistik: 72 Seiten, 346 Blogartikel, 1.068 Schlagworte, 1.297 Kommentare, 138 Feedleser.
© 2002 - 2014 | WordPress - Mein Layout basiert auf YAML und wird durch Xtreme One angetrieben.