Tabellenlayout mit CSS-Tabellen?

Layouttabellen sind böse. Tabellen sind nicht zum layouten gedacht. Wer eine Tabelle zum layouten nutzt ist von vorgestern, hat keine Ahnung, ist zu faul zum lernen und sollte sich einen neuen Beruf suchen.

So laufen im allgemeinen Diskussionen zum Thema "Layouttabellen oder CSS-gestylte Boxen" ab. Es wird einfach nicht akzeptiert, wenn sich gerade jemand, der sich sehr intensiv mit allem Pro und Contra beschäftigt hat, nach reichlicher Überlegung an einer bestimmten Stelle für die Tabelle entscheidet.

Was mich an solchen Aussagen stört, sind die mangelnden Alternativen. Tabellen haben nun mal ein paar Eigenschaften, die mit CSS-gestylten Boxen nicht browserübergreifend zuverlässig nachgebildet werden können.

Aber die Standardistas haben ja schon eine Lösung parat: display:table & Co. machen es möglich, eine Tabelle mit einer div-css-Konstruktion nachzubauen. Endlich kann man ohne Missbrauch einer Tabelle ein Layout basteln, das wie eine Tabelle aussieht, und die Welt ist in Ordnung.

Ist sie das wirklich? Mal abgesehen davon, wann wir diese div-css-Tabellen allen verbreiteten Browsern anvertrauen können …

Ich habe mich mal ein wenig kundig gemacht und folgendes auf selfhtml zum Thema display:table & Co. gefunden:

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren.

Wer also display:table & Co. verwendet, missbraucht genauso wie bei einer richtigen html-Tabelle eine Tabelle zu Layout-Zwecken, nur eben eine XML-kompatible Tabelle.

Auch display:table, display:table-row & Co. sind keinesfalls zu Layout-Zwecken erschaffen worden, sondern zur XML-kompatiblen Darstellung von tabellarischen Daten.

Die Syntax wird genauso aufgebaut wie bei einer html-Tabelle, nur eben mit DIVs und entsprechenden Klassen, somit ist die Anzeige nicht im (X)html definiert, sondern im Stylesheet.

Das entspricht zwar der Forderung nach Trennung von Inhalt und Layout, aber im Grunde werden auch hier (X)html-Elemente in Verbindung mit css-Eigenschaften für einen Zweck missbraucht, für den sie ursprünglich nicht gedacht waren, nämlich für Layout-Zwecke.

Also, wenn ich schon eine Tabelle für bestimmte Layout-Anforderungen “missbrauche”, dann doch lieber eine Tabelle, die auch von Browsern dargestellt wird, die diese css-Eigenschaften nicht interpretieren.

Und mit solchen Browsern werden wir wohl noch die nächsten 3-5 Jahre leben müssen, denn auch folgendes habe ich auf der oben verlinkten Seite (selfhtml), ein paar Zeilen weiter, gefunden:

Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.

Das Thema display:table & Co. zieht sich ja schon seit geraumer Zeit durch die WebdesignBlogs. Das Thema “Layouttabellen” war für lange Zeit aus dem Focus verschwunden und ist eigentlich erst mit der Diskussion dieser css-Eigenschaften wieder ins Rampenlicht geraten.

Vielen Standardistas scheint aber nicht klar zu sein, dass mit display:table & Co eben auch eine Tabelle missbraucht wird, wenn diese Eigenschaften zu Layout-Zwecken eingesetzt werden.

Genaugenommen habe ich das auch nur “geahnt”, bis ich das Thema mal gegoogelt und auf selfhtml eine richtig gute Erklärung gefunden habe.

Vorher war mir völlig unklar, warum man etwas funktionierendes (html-Tabelle) durch ein div-css-Konstrukt ersetzen will. Die XML-Kompatibilität ist jedoch eine einleuchtende Erklärung.

Gleichzeitig habe ich aber auch verstanden, dass es sich bei diesem div-css-Konstrukt genauso um eine Tabelle handelt wie bei einer richtigen html-Tabelle, also ursprünglich nicht zum Layouten gedacht.

Montag, 2. März 2009, 20:01 Uhr

Button zum Seitenanfang nach oben

Kommentare und Pings sind derzeit nicht erlaubt.

zum Kommentar-Eingabeformular (Kommentare überspringen) »

5 Kommentare zu “Tabellenlayout mit CSS-Tabellen?”

  1. wolfi
    Am 3. Mai 2009 um 11:50 Uhr

    Wie sieht eigentlich der Grundtenor beim Thema Tabellen auf Websites allgemein aus? Ist’s nicht so, dass Tabellen generell als “outdated” angesehen werden, oder hab’ ich da etwas falsch verstanden?

    Eine Tabelle kann nämlich ganz praktisch sein, wenn ich z.B. eine Namensliste mit Fotos mache, erreiche ich doch nur mit einer Tabelle die Sicherheit, dass mein Name bei meinem Foto bleibt oder? Dasselbe gilt für Textdokumente, wenn ich eine (längere) beschreibung zuverlässig einem Bild zuordnen will, verwende ich statt einer Bildunterschrift wohl eine Tabelle, bei der mein Bild z.B. rechts und der Text links eingesetzt wird.

    Oder?

  2. Gunther
    Am 19. Juli 2009 um 19:44 Uhr

    Hi,

    was mich an solchen Beiträgen/ Diskussionen stört ist, dass zwar mit jeder Menge “Parolen” um sich geschmissen wird, ohne aber den eigentlichen Kern der Thematik genauer zu beleuchten!

    Wir sind uns ja wohl alle einig darin, dass es zu den obersten Grundsätzen des Webdesigns gehört, Inhalt und Darstellung strikt (d.h. zu 100%) voneinander zu trennen.

    Der Inhalt (die Informationen) werden per (X)HTML strukturiert. Das bedeutet nichts anderes, als dass jeder Teil des Inhalts gemäß seiner Bedeutung (Semantik) in die entsprechenden HTML-Tags “verpackt” wird.

    Dadurch ist es eben möglich, auf der Darstellungsseite bspw. eine Überschrift anders darzustellen, als einen Textabsatz in einem Fließtext.

    Wer nun aber hingeht, und HTML Table-Tags für etwas anderes verwendet als für tabellarische Daten, der zerstört die Semantik!

    Diese wiederum ist aber eine Grundvoraussetzung für eine entsprechende Darstellung. Von den Problemen im Bezug auf Accessability und Usability bei nicht visuellen Ausgabemedien ganz zu schweigen. Denn im Gegensatz zu CSS, kann man beim HTML-Code (Markup) nicht nach Ausgabemedien unterscheiden.

    Bei visuellen Ausgabemedien besteht nun häufig der Wunsch, nach einer “tabellenähnlichen” Darstellung. Also bspw. nach mehreren nebeneinander angeordneten Spalten mit gleicher Länge. Und dafür, und nur dafür, gibt es die entsprechenden Werte der Display-Eigenschaft!

    Die Verwendung dieser Eigenschaft für das (visuelle) Layout ist mit keinem der (gravierenden) Probleme behaftet, die eine fälschliche Verwendung des HTML Table-Tags mit sich bringt!

    Nur weil in beiden Fällen das Englische Wort “table” vorkommt, befinden wir uns deshalb noch lange nicht auch im selben Kontext.

    Hier (und anderswo) wird wild mit Äpfeln und Birnen durcheinander geworfen, und die Schlussfolgerungen, die teilweise daraus gezogen werden sind “abenteuerlich”.

    Dass wir uns bislang beim Layout mit “fragilen” Float-Konstrukten behelfen mussten, dürfte im wesentlichen wohl einzig und allein darauf zurückzuführen sein, dass keine der Vorgängerversionen des IE 8 display:table (und Co.) unterstützt.

    Und bis nicht alle diese Vorgängerversionen als veraltet betrachtet werden können, muss man entweder weiter mit den Float-Konstrukten hantieren, oder eine zweite Version seiner Site für die IEs <= 7 erstellen.

    Vielen Standardistas scheint aber nicht klar zu sein, dass mit display:table & Co eben auch eine Tabelle missbraucht wird, wenn diese Eigenschaften zu Layout-Zwecken eingesetzt werden.

    Nein, nein, nein!
    Wie kann ich denn überhaupt eine Eigenschaft, die rein der Darstellung dient, “missbrauchen”?

    Einer Darstellung liegt keine Semantik zugrunde. Sie orientiert sich lediglich an der Semantik des darzustellenden Inhalts (unter Berücksichtigung des jeweiligen Ausgabemediums)!

    Ich hoffe, dass sich diese leider sehr oft missverstandene Thematik langsam mal in den Köpfen aller Beteiligten ein wenig aufklärt.

    In diesem Sinne,

    Gruß Gunther

  3. admin
    Am 20. Juli 2009 um 19:51 Uhr

    Also das ganze erinnert mich an einen Vegetarier, der absolut davon überzeugt ist, dass ihm der Genuss von Fleisch schadet. Er kann sich aber noch daran erinnern, dass ein Schnitzel ganz gut schmeckt.

    Also züchtet er eine Pflanze, deren Früchte aussehen, schmecken und riechen wie ein Schnitzel.

    Es mag ja Menschen geben, die wirklich kein Fleisch vertragen. Den allermeisten Vegetariern würde ein gelegentliches Schnitzel aber überhaupt nicht schaden. Trotzdem würden Sie bei Appetit auf ein Schnitzel nie etwas anderes essen als die Frucht dieser Pflanze.

    Aber Gott sei Dank sind diese Vegetarier in der Minderheit, auch wenn sie denken, ihre Art sich zu ernähren wäre die einzig richtige und akzeptable.

    Wobei es sicher richtig ist, dass der ausschliessliche und exzessive Verzehr von Fleisch schädlich ist.

  4. Alf Gaida
    Am 4. Dezember 2009 um 02:23 Uhr

    Mir fällt zu diesem Thema eigentlich nichts wirklich neues mehr ein. Die Argumente gegen Tabellen leuchten mir ein, die Argumente dafür auch. Eins muss ich jetzt aber wirklich loswerden: Wenn ich meine Bildersammlung oder Teile davon in einem Tabllenlayout präsentiere, dann ist das erst einmal meine Sache. Ich gehe in diesem, wohlgemerkt hypothetischen, Fall davon aus, das es Leute gibt, die die Bilder und eventuelle Beschriftungen anschauen wollen. Wenn jetzt jemand argumentiert, das das Design nicht “Barrierefrei” wäre, ich bei den Bildern den Alternativtext nicht gesetzt hätte und ich auch sonst ein schlechter Mensch wäre, dann gebe ich ihm unter lautem Lachen und über den Boden rollen recht;-) Was ich damit sagen will ist: Kann ein Blinder meine Fotos über Braille anschauen? Nutzt die Angabe “Omas 79ster 2009″ wirklich etwas?

    Meiner Meinung nach gehören tabellarische Daten in Tabellen. Ob HTML oder CSS ist mir egal, solange es einfach geht und von den Browsern unterstützt wird. Im Endeffekt mache ich ja doch, was mir gefällt, die Meinung von “Gutmenschen”, hier genannt “Standardistas” ist mir egal und belustigt mich eher.

    Jeder hat wahrscheinlich schon mal auf die oben genannte Webseite http:// de.selfhtml.org geschaut:


    ..

    Die Energie des Verstehens
    HTML-Dateien selbst erstellen
    SELFHTML

    ..

    Irgendwie beruhigt mich das ob aller hitzigen Diskussionen ungemein, ich glaub’ zumindest, dass man Hernr Münz und Mitstreitern doch Kompetenz in Sachen HTML & Co. zutrauen darf.

  5. Alf Gaida
    Am 4. Dezember 2009 um 02:26 Uhr

    Sorry, falsch getaggt:

    ..

    Die Energie des Verstehens
    HTML-Dateien selbst erstellen
    SELFHTML

    ..