table vs. div

[Nicole]

hallo zusammen,

mir in letzter zeit öfter zu Ohren gekommen, das dass verwenden von table altes html wäre und das nun div der absolute moderne weg ist.

ist an der Sache wirklich was dran??? oder ist das nur so eine Phase wie vor einigen Jahren mit flash???

ich würde mich freuen wenn jemand mehr Infos zu diesem Thema hätte!

vielen dank

[Elya]

Hallo Nicole,

mir in letzter zeit öfter zu Ohren gekommen, das dass verwenden von table altes html wäre und das nun div der absolute moderne weg ist.

ein weit verbreitetes Gerücht ;-) Das Stichwort ist eher "Trennung von Struktur und Layout durch konsequente Verwendung von HTML für Struktur und CSS für Design/Layout".

ist an der Sache wirklich was dran??? oder ist das nur so eine Phase wie vor einigen Jahren mit flash???

an der "Sache" ist was dran ;-)

ich würde mich freuen wenn jemand mehr Infos zu diesem Thema hätte!

Hier kannst Du Dich z.B. einlesen: http://de.selfhtml.org/css/layouts/einfuehrung.htm

Gruß aus Köln-Ehrenfeld,

Elya

[mark chopin]

Solange man mit CSS nicht das hinbekommt, was mit <table> geht, MUSS
man ja zwangsläufig Tabellen nehmen.

Bis heute ist mir nicht bekannt, wie man ein in der Höhe 100%-browserfüllendes
DIV-Element hinbekommt, wenn dieses unter einem anderen fest positionierten
DIV-Element steht.

Bis jetzt geht das de facto nur mit der guten alten Tabelle.

[Cheatah]

Hi,

Solange man mit CSS nicht das hinbekommt, was mit <table> geht, MUSS
man ja zwangsläufig Tabellen nehmen.

nö. Wieso? Die genau umgekehrte Argumentation klappt übrigens auch.

Bis heute ist mir nicht bekannt, wie man ein in der Höhe 100%-browserfüllendes
DIV-Element hinbekommt, wenn dieses unter einem anderen fest positionierten
DIV-Element steht.

Das geht ganz hervorragend, indem man das Element - egal ob es nun ein <div> ist oder nicht - ebenfalls fest (bzw. zumindest absolut) positioniert und dabei den Browser selbst die Höhe berechnen lässt. Einziger Querschläger ist mal wieder der IE, für den Workarounds recherchierbar sind.

Cheatah

[mark chopin]

Das geht ganz hervorragend, indem man das Element - egal ob es nun ein
<div> ist oder nicht - ebenfalls fest (bzw. zumindest absolut) positioniert
und dabei den Browser selbst die Höhe berechnen lässt.

DAS geht definitiv nicht. Wenn doch, dann zeig mal ein Beispiel
(mir reicht schon eins, das für die Gecko-Engine funktioniert).

[mark chopin]

Keine Antwort ist auch eine Antwort.

Es geht also definitiv nicht. Diese ganze Gerede mit
"semantischen Code schreiben" geht an der Praxis
total vorbei.

[Der Martin]

Hallo Mark,

Es geht also definitiv nicht.

Was für ein Unsinn. Erst vor ein paar Tagen ist sogar hier im Forum auf http://annevankesteren.nl/archives/2004/07/fixed-positioning hingewiesen worden. Das ist eine Sammlung von "Templates" für Standardlayouts, die NUR auf CSS basieren. Und die funktionieren im IE genausogut wie in Gecko-basierten Browsern.

Diese ganze Gerede mit "semantischen Code schreiben" geht an der Praxis total vorbei.

Keineswegs. Es ist nur in der Praxis manchmal schwer, sich selbst die entsprechende Disziplin aufzuerlegen. Klar, ein Frameset oder eine Layouttabelle ist schnell mal eben hingezimmert, während die semantisch sinnvolle Auszeichnung und die Positionierung mittels CSS manchmal ein wenig Hirnschmalz erfordert - vor allem, wenn man es von Grund auf selbst machen möchte.
Wenn man allerdings existierende Layouts (s.o.) als Grundlage hernimmt und darauf aufbaut (aber bitte erst, nachdem man das Prinzip verstanden hat), ist das kein Hexenwerk.

So long,

Martin

[mark chopin]

Ich kenne diese Seite. Aber eine Antwort auf das o.g. Problem
gibt es hier nicht (kann es auch nicht, denn es geht definitiv NICHT).

ich will NUR zwei DIVs haben, wobei das Obere eine fixe Höhe
hat und das Untere bis zum Browserende geht. Z.B.:

--------------------------- Browser
|                           |
| DIV height:100px;         |

DIV height:100%;

---

Und das geht nicht(!)

Und wenn ja, dann wie (aber diesmal ein Beispiel, das
funktioniert und nicht irgendwelche Links auf Seiten,
die das Problem nicht einmal ansatzweise behandeln,
geschweige denn lösen würden).

[Struppi]

--------------------------- Browser
|                           |
| DIV height:100px;         |

DIV height:100%;

---

wozu brauchst du ein unteres DIV?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Test</title>
<style>
html, body {
height:100%;
}
body
{
margin:0;
padding:0;
background-color:#fff;
color:#000;

}
div#oben
{
height:100px;
background-color:green;

}
</style>
</head>
<body >

<div id="oben"> oben </div>

<p> unten

</body>
</html>

Struppi.

[mark chopin]

Das Beispiel war etwas vereinfacht dargelegt.
Das eigentliche Layout ist folgendermaßen:

----------------------------- Browser
|                           |
| DIV height:100px;         |
|                           |
-----------------------------
|    |              |       |
|    |              |       |
|    |              |       |
|    |              |       |
|    |              |       |
-----------------------------

Die unteren drei DIV-Elemente sollen unabhängig
von der Höhe des Inhaltes immer bis zum Browserende
gehen.

Mit einer Tabelle kein Problem, aber nur mit DIV & CSS
ist das unmöglich.

Und darum gebe ich nichts mehr auf diesen semantischen
Code, der meilenweit von der Praxis entfernt ist.

[Struppi]

----------------------------- Browser
|                           |
| DIV height:100px;         |

---

Das sieht für mich nach einer Tabelle aus. Somit wäre eine HTML Tabelle sematisch durchaus ok.

Mit einer Tabelle kein Problem, aber nur mit DIV & CSS
ist das unmöglich.

Ich hab jetzt keine Lust dies zu probieren, denn du hast das ganze Prinzip nicht verstanden.

Mit CSS hast du nicht die Möglichkeiten, wie mit einem Grafikprogramm, wenn dir diese nicht ausreichen, wie in deinem Beispiel das fehlende Gitter, dann hast du zwei Möglichkeiten, entweder du entwirfst dein Layout so das es sich mit dem Werkzeug was du hast, umsetzen läßt - was nicht wenige auch können - oder du benutzt Hilfmittel, wie in diesem Falle eine Tabelle.

Und darum gebe ich nichts mehr auf diesen semantischen
Code, der meilenweit von der Praxis entfernt ist.

Die Frage ist was ist die Praxis?
Du musst in der Lage sein das Werkzeug, das du hast zu nutzen. Eine Schraube läßt sich mit dem Hammer in die Wand schlagen, eleganter ist es mit einem Schraubenzieher, das dauert aber u.U. länger

Struppi.

[mark chopin]

Das sieht für mich nach einer Tabelle aus. Somit wäre eine HTML Tabelle
sematisch durchaus ok.

Es ist aber keine Tabelle, wo daten tabellarisch aufgelistet werden,
sondern ein Layout.

Ich hab jetzt keine Lust dies zu probieren, denn du hast das ganze Prinzip
nicht verstanden.

Ich denke eher du hast es nicht verstanden.

Mit CSS hast du nicht die Möglichkeiten, wie mit einem Grafikprogramm,
wenn dir diese nicht ausreichen, wie in deinem Beispiel das fehlende
Gitter, dann hast du zwei Möglichkeiten, entweder du entwirfst dein Layout
so das es sich mit dem Werkzeug was du hast, umsetzen läßt - was nicht
wenige auch können - oder du benutzt Hilfmittel, wie in diesem Falle eine
Tabelle.

Jetzt weiß ich, dass du das Prinzip wirklich nicht verstanden hast.
Es geht nicht um pixelgenaues Layout, sondern um ein Stinknormales.
Die Tabelle MUSS ich nehmen, aber dann ist es nicht mehr streng
semantisches HTML.

Die Frage ist was ist die Praxis?
Du musst in der Lage sein das Werkzeug, das du hast zu nutzen. Eine
Schraube läßt sich mit dem Hammer in die Wand schlagen, eleganter ist es
mit einem Schraubenzieher, das dauert aber u.U. länger

Toll. Ich nutze CSS, aber ich zeige gerade die Grenze auf.
CSS scheitert an diesem banalen Beispiel.

Schluss

[Struppi]

Toll. Ich nutze CSS, aber ich zeige gerade die Grenze auf.
CSS scheitert an diesem banalen Beispiel.

Das Beispiel ist nicht banal, das ist das Problem.

Um in einem Container dessen Größe nicht vorher bestimmbar ist - im Gegensatz z.b. zu pdf - einen Inhalt zu zu gestalten ist HTML/CSS eine ideale Kombination. es ist flexibel und passt sich sehr gut dieser Umgebung an. Deshalb ist HTML für das Internet optimal und nicht z.b. pdf. du willst den View füllen dafür ist es nciht vorgesehen, genauso wie es nicht eine Druckseite ausfüllen kann, aber das wird soweit ich weiß in kommenden versionen besser.

Ach und hier dein Beispiel:
http://javascript.jstruebig.de/test/test-3-spalten.html aber es geht halt nur mit Getrickse und so ist es eine DIV suppe die nicht besser ist als eine Tabelle.

Struppi.

[mark chopin]

Das Beispiel ist nicht banal, das ist das Problem.

So sind ungefähr alle großen Auftritte aufgebaut
(spiegel.de)

Ach und hier dein Beispiel:
http://javascript.jstruebig.de/test/test-3-spalten.html aber es geht halt nur mit Getrickse und so ist es eine DIV suppe die nicht besser ist als eine Tabelle.

Ja stimmt eine Tabelle ist da 1000-mal besser.

Und jetzt Schluss.

[Struppi]

Das Beispiel ist nicht banal, das ist das Problem.

So sind ungefähr alle großen Auftritte aufgebaut
(spiegel.de)

wie gesagt das Problem war dein Wunsch eine feste Höhe oben zu haben und das hat Spiegel.de nicht. Ohne diese Anforderung ist es einfach.

Ach und hier dein Beispiel:
http://javascript.jstruebig.de/test/test-3-spalten.html aber es geht halt nur mit Getrickse und so ist es eine DIV suppe die nicht besser ist als eine Tabelle.

Ja stimmt eine Tabelle ist da 1000-mal besser.

Um ein Tabellenlayout umzusetzen ist eine Tabelle die einzige sinnvolle Lösung.

Es ging nur um deine Aussage:
"Mit einer Tabelle kein Problem, aber nur mit DIV & CSS
ist das unmöglich."

was a. nicht stimmt und b. ist es kein Problem sondern, erfoderte dein Wunschdesign, eine ganz spezielle Eigenschaft, die nur Tabellen haben ohne diese eine Anforderung ist das Design auch mit CSS o. Probleme umzusetzen

Und jetzt Schluss.

Klar, deine Aussagen sind ja widerlegt.

Struppi.

[Struppi]

Jetzt weiß ich, dass du das Prinzip wirklich nicht verstanden hast.
Es geht nicht um pixelgenaues Layout, sondern um ein Stinknormales.
Die Tabelle MUSS ich nehmen, aber dann ist es nicht mehr streng
semantisches HTML.

Und noch ein Nachtrag um dir zu erklären, warum du es nicht verstanden hast.

Doch es ging um pixelgenaues Design, da du verlangt hast das der obere Bereich 100px hoch ist, hättest, du wie es für ein CSS Layout optimaler wäre, gesagt 10%, wäre es kein Problem.

Und dein Entwurf ist ein Tabellenlayout.
Überleg dir wie du das Layout mit einer Tabelle umsetzt. Du benutzt colspan, ein für eine Tabelle typische Werkzeug. Aufgrund dessen ist es möglich eine Reihe mehrere Objekte zusammenschmelzen zu lassen ohne dieses Mittel kanst du diese "Stinknormale" und "banale" Aufgabe mit keinem Werkzeug das mir bekannst ist umsetzten. Dir muss immer die Höhe des Anzeigebereichs bekannt sein, aber dies ist nun mal nicht der Fall.

Toll. Ich nutze CSS, aber ich zeige gerade die Grenze auf.
CSS scheitert an diesem banalen Beispiel.

Naja, CSS scheitert nicht, aber du musst dazu versuchen eine typische Tabelleneigenschaft mit CSS umzusetzen. Was auf jden Fall nicht sinnvoll ist.

Struppi.

[Ingo Turski]

Hi,

Und darum gebe ich nichts mehr auf diesen semantischen
Code, der meilenweit von der Praxis entfernt ist.

aber nur von Deiner Praxis. Warum müssen die Elemente denn unbedingt das gesamte Fenster ausfüllen, auch wenn der Inhalt dies nicht erfordert? Du denkst in Tabellen und da ist es nur folgerichtig, daß ein Tabellen-Layout dabei herauskommt.
Ob nun ein leerer Raum innerhalb der Elemente oder außerhalb ist: er bleibt unausgefüllt.

freundliche Grüße
Ingo

[mark chopin]

aber nur von Deiner Praxis. [...]

Schön wenn man die Dinge so umkehrt. Jetzt richte ich
mich nach der Technik und nicht die Technik an mich.

Zurück zu meiner ursprünglichen Aussage:

Semantischer Code ist durchaus ehrbar und erstrebenswert,
ABER solange CSS nicht alles kann, MUSS auf Tabellen
zurückgegriffen werden (dürfen).

So und nun Schluss.
Ich poste das Problem gerne in einen Monat gerne nochmal :)

[Detlef G.]

Hallo mark

Die unteren drei DIV-Elemente sollen unabhängig
von der Höhe des Inhaltes immer bis zum Browserende
gehen.

Warum müssen die _Elemente_ bis zum Browserende gehen?

Es geht doch um das Layout, dazu muss es doch nur so aussehen.

Das ist auch so erreichbar: http://d-graff.de/demos/selfhtml/kopfunddreispalten1.html.

Auf Wiederlesen
Detlef

[Candid Dauth]

Heißa, mark,

----------------------------- Browser
|                           |
| DIV height:100px;         |

---

Ist doch kein Problem! Dem Bereich mit den drei Spalten weist du einfach min-height:100% zu, womit sie mindestens so hoch sind wie das Browserfenster. Zusätzlich definierst du einen Abstand von oben von 100px. Den oberen Bereich positionierst du absolut.

• Die beiden äußeren Spalten werden gefloatet, wieder mit einer min-height.
• Am Ende der mittleren Spalte kommt noch ein HTML-Element das die beiden Spalten wieder cleart.

Ansonsten erinnert dein Design sehr an jenes Tabellenlayout, das es früher mal im Internet gab. Mit CSS ist mehr möglich. Nutze die Möglichkeiten und erstelle ein individuelles Design!

Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)

[Maz]

Moinsen,

Das ganze ist in der Tat sinnvoll und ist nicht mit Flash zu vergleichen. Hier einige Links zur Nutzung von DIVs (anstelle Tabellen für das Layout der Seite) in Verbindung mit CSS. Es geht nicht darum, Tabellen abzuschaffen, aber diese sind für tabellarische Zwecke gedacht, der "Missbrauch" zum layouten einer Webseite war ursprünglich nicht vorgesehen.

Warum Tabellen zum Layouten dumm sind: http://seybold.jan-andresen.de

das Prinzip des Box-Modells, ganz wichtig zum grundsätzlichen Verständnis:
http://de.selfhtml.org/css/formate/box_modell.htm
und
http://www.css4you.de/wsboxmodell/index.html

Excellente CSS Referenz, hier das Kapitel mit besipielen für "DIV-layouts": http://www.css4you.de/wslayout1/index.html

Was man alles mit CSS machen kann: http://www.stunicholls.myby.co.uk/index.html

Templates für viele Layouts: http://intensivstation.ch/templates/

ohne Ende Beispiele wie Webseiten mit CSS gestaltet werden können:
http://www.csszengarden.com

[Cheatah]

Hi,

mir in letzter zeit öfter zu Ohren gekommen, das dass verwenden von table altes html wäre

nö, zum Strukturieren tabellarischer Daten ist es nach wie vor das einzige Mittel. Zu anderen Zwecken, beispielsweise der Erstellung eines Layouts, ist sind Tabellen natürlich denkbar ungeeignet.

und das nun div der absolute moderne weg ist.

Ebenfalls nö. Der absolut "moderne" Weg ist semantisches Markup, also HTML im Sinne von HTML: <p> für Absätze im Fließtext, <h1> für Überschriften ersten Grades, <ul> für unsortierte Listen (beispielsweise typische Navigationen), <table> für tabellarische Daten, <address> für Adressen, <blockquote> für Zitatblöcke, <em> und <strong> für betonte Stellen, ..., und ja, ab und zu auch ein <div> oder <span>, aber eben selten und wohldurchdacht. Insbesondere bedeutet es, dass HTML *unter gar keinen Umständen* der Darstellung dient - dazu gibt es CSS. Erstelle also zunächst den HTML-Code, ohne Dich auch nur im Ansatz darum zu kümmern, wie es vielleicht mal dagestellt werden soll.

ist an der Sache wirklich was dran??? oder ist das nur so eine Phase wie vor einigen Jahren mit flash???

Die Phase nennt sich "Erwachsensein", bisher hatten wir maximal die Pubertät.

Cheatah

[Gunnar Bittersmann]

Hi Cheatah,

<ul> für unsortierte Listen (beispielsweise typische Navigationen)

IMHO sind die Items in einer Navigationsliste sortiert. Welcher User möchte schon jedesmal eine andere (zufällige) Reihenfolge? Also nicht doch lieber ol für Navigationslisten, bis Browser XHTML 2 und nl unterstützen?

Ist mal wieder Krümelkackerei, da typischerweise Bullets/Numerierungen nicht angezeigt werden. Aber wenn’s am Ende nur um die Darstellung geht, könnte man ja auch br …

Gunnar

[Ashura]

Hallo Gunnar.

IMHO sind die Items in einer Navigationsliste sortiert. Welcher User möchte schon jedesmal eine andere (zufällige) Reihenfolge? Also nicht doch lieber ol für Navigationslisten, bis Browser XHTML 2 und nl unterstützen?

Aber eine Nummerierte Liste suggeriert auch meist automatisch eine Reihenfolge bzgl. der Wertigkeit. Und bei Navigationslisten sind doch meist die Listenpunkte untereinander gleichwertig.
Deshalb denke ich, dass dies eine ungeordnete Liste am Besten verdeutlicht.

Aber wenn’s am Ende nur um die Darstellung geht, könnte man ja auch br …

Wage es bloß nicht... ;)

Gruß, Ashura

[peterS.]

Gruß Nicole,

mir in letzter zeit öfter zu Ohren gekommen, das dass verwenden von table
altes html wäre und das nun div der absolute moderne weg ist.

Nimmt man diese beiden Aussagen wörtlich, ist der erste Teil schlichtweg
   falsch und der Zweite mehr als verwirrend.

Sicherlich war gemeint, daß es nicht mehr zeitgemäß sei, Tabellen als
   Layouthilfen zweckzuentfremden und stattdessen auf »HTMLDivElement«e
   zu setzen.
   Sieht man dies als grobe Verallgemeinerung, ist dem fast schon zuzustimmen.

<ansprache class="lanzebrechend">

Wenn man nun also von einem *modernen Weg* sprechen will, sollte man
     sich bewusst machen, wofür HTML entworfen wurde - die Abkürzung steht
     immer noch fuer »Hypertext Markup Language«.

- Wir bedienen uns einer Auszeichnungssprache.
     - Jedes Sprachelement gibt Dingen eine bestimmte Bedeutung, indem es
       diese bezeichnet.
     - Werden diese Elemente entsprechend ihrer Bedeutung verwendet, spricht
       man auch von »semantisch korrektem HTML«.
     - Die Semantik schafft Struktur, indem sie Informationen ordnet.
     - Geordnete Informationen wiederum sind schneller erfassbar als
       unstrukturierte Inhalte und deshalb sowohl für den Menschen als
       auch für Maschinen leichter zugänglich.

In diesem Zusammenhang fallen dann oft die gar nicht mehr so neuen
     Schlagworte Zugänglichkeit (»Web-Accessibility«) und Barrierefreiheit.

»Aussagekräftiges Markup« ist ein Weg, der in den letzten Jahren über-
     wuchert war und nur neu beschritten werden und dabei Stück um Stück
     von seinen Wiederentdeckern freigeräumt und zu einer breiten Allee
     ausgebaut werden will.

</ansprache>

zurück zur Antwort:

Der Einsatz von "div"s als semantisch aussagelosen block-Elementen ist zu
   Layoutzwecken absolut wünschenswert, wenn er sich ausschließlich auf
   das Gruppieren von anderen HTML-Elementen beschränkt.

Tabellen sind auch weiterhin als *modern* anzusehen, wenn sie sich auf
   die Auszeichnung tabellarischer Daten beschränken.

CSS ist das Werkzeug Deiner Wahl, um Deinen Inhalten eine visuell
   ansprechende Garderobe auf den Leib (»BODY«) zu schneidern.

so long - peterS. - [e-mail]

[Cyx23]

Hallo,

... table altes html wäre und das nun div der absolute moderne weg ist.

ist an der Sache wirklich was dran??? oder ist das nur so eine Phase wie vor einigen Jahren mit flash???

die Mängel von CSS sind eigentlich schon lange bekannt und der
Einsatz von CSS, auch ohne Divs, ist zunächst auch keine
Modeerscheinung.

Allerdings wird oft übersehen oder verdrängt wie leistungsfähig eine
Tabelle als Layoutwerkzeug sein kann, gerade auch unter dem Aspekt
der Zugänglichkeit für viele Browser.

Grüsse

Cyx23