Ich habe es im "Webdesign Pics"-Thema schon angesprochen, aber ich möchte da gern nochmal eine Diskussion entfachen und andere Meinungen hören (nicht, dass ich das andere Thema damit vollnerve ^^ ). Meine Frage: Sind Tables out und wurden von positionierbaren DIV-Elementen technisch überholt? Eine kurze Zusammenfassung, was in zuvor besagtem Thema schon geschrieben wurde (mit Kommentaren):

Zitat:

theDon: Tabellen sind nicht out. Es ist out, Tabellen fuer das Design zu missbrauchen.

Zitat:

McScore: Was spricht gegen ne Tabelle?

Zitat:

nox: Einfach alles. -_-

Zitat:

Snake_Shit: Um eine Sache klarzustellen:
Das div Elelement ist keineswegs ein Ersatz für Layouttabellen. Der Ansatz anstatt mit Tabellen jetzt nur noch mit "divs" zu arbeiten, führt ebenfalls in die falsche Richtung (Stichwort DIV-Suppe). Für designtechnisches, wie z.B. Farben, Positionierung, Schriftart, sollte man hingegen nur noch CSS verwenden.
Also erst den Inhalt sinnvoll mit HTML auszeichnen und dann das Design mit CSS gestalten.

wohl eher [webdesign]...
Ich hab da noch was in den Bookmarks, vielleicht interessierts: http://www.reiermeister.de/webauthoring.tabellen-design-durch-div-layer-ersetzen.html

( www.opera.com | www.miranda-im.org )
http://www.ironoak.de

Zitat:

no.plan postete

Zitat:

theDon: Tabellen sind nicht out. Es ist out, Tabellen fuer das Design zu missbrauchen.

Das bitte erklären, versteh ich nämlich nicht -.- .

ich wage mal die These dass Tabellen wie sie meistens eingesetzt werden (z.B. die Quotes im ThwBoard) sich fast immer durch CSS ersetzen lassen.

---------------------------------
www.killerlevels.de Editing mit Quake III Arena, Urban Terror, Elite Force

zitate und code snippets wären besser mit dem blockquote-element gemacht. für die auflistung der posts sind tabellen richtig.

ich persönlich arbeite gerne mit tabellen und erstelle so komplexe webseiten. Mir ist das endergebnis wichtig, und das ist bei mir genau so wie ich es haben will und fehlerfrei in allen browsern.

Welchen unterschied machen tabellen im gegensatz zu css und divs?
Solange das endergebnis stimmt spielt das doch garkeine Rolle imo. Vielleicht ist die html datei um 1-2kb kleiner, aber wen juckt das schon? Meine Leitung packt sich bis zu 700kb pro sekunde und ein modem würde(wenn man tabellen verwendet hat) auch nur 1/3 sekunde länger brauchen um die seite zu laden. Also an der Dateigrösse kanns schonmal nicht liegen...

Aber was haben die divs sonst für vorteile? Ausser Dateigrösse und code übersichtlichkeit versteht sich.

Ganz nebenbei frag ich mich, wer sich den code einer webseite anguckt. Welchen Grund sollte man dazu haben? oO

Wahrscheinlich wäre ich anderer meinung würde ich css und die "div-suppen-programmierung" beherrschen. Bin allerdings zu Faul CSS zu lernen, und ich sehe (noch) keine Vorteile in der Programmierung ohne Tabellen.

eisfach du sprichst mir aus der seele :)
obwohl man mit css sehr wohl auch viel schneller und effektiver arbeiten kann

ich kombiniere, wenn ich denn mal was mache, beides und fahre damit ganz gut

"selbermachen rockt am meisten :D" - -LeJean-

wenn man sein design mit tabellen gestaltet wird der inhalt mit dem design vermischt. es ist nicht mehr klar erkennbar, was design, und was eigentlich content ist. (ausser dem humanen betrachter im grafik-fähigen browser)

damit schafft man eine gewisse benutzerunfreundlichkeit, weil seiten (meistens) nicht ordentlich ausgedruckt werden können und webseiten auf pdas oder über wap nicht ordentlich angezeigt werden können. auch ein textbrowser (wie im wap) kann mit seiten die tabellendesign verwenden nichts anfangen.

das gute an divs und css ist, dass sämtliche designelemente im css-code stehen und so ausgebelndet werden können.

"Herr Keuner sagte: «Schwierig ist, diejenigen zu belehren, auf die man zornig ist. Es ist aber besonders nötig, denn sie brauchen es besonders.»" - Bertolt Brecht
-
"Hier gibt's was auf die Ohren" - Thewall.de bei last.fm (Was ist last.fm?)

- das man es nicht ausdrucken kann finde ich nicht schlimm. wenn etwas ausgedruckt werden muss kann man immernoch nen extra drucken-button anbringen.
- für wap würde ich eine extra wap optimierte seite machen
- pdas müssen halt scrollen wenn nur 640x480 oder weniger pixel zur verfügung stehen. Ich kenne keine seite die in dieser auflösung nicht zu gross ist.

Hab noch immer keinen ordentlichen pluspunkt für nicht tabellarische designs gelesen.

Zitat:

EisFach postete
- das man es nicht ausdrucken kann finde ich nicht schlimm. wenn etwas ausgedruckt werden muss kann man immernoch nen extra drucken-button anbringen.
- für wap würde ich eine extra wap optimierte seite machen
- pdas müssen halt scrollen wenn nur 640x480 oder weniger pixel zur verfügung stehen. Ich kenne keine seite die in dieser auflösung nicht zu gross ist.

mhm... also das hier ist thw bei 800x600:

Nen pda user müsste scrollen, obwohl divs verwendet wurden -> kein unterschied zu tabellen.

Ich sehe das pragmatisch: Tabellenlayout erzeugt wahnsinnig viel Traffic, die Modem/ISDN/GPRS Usern zeitlich auf den Sack geht. CSS Layout dagegen ist sparsamer, was Traffic betrifft: Wenig Content erzeugt viel Aha Effekte.

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)

ja aber 2kb mehr oder weniger machen doch auch nicht viel aus. Hab grad mal nachgeguckt, hab nen tabellen layout das hat knapp unter 2kb. Wenn man das nun in css machen würde könnte man nichtmal 1sek. schnellere ladezeit einrichten für modemuser.
Denke nicht das css einen grossen vorteil gegenüber html(tabellen) hat, was die datei grösse angeht.

Kann mir sonst niemand einen Vorteil von css gegenüber html tabellen nennen, welcher halbwegs nachvollziehbar ist? :/

Zitat:

EisFach postete
Nen pda user müsste scrollen, obwohl divs verwendet wurden -> kein unterschied zu tabellen.

Divs vs. Tabellen hat allerhoechstens am Rande etwas mit scrollen-muessen-bei-winzaufloesungen zu tun. Es geht viel mehr darum, dass die Seite auch von exotischen Browsern sinnvoll aufbereitet werden kann. Zum Beispiel, falls die Ausgabe eben nicht auf einem Monitor, sondern auf einer Braille-Zeile stattfindet. Auch zum Drucken kann man einfach per Stylesheet fuer den Print-Media-Typ bestimmte Elemente, wie zum Beispiel die Navigationsleiste, ausblenden.

\o tanz den naziprau! o/

And more than ever, I hope to never fall,
Where enough is not the same it was before

Gerne: IE braucht afaik erstmal die ganze Tabelle, ehe der Content kommt. Warum also lange auf irrsinnige Tabellenlayouts warten, wenn man's mit CSS sehr viel schneller auf den Screen bekommt?

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)

Was der User sieht:
- Dateigröße: Das sind nicht 1-2 kb, das sind schnell mal 70%. Sieht man toll bei cs-clans:
http://www.sinzclan.com/
Dateigröße: 87kb (modem-speed: ~5kb/s -> 17 Sekunden Wartezeit für den Quelltext). davon sind 5kb Text. Mit css würde man max auf 15kb kommen.
- Portierbarkeit: "Darstellung" mit screenreadern, pdas etc.
- Ladevorgang: Erstmal das, was Kriz erwähnt hat, und des weiteren ist es möglich, die Reihenfolge der Elemente im Quelltext gegenüber der Reihenfolge auf dem Bildschirm zu ändern. Also du kannst das Menü, das auf der Seite links oben steht, ans Ende der Datei schreiben, und damit die subjektiven Ladezeiten stark verkürzen, da der Content als erstes geladen wird.
- Druckmöglichkeiten: Geh mal auf Wikipedia und schau dir die Druckvorschau an (z.b. http://de.wikipedia.org/wiki/Deutscher_Bundestag) - da siehst du, was css ist.

Was der Autor sieht:
- Klare trennung von Inhalt und Design. Design in der css-datei, inhalt in der html datei. Wesentlich leichter zu verwalten.
- Extreme flexibilität. Da deine Designelemene alle für sich funktionieren, kannst du sie verschieben, löschen, erweitern etc. wie du willst.
- Eigentlich gehört das zu Punkt eins, aber: Wesentlich übersichtlicherer Code, senkt den Verwaltungsaufwand stark. Beispiel: Die angesprochenen Zitatboxen.
Tatsächlicher Quellcode:
Quellcode:<table align="center" bgcolor="#abd39a" border="0" cellpadding="3" cellspacing="1" width="95%">
<tr>
    <td>
        <span class="smallfont" style="color: rgb(99, 128, 70);">
            <b>Zitat:</b>
        </span>
    </td>
</tr>
<tr>
    <td bgcolor="#ffffff"> <font size="2">
        <b> EisFach postete </b>
        <br> Nen pda user müsste scrollen, obwohl divs verwendet wurden ->
        kein unterschied zu tabellen. </font> </td>
</tr>
</table> Möglicher Code:
Quellcode:<div class="quote">
   <div>Zitat</div>
   <b>Eisfach postete</b>
   <br> Nen pda user müsste scrollen, obwohl divs verwendet wurden ->
   kein unterschied zu tabellen.
</div> So, hab keine Lust mehr, die anderen dürfen wieder.

"tsuji-giri" (japanisch) - ein neues Schwert an einem Passanten ausprobieren

Schade dass ich im Moment absolut keine Zeit habe, Posts zu verfassen die > 1000 Zeichen sind, solche Dinge diskutiere ich immer wieder gerne.

Mit dem Effekt, dass wieder ein beliebiger Webdesigner zurück auf die gute Seite der Macht geholt wird, und fortan Ebenen nutzt.

Mangels Zeit, bitte gleich zu diesem Effekt übergehen, danke ;)

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

Ich glaub' die langen Posts würden auch nichts helfen. Wer die Sache mit Divs und Bildern erst einmal richtig durchexerziert hat, der wird nie mehr freiwillig zurück zu den Tabellen gehen. Das ist die pure Qual.

Wenn man's richtig macht, ist's kleiner, schneller, übersichtlicher, portierbar und was sonst noch alles genannt wurde. Den einzigen "Vorteil" den Tabellen haben können, ist dass man nichts neues lernen muss wenn man schon mit Tabellen jonglieren kann. Und das kann ja kein ernsthaftes Argument sein.

@Eisfach: Hmm, du sagst, du erstellst gern Webseiten mit Tabellen. Aber die SRO-Seite und der Bildupload basieren auf DIVs?!

@K-Putt: Mit Ebenen meinst du DIV-Elemente mit CSS, oder (wohl den z-index)?

@all: Danke für die große Beteiligung. Ich denke ich habe eine Antwort auf meine Frage bekommen: Ich muss mich weiter in DIVs/CSS hineinfuchsen, wenn ich neue Webseiten erstelle! Das mit den Tabellen von früher - was wirklich relativ leicht ist - muss ich aus meinem Kopf so gut wie streichen.
Aber ich bin grad dabei unsere Abiseite zu überarbeiten und scheitere mit DIVs völlig, leider! Und das schon bei den relativ simplen Navielementen.
Konkret: Diese Seite bringt mich zum Verzweifeln. Mag mir jemand helfen (das wäre super nett) oder mir gute Tutorials/Beispiele für die Verschachtelung von DIV-Elementen linken? Bitte. Ich dreh noch durch...

All you need to know:
http://css-discuss.incutio.com/

"tsuji-giri" (japanisch) - ein neues Schwert an einem Passanten ausprobieren

Die sro-Seite ist soweit ich weiss von K-Putt?! Jedenfalls nicht von Eisfach...

Zum Thema an sich: Ich denke man sollte nicht nur von Divs sondern eher von CSS reden. Es heisst ja nicht, dass wenn man beispielsweise ein Menü machen will, bei dem die Oberpunkte grün hinterlegt sind, man sowas hier konstruiert:
Quellcode:<div id="navigation">
  <div style="background: #00FF00; width: 100%;">Oberpunkt 1</div>
  <img src="bullet.gif" /><a href="#">Punkt 1</a>
  <img src="bullet.gif" /><a href="#">Punkt 2</a>
  <img src="bullet.gif" /><a href="#">Punkt 3</a>

  <div style="background: #00FF00; width: 100%;">Oberpunkt 2</div>
  <img src="bullet.gif" /><a href="#">Punkt 1</a>
  <img src="bullet.gif" /><a href="#">Punkt 2</a>
  <img src="bullet.gif" /><a href="#">Punkt 3</a>
</div>
sondern man sowas ganz einfach so lösen kann:
Quellcode:<div id="navigation">
  <h4>Oberpunkt 1</h4> <!-- h4 weil h1-h3 im "Hauptteil" verwendet werden (in meinem Beispiel) -->
  <ul>
    <li><a href="#">Punkt 1</a></li>
    <li><a href="#">Punkt 2</a></li>
  </ul>

  <h4>Oberpunkt 2</h4>
  <ul>
    <li><a href="#">Punkt 1</a></li>
    <li><a href="#">Punkt 2</a></li>
  </ul>
</div>

zugehöriger CSS-Code:
h4 {
  width: 100%;
  background: #00FF00;
}

li {
  list-style-image: url(bullet.gif);
}


sincères amitiés scus
--
Tand, Tand ist das Gebilde von Menschenhand

Zitat:

-Sir_Pepe- postete
Den einzigen "Vorteil" den Tabellen haben können, ist dass man nichts neues lernen muss wenn man schon mit Tabellen jonglieren kann. Und das kann ja kein ernsthaftes Argument sein.

„Und da wir uns ja seit heute etwas näher gekommen sind, kann ich nur sagen: Mir hilft da immer Norther volle Lautstärke (so wie jetzt), sodass die ganzen unrasierten, Wasserpfeife rauchenden, alternativen Wichsstudenten aus ihren, aus Bananenschalen und Abfall gebastelten, Sitzkissen fliegen.“

score

"tsuji-giri" (japanisch) - ein neues Schwert an einem Passanten ausprobieren

score?

sincères amitiés scus
--
Tand, Tand ist das Gebilde von Menschenhand

score!

(Der beglückwünscht den komischen Ausländer da oben zu seiner geschickt eingewobenen Linuxpropaganda.)