<div> vs <table>

Dieses Thema im Forum "Webdesign" wurde erstellt von pescalu, 11. April 2012 .

Schlagworte:
  1. 11. April 2012
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    Hallo Forum,

    da in einem anderen Tread über html,css,php,js, etc. allgemein ein wenig ein div vs table Tread entstanden ist und mich persönlich das Thema interessiert, und bestimmt auch noch mehr, dachte ich mir ich eröffne dafür hier einen eigenen Tread.
    Achja, über die SuFu fand ich keinen anderen Tread in dem es bereits darum ginge, nur spezielle Fragen zu bestimmten Codes aber nichts allgemeines
    (der Tread den ich meine: /threads/html-allgemeine-frage-zu-html-css-java-usw.823802/)

    Kurze Info darüber:
    <table>
    der table tag dient dazu eine Tabelle zu definieren und ist eigentlich auch nur dafür gedacht, viele Leute benutzen ihn aber auch um ein Layout damit zu erstellen und werden oft von den div benutzern darauf hingewiesen, dass man das nicht mit table sondern mit div tags machen sollte ^^

    <div>
    der div tag ist eigentlich dafür gedacht, ein Layout zu erstellen, bestimmte "Felder" zu positionieren, mit css zu gestalten und somit eben wie gesagt ein Layout aufzusetzen. Oft sind die div tags dann mit id="" oder class="" gesondert definiert um sie flexibel grafisch oder funktionell anpassen zu können

    Was haltet ihr davon, welche Erfahrungen habt ihr gemacht, was bevorzugt ihr und überhaupt eure Meinung zu der ganzen Sache.

    Meine Meinung:
    Ich habe demletzt ein Layout für einen Kunden erstellt (welcher nach Stunden zahlt) und habe mit divs angefangen.
    Leider habe ich relativ schnell fest gestellt, dass der Internet Explorer, Firefox und Chrome diverse Sachen anders darstellen.
    So hat ein padding-left z.B. im einen Browser trotzdem noch 1px platz gelassen, ein border:thick sah im einen Browser anders aus als im ersten und ein position:fixed oder position:absolute hatte in den Browser ebenfalls andere Positionen.
    Deshalb habe ich mich kurzerhand entschieden es bei table zu belassen um mir den Stress zu ersparen.

    EDIT:
    Um es klar zu stellen, ich bin eigentlich auch ein fan von divs und ziehe sie dem table vor, nur manchmal passiert es eben, dass ich table doch einfacher finde
     
  2. 11. April 2012
    AW: <div> vs <table>

    ich kann von table nur abraten.
    so hat man wirklich in den 1990er jahren programmiert und ich bin froh, dass das hinter mir liegt.
    tabellen verschachteln ist ne katastrophe.

    das tolle an div ist eindeutig das flexible arbeiten.
    mal eben per css statt float:left float:right zu machen und schon ist der linke teil rechts.
    flexibles arbeiten heißt also, ich lass den quellcode wie er ist und ändere per css.

    wie im anderen thread gesagt ist der code deutlich schlanker.

    HTML:
    <div>logo</div>
    <div>links</div>
    <div>rechts</div>
    
    statt
    HTML:
    <table>
     <tr>
     <td colspan="2">logo</td>
     </tr>
     <tr>
     <td>links</td>
     <td>rechts</td>
     </tr>
    </table>
    
    bin mal auf andere meinungen gespannt

    // edit
    was ich als vorteil an table sehe und noch in erinnerung habe ist 100% height.
    selbst das ist kein problem.
     
  3. 11. April 2012
    AW: <div> vs <table>

    das ist die große kunst des webdesigns =)

    das ist allerdings bei tables noch schlimmer. tu dir ein gefallen und versuch gar nicht erst mit tables zu arbeiten. unflexibel, unsauber, ..

    ich hab damals auch das arbeiten mit tables gelernt, dann hatte ich lange zeit pause und hab mir vor 1-2 jahren css usw. reingekloppt. wesentlich komfortabler und sauberer
     
  4. 11. April 2012
    AW: <div> vs <table>

    ein weiterer nachteil von tabellen ist der, dass diese erst im browser angezeigt werden wenn sie komplett gerendert wurden.

    vielleicht kennt noch jemand dieses phänomen, wo die seite wärend des ladevorgangs erst weiß ist (bzw. nur der hintergrund zu sehen ist) und dann auf einmal komplett aufpoppt: da war zu 90% eine tabelle als layout-grundgerüst im spiel

    sowas fällt vorallem bei dunklen seiten recht stark auf und geht einem dann doch mit der zeit ziemlich auf den sa...

    ein gutes beispiel ist z.b. dieses forum unter google-chrome ^^
    was im übrigen ein weiterer grund ist warum ich chrome nie produktiv verwenden werde.
    gecko ist einfach die bessere rendering-engine ^^
     
  5. 11. April 2012
    AW: <div> vs <table>

    Für das pure Layout (Anordnung der Elemente [Logo, Menü, Content, Footer, oder andere "Module"]) empfehle ich ein CSS Framework einzusetzen. Ich persönlich benutze Blueprint: A CSS Framework | Spend your time innovating, not replicating - Es gibt aber noch zig weitere ähnliche solcher Baukästen. (960 Grid System , ...)

    Prinzipiell sind Tabellen nicht mehr für Layouts geeignet. Aber keine Frage: Das richtige arbeiten mit DIV-Containern und CSS Bedarf einiger Erfahrung (korrekte clear's bei floating, Berücksichtigung browserabhängiger initialisierungswerte von Attributen (padding, margin, border, ...)

    Meiner Meinung nach lohnt es sich auf jedenfall aber sich diese paar Besonderheiten anzueignen und danach davon zu profitieren.
     
  6. 12. April 2012
    AW: <div> vs <table>

    <table> ist für Tabellen gedacht und nicht für Layouts von Webseiten
    Wie Murdoc gesagt hat, Tabellen müssen erst gerendert werden, bis sie dargestellt werden können.

    Und außer zu Übungszwecken empfiehlt es sich heutzutage sowieso, CSS-Frameworks zu nutzen. Gibt ja bspw. noch das YAML CSS Framework oder Twitter Bootstrap (ist richtig cool!).

    Ansonsten ist - wie schon gesagt wurde - div schneller gerendet als <table> und hat weniger Platzverbrauch. Der Unterschied ist halt, div sind lose Container. table's sind nicht lose, sondern benötigen Rows und Cols - was halt den Missbrauch als Layout-Element damals sehr begünstigt hat.

    PS. @Murdoc: Wie siehts mal mit nem' vB-Update aus? Ajax ist mittlerweile modern geworden Sogar schon so modern, dass jetzt alle socket.io machen
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.