tabellenloses design, layout mit <div>'s

Bestimmt ist es möglich eine sauber Website ohne Tabellen zu bekommen. Hat man float, clear, margin. auto ... im Griff macht es keine Schwierigkeiten eine saubere Seite aufzuziehen.
Nach einiger Zeit hat man auch genügend Vorlagen auf Lager um jedes Problem lösen zu können. div mit id versehen machen es wunderbar leicht DOM rauf und runter mit Java Script auf Knoten zu greifen zu können. Solange ich eine kontrollierte Umgebung habe, ist div und css so oder so der Trumpf - Keine Frage.
Sobald man aber Webemittel von Affiliates, Homepagetools, Applets, Flash Gimmiks und so einbaut wird das sauber Valide Desing durch allerlei iframes, Minitabellen und der Gleichen Elemente mehr versaut.
Für so eine Umgebung nehme ich eine Tabelle, für eine Umgebung die ich nicht 100% selber geschaffen habe, habe ich auch nicht 100% Verantwortung. Also warum in so einem Fall rumurksen und nicht gleich von Anfang an eine Tabelle nehmen?
Auf die Frage warum eine undurchschaubare Div-Suppe besser als eine saubere Tabelle sein soll habe ich noch keine stichhaltigen Argumente ausser Allgemeinplätzen gehört.
Antoine
PS: Die Websites von twin4matic sind eher einfache nicht komplexe Sites, dafür optisch wunderschön. So was ist einfach mit div zu machen
 
Das Wichtigste wurde sicher schon gesagt. Dieser Linkkönnte vielleicht für Umsteiger noch von Nutzen sein - ein Ausschnitt aus meinen Kursen für Volkshochschule und Uni-Leute. Insbesondere daslege ich Neulingen ans Herz. Ich weihe in diesen Kursen zumeist blutige AnfängerInnen in die Thematik ein (12-20 Stunden Workshop), die selbst Websites machen wollen.

Ich habe die Erfahrung gemacht, dass "mit Tabledesign Einsteigen, aber sicher auch CSS mit auf den Weg Geben" die didaktisch beste Lösung ist für Leute, die das noch nie gemacht haben. Wer noch nie Objekte webdesignmässig auf dem Bildschirm positioniert hat, ist ganz froh, fixe Grenzen auf dem Bildschirm zu haben.

Und ich gebe zu: Wenns "quick & dirty" sein muss und der Auftraggeber null Budget hat (solls ja geben...), bin ich mit einem Tabellengerüst immer noch schneller, und der Kunde checkt die Betreuung auch besser, da er meist sowas wie WYSIWYG hat. Aber da bin ich etwas konservativ und streite regelmässig mit meinen Berufkollegen...
 
QUOTE Auf die Frage warum eine undurchschaubare Div-Suppe besser als eine saubere Tabelle sein soll habe ich noch keine stichhaltigen Argumente ausser Allgemeinplätzen gehört.

Das liegt wohl daran, wie die CSS-Umsetzung erfolgt. Wenn jemand Tabellen mit Divs nachbaut, dann wirds in der Regel auch Murx und dann solte man mMn auch lieber bei Tabellen bleiben.

Mal ein Beispiel:
Reiner HTML-Code für komplett zentrierten Splah-Screen (Die Styles lasse ich weg, weil ich es immer wiederverwenden kann):
Tabellenlayout:

CODE <table width="100%" height="100%" celpadding="0" cellspacing="0">
<tr>
<td> </td>
<td><img src="logo.png" height="500" width="600" alt=""></td>
<td> </td>
</tr>
</table>


CSS-Layout:

CODE <div id="splash"><img src="logo.png" height="500" width="600" alt="" /></div>


Oder eine horizontale Navigation (oft gesehen):
Tabellen:

CODE <table width="750" celpadding="0" cellspacing="0">
<tr>
<td width="150"><a href="seite1.html"><img src="punkt.gif" alt="">Punkt 1</a></td>
<td width="150"><a href="seite2.html"><img src="punkt.gif" alt="">Punkt 2</a></td>
<td width="150"><a href="seite3.html"><img src="punkt.gif" alt="">Punkt 3</a></td>
<td width="150"><a href="seite4.html"><img src="punkt.gif" alt="">Punkt 4</a></td>
<td width="150"><a href="seite5.html"><img src="punkt.gif" alt="">Punkt 5</a></td>
</tr>
</table>


CSS(Bilder werden einmalig als Hintergrundbild per CSS festgelegt):

CODE <ul id="navi">
<li><a href="seite1.html">Punkt 1</a></li>
<li><a href="seite2.html">Punkt 2</a></li>
<li><a href="seite3.html">Punkt 3</a></li>
<li><a href="seite4.html">Punkt 4</a></li>
<li><a href="seite5.html">Punkt 5</a></li>
</ul>


Die CSS-Angaben lasse ich weg, denn sie stehen sowieso in einer externen CSS-Datei und müssen nicht bei jedem Seitenabruf erneut abgerufen werden, sondern werden vom Browser gecacht, wohingegen ein Großteil der Auszeichnungen im Tabellenlayout stehen und der ganze Wust jedesmal neu übertragen werden muß. In der Regel potentieren sich ja die Tabellen, je nach verwendeten Elementen.
Div-Suppen ergeben sich in der Regel dort, wo <div>s nicht sinnvoll eingesetzt werden. Zum Beispiel anstatt eines <p> oder sinnlose Umschließungen a la Tabellennachbau.

Weiterhin:
Will ich meine horizontale Navigation mit einem anderen Navigationsbildchen (das punkt.gif im Beispiel oben) versehen, muss das in jeder Datei jedesmal neu ersetzt werden(vielleicht überspitzt in Zeiten von includes und "ateiübergreifendes Suchen&Ersetzen", wenn ich Tabellen verwende. Verwende ich CSS muß ich nur einen Eintrag in meiner CSS-Datei ändern und fertig. Möchte ich gar aus meiner horizontalen Navi nun doch eine vertikale machen, muß ich die ganze Tabelle auseinanderdröseln und das auf jeder Seite. Beim CSS-Layout muß ich nur wenige Änderungen an den Styles vornehmen und schon sieht die Navi ganz anders aus; der Quellecode in der HTML-Datei bleibt dagegen gleich.

Außerdem: Wie man an den Beispiellinks von Andi schön sieht, ist man nicht mehr auf die rechteckige Struktur der Tabellen angeweisen, sondern man kann Dinge ohne große Probleme und Tabellenverschachtelungen "aufeinanderlegen".
 
Hallo Antoine

QUOTE Auf die Frage warum eine undurchschaubare Div-Suppe besser als eine saubere Tabelle sein soll habe ich noch keine stichhaltigen Argumente ausser Allgemeinplätzen gehört.
Antoine

Tabellen für ein Design können nicht sauber sein, denn eine Tabelle ist für tabellarische Daten gedacht,
nicht um ein unsichtbares Raster für das Layout zu ziehen.
Ich glaube dir ist der Begriff "Div-Suppe" nicht ganz klar, hier ist eigentlich genau der Punkt.
Man sollte immer das sematisch korrekte Html Element auswählen,
für eine Liste <ul>, <ol>, ... für Absätze <p>, etc.... und für tabellarische Tabellen eben <table>.
Wenn man das nicht macht, hat man eine Div Suppe, wenn man sich aber an diese Regel hält, ist es keine Div Suppe.
Auch wenn es mal ein wenig mehr Divs sind, um ein komplexeres Layout zu bewerkstelligen.

Eine Seite die das ganze schön aufzeigt: http://css.fractatulum.net/sample/suppe/div_suppe1.htm


QUOTE PS: Die Websites von twin4matic sind eher einfache nicht komplexe Sites, dafür optisch wunderschön. So was ist einfach mit div zu machen

Jep, unser Moto ist ja auch: simple & smart
Danke für das Kompliment, freut uns zu hören :)

Nur um eines klarzustellen, man kann alles, Betonung auf _alles_, mit CSS und Divs machen,
es gibt keine Grenzen.
Aber natürlich gibt es mehr Aufwand, vorallem wenn man noch kein Experte ist und wenig Übung darin hat.


Gruss Peter
 
Oh Mann .... wer wärmt diesen Thread denn immer wieder auf?
Startdatum war: Mo 7.6.2004, 10:22

Ich dachte ich trau meinen Augen nicht ...

Men Beitrag ist zwar oT, aber ich konnte mir den dann doch nicht verkneifen.
 
naja, obwohl dieser Thread schon 2 1/2 Jahre alt ist, so ist er doch brandaktuell...
bin zurzeit gerade damit beschäftigt, ein Newsportal in typo3 umzusetzen, das Layout muss zu 100% CSS-basierend sein, also keine Tabellen...
Leider gibts andauernd wieder neue probleme mit CSS-Positioning. Dennoch werden wir auf CSS-P setzen, dies aus folgenden Gründen:

1. keyword-density: bei content-basierenden websites zählt die keyword-dichte. und selbst wenn man ein sehr komplexes CSS-layout hat, so kann man dies in ein externes Stylesheet auslagern, womit die Dichte des Contents in der eigentlichen HTML-Seite grösser ist.

2. Trennung von Design und Inhalt: mit CSS ist es viel einfacher das Design von inhalt zu trennen. Um die Schriftart zu ändern brauche ich mit CSS eine einzige Code-Zeile zu ändern, ohne CSS wäre dies äusserst aufwandig.

3. Ladezeiten: bei grösseren Seiten durchaus ein Grund für CSS. Das eingebundene CSS-Stylesheet braucht ein einziges mal geladen zu werden; tabellen müssen jedoch bei jedem Seitenaufruf neu geladen werden...

nun zur Frage, wann man auf CSS und wann auf Tabellen setzen sollte:
Tabellen kann man bei kleineren oder sehr grafiklastigen Websites benutzen. CSS sollte man bei Websites mit viel Content wie etwa Blogs, News-Portale oder Online-Shops verwenden, da man einen suchmaschinenfreundlicheren Quellcode bekommt.

 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben