# Design mit Tabellen oder Divs umsetzen?



## =fire= (22. Mai 2009)

Hallo,

wollte mal Fragen was allgemein die gängingere / bessere Variante ist Design umzusetzen? Mit normalen Tabellen oder eher mit divs? Was sind Vor-/Nachteile?

Mfg


----------



## ZodiacXP (22. Mai 2009)

Sowas einfaches fragt man den Gockel  
Dann kriegt man dieses Ergebnis:
http://www.google.com/search?hl=de&q=tabellen+oder+div+im+design&btnG=Suche&lr=
Liest:
http://www.jex-treme.de/forum/archive/19633/thread.html
Und liest:
http://www.css4you.de/wslayout1/index.html

Ich finde "Barrierefreiheit" spielt hier auch noch eine Rolle  Ein Screenreader der ein Tabellendesign liest, zum Beispiel, gibt total unverständliche Sachen aus.

Also:


----------



## chmee (22. Mai 2009)

Ganz eindeutig : Divs/Layer.

Neben der eigentlichen Bestimmung der Tabelle (nämlich Tabellendaten zu visualisieren) ist die Definition der Zellen (Größe zB) mitunter zeitaufreibend und nervig. 

Und ich kann Dir Eines aus Erfahrung sagen : Nachdem ich auf Divs umgestiegen bin, war ich endlos glücklich ob der Einfachheit in Bezug auf Änderungen und Umgang.

mfg chmee


----------



## Maik (22. Mai 2009)

Moin,

immer wieder auf's Neue zu dieser  "Konfessionsfrage" empfehlenswert: Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten.

mfg Maik


----------



## Sprint (22. Mai 2009)

Ganz so eindeutig sehe ich die Sache nicht. Gerade wenn es um Tabellen (z.B. gleiche Höhen in Reihen) geht, sind für mich Tabellen immer noch unverzichtbar. Und wenn man sich mal die Probleme ansieht, die speziell der IE mit Layern hat, gewinnt für mich das Wort "barrierefrei" eine ganz neue Bedeutung. 
Ich würde die Tabellen also nicht so einfach verbannen und je nach Einzelfall entscheiden, was besser ist.
Sehr interessant in diesem Zusammenhang ist auch dieser Artikel von  Smashing Magazine


----------



## Maik (22. Mai 2009)

Sprint hat gesagt.:


> Ganz so eindeutig sehe ich die Sache nicht. Gerade wenn es um Tabellen (z.B. gleiche Höhen in Reihen) geht, sind für mich Tabellen immer noch unverzichtbar.


Inhalt und Layout sind zu trennen, und für diese "Aufgabenstellung" stellt CSS auch technische Möglichkeiten bereit - siehe AnyColumnLongest.


Sprint hat gesagt.:


> .Und wenn man sich mal die Probleme ansieht, die speziell der IE mit Layern hat, gewinnt für mich das Wort "barrierefrei" eine ganz neue Bedeutung.


Welche Probleme hat denn speziell der IE mit "DIV-Layern", die sich nicht mit einem entsprechenden CSS-Workaround lösen ließen?

Zumal diese "Bugs" in der aktuellen Browser-Version ausgeräumt sind, wie z.B. die fehlerhafte Interpretation des Boxmodells, der "Double-Float-Margin-Bug", oder "3px-Gap-Bug", um nur ein paar der altbekannten Probleme im IE6 zu nennen.

Oder willst du wegen einer Randgruppe, die noch einen Browser aus dem vergangenen Jahrhundert nutzt, die Webstandards unter den Tisch kehren?

mfg Maik


----------



## Sprint (22. Mai 2009)

Maik hat gesagt.:


> Welche Probleme hat denn speziell der IE mit "DIV-Layern", die sich nicht mit einem entsprechenden CSS-Workaround lösen ließen?


Position:fixed bei horizontaler Zentrierung z.B. ist bis einschließlich IE 7 nicht machbar. Außerdem sind es für mich gerade diese ständigen Workarounds, die mich tierisch nerven. M$ hält sich an keine Standards und wir dürfen es ausbaden. Außerdem weiß man nie, ob solche Sachen nach dem nächsten Browser Update noch funktionieren.



Maik hat gesagt.:


> Zumal diese "Bugs" in der aktuellen Browser-Version ausgeräumt sind, wie z.B. die fehlerhafte Interpretation des Boxmodells, der "Double-Float-Margin-Bug", oder "3px-Gap-Bug", um nur ein paar der altbekannten Probleme im IE6 zu nennen.
> 
> Oder willst du wegen einer Randgruppe, die einen Browser aus dem vergangenen Jahrhundert nutzt, die Webstandards unter den Tisch kehren?
> 
> mfg Maik


Solange der 7er noch Standard ist, der 6er immer noch weit verbreitet und selbst der 5.5er noch lebt, muß man sich mit diesen Dingen beschäftigen. Und solange es M$ nicht schafft, ein Betriebssystem zu basteln, das auch auf nicht super aktuellen Maschinen läuft und das die Kunden auch wollen (also nie), wird sich an der Situation auch nichts grundlegendes ändern.
Ich würde lieber heute als morgen diese Randgruppe ignorieren, nur leider ist diese Randgruppe noch immer über 60% stark. Und die Randgruppe kann noch so klein sein, solange der Auftraggeber mit 5.5 oder 6 testet, kannste gar nix gegen machen.
Außerdem kann von Unter-den-Tisch-kehren gar keine Rede sein. Nur muß man sich halt mit zwei oder drei verschiedenen CSS Dateien rumschlagen.


----------



## Maik (22. Mai 2009)

Sprint hat gesagt.:


> Position:fixed bei horizontaler Zentrierung z.B. ist bis einschließlich IE 7 nicht machbar.


Kann ich nicht bestätigen:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-05-22">

<title>tutorials.de | demo_Sprint</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#head {
position:fixed;
top:0;
left:50%;
margin-left:-400px;
width:800px;
height:100px;
z-index:2;
background:#ddd;
}
#wrapper {
position:relative;
width:800px;
margin:0 auto;
}
#content {
margin-top:100px;
}
-->
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

</head>
<body>

<div id="head">head</div>
<div id="wrapper">
     <div id="content">
          <p>foobar -start-</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar</p><p>foobar -end-</p>
     </div>
</div>

</body>
</html>
```

Erfolgreich getestet in IE 5.5, 6, 7

mfg Maik


----------



## chmee (22. Mai 2009)

> ..solange der Auftraggeber mit 5.5 oder 6 testet, kannste gar nix gegen machen. ..


Das ist viel Wahres dran, aber bei der letzten Seite habe ich ganz strikt angesagt, dass diese Seite keine Browser, die älter als 5 Jahre alt sind, unterstützt, somit war auch das Thema IE6-SP2 weg vom Tisch. Ich habe ihm - weil ich lieb war  - eine Browserweiche und damit ein Ausweichdesign ohne mootools-Effekte für die alten IEs gebaut. Naja, es war dann eine Pflicht, ein sauberes Produkt mit Alternative abzugeben.

mfg chmee


----------



## Maik (24. Mai 2009)

Maik hat gesagt.:


> Erfolgreich getestet in IE 5.5, 6, 7


Im IE8(Beta) soeben auch 

mfg Maik


----------



## thomasbe (2. Juni 2009)

Ich finde ne gesunde mischung machts


----------



## chmee (2. Juni 2009)

Witzbold  Zwei Problembaustellen ins Haus holen ?!

mfg chmee


----------



## Maik (2. Juni 2009)

Die gesunde Mischung ist der Einsatz von Tabellen, wo sie semantisch ihre Daseinsberechtigung besitzen, nämlich Daten in tabellarischer Form auszugeben, aber nicht um mit ihnen ein Design / Seitenlayout zu entwerfen.

mfg Maik


----------



## thomasbe (2. Juni 2009)

Euch kann man es ja auch nicht recht machen 

Meiner Meinung nach gibt es keine optimale Lösung bei jeder Homepage kannst du was anderes gebrauchen. Außerdem ist es mit tabellen leichter zu gestalten ;-)


----------



## Maik (2. Juni 2009)

thomasbe hat gesagt.:


> Außerdem ist es mit tabellen leichter zu gestalten


Wie man unschwer an deiner Website sieht.


			
				Freaks and Nerds hat gesagt.:
			
		

> ```
> <body>
> <div align="center">
> <table align="center" id="main_top" cellspacing="0" cellpadding="0" border="0" >
> ...



mfg Maik


----------



## thomasbe (2. Juni 2009)

und was ist daran jetzt so schlecht... mithilfe von divs und tabellen habe ich die seite gemacht. Das ist meine gesunde Mischung


----------



## Akeshihiro (2. Juni 2009)

Diese Thematik ist doch totaler Schwachsinn! Vor nicht mal zwei Jahren hat es keine Sau gekümmert, ob die Homepage mit Tabellen oder Divs gestaltet wurde und heute wird in so ziemlich jedem Forum darüber gestritten, was besser ist. Tabellen sind nicht dynamisch, Divs sind sehr leicht mit Stylesheets bearbeitbar, blabla. Mit Stylesheets kann man alle Elemente ansteuern, auch Tabellen und im Gegensatz zu den Divs baut ne Tabelle zwangsweise eine Art Tabellengitter auf, in dem die Inhalte nicht so ohne weitere raus können, man hat eine feste Struktur und das eignet sich besonders gut für das Grundgerüst der Homepage selbst. Die Divs kann man für dynamischen Kram verwenden.

Früher hatte man damit auch keine Probleme, aber heute gibts überall nur Streit darüber. Ich versteh nicht so wirklich das Problem dahinter, es funktioniert nämlich beides und wer was einsetzt, muss halt jeder für sich selbst entscheiden und ich bin auch der Meinung, dass eine gute Mischung besser ist als die stupide Nutzung einer der Varianten, denn beide haben Vor- und Nachteile.


----------



## thomasbe (2. Juni 2009)

Dankeschön... genau meine Meinung


----------



## Maik (2. Juni 2009)

thomasbe hat gesagt.:


> und was ist daran jetzt so schlecht... mithilfe von divs und tabellen habe ich die seite gemacht. Das ist meine gesunde Mischung


Tolle "gesunde" Mischung - ein DIV-Block, der lediglich der horizontalen Zentrierung dienen soll, und dann folgt die Tabellenflut, die den Quellcode unnötig aufbläht, und die Semantik darin mit der Lupe gesucht werden kann 

Diesen einen DIV-Block kannst du dir im Markup aber auch schenken, denn das Attribut align="center" im *<table>*-Tag sorgt schon für ihre horizontale Zentrierung.

Einfach lesen, was daran schlecht ist: Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten.

mfg Maik


----------



## chmee (3. Juni 2009)

Es gibt einen Grund für Tabellen : 





> die Semantik - Zitat Maik


 Wenn man sich zu Herzen nimmt, wozu Tabellen gedacht sind, sollte einem klar sein, wann und wie man sie benutzt. In dem Link wird beschrieben, dass das Tabellenlayout ein Relikt aus alten Zeiten ist, als Design noch eine Sache der Unmöglichkeit war. Es spricht ALLES für Layer und nichts außer Gewohnheit für Tabellenlayout.

Nebenbei, schon mal Tabellenlayout auf Barrierefreiheit untersucht ?! Fehlanzeige.

mfg chmee


----------



## Dr Dau (3. Juni 2009)

Hallo!

Erstmal sollte die Frage geklärt werden welche Zielgruppe Du erreichen willst.

Meine Seiten z.B. erstelle ich nur für den Eigenbedarf.
Ich kann also ruhigen Gewissens auf die Möglichkeiten und Meinungen anderer schei***. 
(Genauso sehe ich es bei Seiten nach dem Motto "hallo, hier bin ich und das bin ich".)
Und ja, ich gestallte meine Seiten mit Tabellen. 
Tabellen haben z.B. den Vorteil dass Zelleninhalte nicht ausbrechen können und im schlimmsten Fall andere Elemente überlagern.
Bei einem DIV basierten Layout kann sowas schnell mal passieren.
Als Beispiel sei hier mal Lycos genannt.
Dort habe ich es schon erlebt dass ein Element ein anderes Element (Loginfenster) vollständig überdeckt hat. 
Und ich gehe mal einfach davon aus dass die Seiten von Lycos nicht von irgendwelchen "Hobbyprogrammierern" erstellt wurden. 

Willst Du mit den Seiten aber z.B. Geld verdienen, solltest Du diese benutzerfreundlich und barrierefrei gestallten.
Denn nur so erreichst Du ein möglichst breites Publikum, zu dem z.B. auch Blinde gehören.

Auf der anderen Seite kannst Du aber auch per Gesetz dazu verpflichtet sein die Seiten barrierefrei zu gestallten.
Z.B. dann wenn Du die Seiten für die Bundesverwaltung erstellst.
Auf Landesebene sieht es zwar (noch) anders aus, aber auch dort hält man sich (verständlicherweise) i.d.R. an die BITV.
Siehe auch: Wikipedia - Barrierefreies Internet

BTW: Um es mal zu verdeutlichen wie "gross" mein Interesse ist meine Seiten der Öffentlichkeit nahezubringen.....
Ich befasse mit mit der Webseitenerstellung nun schon seit ca. 10 Jahren (ja, damals waren auch meine Seiten, wie es zu der Zeit üblich war, an allen Ecken und Kanten wie wild am blinken und blitzen  ).
Trotzdem sind meine Seiten bis dato nicht über Google&Co zu finden. 
Sowas ist natürlich auch ein wirksamer Schutz gegen Spam&Co. 

Fazit: welche Technik nun "besser" ist, hängt allein von dem angestrebten Ziel ab.

Gruss Dr Dau


----------

