it-swarm-eu.dev

Warum nicht Tabellen für das Layout in HTML verwenden?

Es scheint die allgemeine Meinung zu sein, dass Tabellen nicht für das Layout in HTML verwendet werden sollten.

Warum?

Ich habe nie (oder selten, um ehrlich zu sein) gute Argumente dafür gesehen. Die üblichen Antworten sind:

  • Es ist gut zu Inhalt vom Layout trennen
    Aber das ist ein trügerisches Argument; Klischee denken . Ich denke, es stimmt, dass die Verwendung des Tabellenelements für das Layout wenig mit Tabellendaten zu tun hat. Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?

    Vielleicht ich oder meine Kollegen, die eine Webseite pflegen müssen ... Ist eine Tabelle weniger pflegeleicht? Ich denke, die Verwendung einer Tabelle ist einfacher als die Verwendung von Divs und CSS.

    Übrigens ... warum ist die Verwendung eines div oder span keine gute Trennung von Inhalt von Layout und Tabelle? Um ein gutes Layout mit nur Divs zu erhalten, sind oft viele verschachtelte Divs erforderlich.

  • Lesbarkeit des Codes
    Ich denke, es ist umgekehrt. Die meisten Leute verstehen HTML, nur wenige verstehen CSS.

  • Es ist besser für SEO, keine Tabellen zu verwenden
    Warum? Kann jemand Beweise dafür vorlegen, dass dies der Fall ist? Oder eine Aussage von Google, dass Tabellen aus SEO-Sicht entmutigt sind?

  • Tabellen sind langsamer.
    Es muss ein zusätzliches tbody-Element eingefügt werden. Dies ist Erdnuss für moderne Webbrowser. Zeigen Sie mir einige Benchmarks, bei denen die Verwendung einer Tabelle eine Seite erheblich verlangsamt.

  • Eine Layoutüberholung ist ohne Tabellen einfacher, siehe css Zen Garden .
    Die meisten Websites, für die ein Upgrade erforderlich ist, benötigen auch neuen Inhalt (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind unwahrscheinlich. Zen Garden ist eine nette Website, aber ein bisschen theoretisch. Ganz zu schweigen von seinem Missbrauch von CSS.

Ich bin wirklich an guten Argumenten interessiert, Divs + CSS anstelle von Tabellen zu verwenden.

665
Benno Richters

Ich werde nacheinander Ihre Argumente durchgehen und versuchen, die Fehler in ihnen aufzuzeigen.

Es ist gut, Inhalte vom Layout zu trennen. Dies ist jedoch ein trügerisches Argument. Klischee Denken.

Es ist überhaupt nicht trügerisch, weil HTML absichtlich entworfen wurde. Der Missbrauch eines Elements ist möglicherweise nicht völlig ausgeschlossen (schließlich haben sich auch in anderen Sprachen neue Redewendungen herausgebildet), aber mögliche negative Auswirkungen müssen ausgeglichen werden. Selbst wenn es heute keine Argumente gegen die missbräuchliche Verwendung des Elements <table> gäbe, könnte es aufgrund der Art und Weise, wie Browser-Anbieter eine Sonderbehandlung für das Element anwenden, morgen sein. Schließlich wissen sie, dass „<table> -Elemente nur für Tabellendaten bestimmt sind“, und verwenden diese Tatsache möglicherweise, um die Rendering-Engine zu verbessern. Dabei wird das Verhalten von <table> subtil geändert, und es werden Fälle aufgeschlüsselt, in denen dies der Fall war zuvor missbraucht.

Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?

Hängt davon ab. Ist Ihr Chef spitzhaarig? Dann ist es ihm vielleicht egal. Wenn sie kompetent ist, kümmert es sie, denn die Benutzer werden .

Vielleicht ich oder meine Kollegen, die eine Webseite pflegen müssen ... Ist eine Tabelle weniger pflegeleicht? Ich denke, die Verwendung einer Tabelle ist einfacher als die Verwendung von Divs und CSS.

Die Mehrheit der professionellen Webentwickler scheint sich Ihnen zu widersetzen[ Zitat erforderlich ]. Dass Tabellen in der Tat weniger wartbar sind , sollte offensichtlich sein. Das Verwenden von Tabellen für das Layout bedeutet, dass das Ändern des Unternehmenslayouts tatsächlich das Ändern jeder einzelnen Seite bedeutet. Dies kann sehr teuer sein. Andererseits kann eine vernünftige Verwendung von semantisch sinnvollem HTML in Kombination mit CSS solche Änderungen auf das CSS und die verwendeten Bilder beschränken .

Übrigens ... warum ist die Verwendung von div oder span keine gute Trennung von Inhalt von Layout und Tabelle? Um ein gutes Layout mit nur Divs zu erhalten, sind oft viele verschachtelte Divs erforderlich.

Tief verschachtelte <div>s sind genau wie Tabellenlayouts ein Anti-Pattern. Gute Webdesigner brauchen nicht viele von ihnen. Andererseits haben selbst solche tief verschachtelten Divs nicht viele Probleme mit Tabellenlayouts. Tatsächlich können sie sogar zu einer semantischen Struktur beitragen, indem sie den Inhalt logisch in Teile aufteilen.

Lesbarkeit des Codes Ich denke, es ist umgekehrt. Die meisten Leute verstehen HTML, wenig verstehen CSS. Es ist einfacher.

"Die meisten Leute" spielen keine Rolle. Profis sind wichtig. Für Profis verursachen Tabellenlayouts viel mehr Probleme als HTML + CSS. Das ist so, als würde man sagen, ich sollte weder GVim noch Emacs verwenden, da Notepad für die meisten Menschen einfacher ist. Oder dass ich LaTeX nicht verwenden sollte, weil MS Word für die meisten Menschen einfacher ist.

Es ist besser für SEO, keine Tabellen zu verwenden

Ich weiß nicht, ob dies wahr ist und würde dies nicht als Argument verwenden, aber es wäre logisch. Suchmaschinen suchen nach relevanten Daten. Während Tabellendaten natürlich relevant sein könnten, ist es selten, wonach Benutzer suchen. Benutzer suchen nach Begriffen, die im Seitentitel oder an ähnlich prominenten Positionen verwendet werden. Es wäre daher logisch, tabellarische Inhalte von der Filterung auszuschließen und so die Verarbeitungszeit (und -kosten!) Um einen großen Faktor zu reduzieren.

Tabellen sind langsamer. Ein zusätzliches tbody-Element muss eingefügt werden. Dies ist Erdnuss für moderne Webbrowser.

Das zusätzliche Element hat nichts damit zu tun, dass Tabellen langsamer sind. Andererseits ist der Layout-Algorithmus für Tabellen viel schwieriger. Der Browser muss häufig warten, bis die gesamte Tabelle geladen ist, bevor er mit dem Layout des Inhalts beginnen kann. Außerdem funktioniert das Zwischenspeichern des Layouts nicht (CSS kann problemlos zwischengespeichert werden). All dies wurde bereits erwähnt.

Zeigen Sie mir einige Benchmarks, bei denen die Verwendung einer Tabelle eine Seite erheblich verlangsamt.

Leider liegen mir keine Benchmarkdaten vor. Ich würde mich dafür interessieren, denn es ist richtig, dass diesem Argument eine gewisse wissenschaftliche Strenge fehlt.

Die meisten Websites, die ein Upgrade benötigen, benötigen auch neuen Inhalt (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind unwahrscheinlich.

Überhaupt nicht. Ich habe an mehreren Fällen gearbeitet, in denen das Ändern des Designs durch eine Trennung von Inhalt und Design vereinfacht wurde. Es ist oft noch notwendig, HTML-Code zu ändern, aber die Änderungen werden immer viel enger. Außerdem müssen gelegentlich Designänderungen dynamisch vorgenommen werden. Betrachten Sie Template-Engines, wie sie beispielsweise vom Blogging-System WordPress verwendet werden. Tabellenlayouts würden dieses System buchstäblich zerstören. Ich habe an einem ähnlichen Fall für eine kommerzielle Software gearbeitet. Die Möglichkeit, das Design zu ändern, ohne den HTML-Code zu ändern, war eine der Geschäftsanforderungen.

Etwas anderes. Das Tabellenlayout erschwert das automatische Parsen von Websites (Screen Scraping) erheblich. Das mag trivial klingen, denn wer macht das schon? Ich war selbst überrascht. Screen Scraping kann sehr hilfreich sein, wenn der betreffende Service keine WebService-Alternative für den Zugriff auf seine Daten bietet. Ich arbeite in der Bioinformatik, wo dies eine traurige Realität ist. Moderne Webtechniken und WebServices haben die meisten Entwickler noch nicht erreicht. Oft ist Screen Scraping die einzige Möglichkeit, den Prozess des Datenabrufs zu automatisieren. Kein Wunder, dass viele Biologen solche Aufgaben immer noch manuell ausführen. Für tausende Datensätze.

496
Konrad Rudolph

Hier ist meine Antwort des Programmierers aus einem ähnlichen Thread

Semantik 101

Schauen Sie sich zuerst diesen Code an und überlegen Sie, was hier falsch ist ...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

Das Problem ist natürlich, dass ein Fahrrad kein Auto ist. Die Autoklasse ist eine ungeeignete Klasse für die Fahrradinstanz. Der Code ist fehlerfrei, aber semantisch falsch. Es spiegelt sich schlecht auf dem Programmierer.

Semantik 102

Wenden Sie dies nun auf die Dokumentauszeichnung an. Wenn Ihr Dokument tabellarische Daten enthalten muss, lautet das entsprechende Tag <table>. Wenn Sie die Navigation jedoch in eine Tabelle einfügen, missbrauchen Sie den beabsichtigten Zweck des Elements <table>. Im zweiten Fall präsentieren Sie keine Tabellendaten - Sie verwenden (fälschlicherweise) das <table> -Element, um ein Präsentationsziel zu erreichen.

Fazit

Werden die Besucher es bemerken? Interessiert es Ihren Chef? Vielleicht. Kürzen wir als Programmierer manchmal ab? Sicher. Aber sollen wir? Wer profitiert, wenn Sie semantisches Markup verwenden? Sie - und Ihr beruflicher Ruf. Jetzt geh und tu das Richtige.

290
Carl Camera

Offensichtliche Antwort: Siehe CSS Zen Garden . Wenn Sie mir sagen, dass Sie dasselbe mit einem tabellenbasierten Layout leicht tun können (denken Sie daran, dass sich der HTML-Code nicht ändert), dann verwenden Sie auf jeden Fall Tabellen für das Layout.

Zwei weitere wichtige Dinge sind Barrierefreiheit und SEO.

Beide kümmern sich darum, in welcher Reihenfolge Informationen angezeigt werden. Sie können Ihre Navigation nicht einfach oben auf der Seite anzeigen, wenn Sie sie in Ihrem tabellenbasierten Layout in der 3. Zelle der 2. Zeile der 2. verschachtelten Tabelle auf der Seite ablegen.

Ihre Antworten lauten also Wartbarkeit, Zugänglichkeit und SEO.

Sei nicht faul. Tun Sie die Dinge richtig und richtig, auch wenn sie etwas schwerer zu lernen sind.

104
erlando

Siehe diese doppelte Frage.

Ein Punkt, den Sie vergessen, ist die Zugänglichkeit. Tabellenbasierte Layouts lassen sich nicht so gut übersetzen, wenn Sie beispielsweise einen Bildschirmleser verwenden müssen. Und wenn Sie für die Regierung arbeiten, ist möglicherweise die Unterstützung barrierefreier Browser wie Screenreader erforderlich .

Ich denke auch, Sie unterschätzen die Auswirkungen einiger der Dinge, die Sie in der Frage erwähnt haben. Wenn Sie beispielsweise sowohl Designer als auch Programmierer sind, wissen Sie möglicherweise nicht genau, wie gut Präsentation und Inhalt voneinander getrennt sind. Aber sobald Sie in ein Geschäft kommen, in dem es sich um zwei unterschiedliche Rollen handelt, werden die Vorteile klarer.

Wenn Sie wissen, was Sie tun und über gute Tools verfügen, hat CSS gegenüber Tabellen für das Layout erhebliche Vorteile. Und obwohl jedes Element für sich nicht das Aufgeben von Tabellen rechtfertigt, lohnt es sich im Allgemeinen, es zusammen zu nehmen.

91
Joel Coehoorn

Leider kann CSS Zen Garden nicht mehr als Beispiel für gutes HTML/CSS-Design verwendet werden. Nahezu alle aktuellen Designs verwenden Grafiken für die Abschnittsüberschrift. Diese Grafikdateien werden im CSS festgelegt.

Daher verpflichtet sich eine Website, deren Zweck es ist, den Vorteil aufzuzeigen, Design von Inhalten fernzuhalten, regelmäßig zur UNSPEAKABLE SIN, Inhalte in Design umzusetzen. (Wenn sich die Abschnittsüberschrift in der HTML-Datei ändern würde, würde die angezeigte Abschnittsüberschrift nicht geändert).

Das zeigt nur, dass auch die Befürworter der strengen DIV & CSS-Religion nicht ihren eigenen Regeln folgen können. Sie können dies als Richtlinie dafür verwenden, wie genau Sie ihnen folgen.

54
James Curran

Dies ist keineswegs das endgültige Argument, aber mit CSS können Sie das gleiche Markup verwenden und das Layout je nach Medium ändern, was ein netter Vorteil ist. Bei einer Druckseite können Sie die Navigation leise unterdrücken, ohne beispielsweise eine druckerfreundliche Seite erstellen zu müssen.

48
expedient

Ein Tisch für das Layout wäre nicht so schlecht. Das Layout, das Sie benötigen, erhalten Sie jedoch meistens nicht mit nur einem Tisch. Bald haben Sie zwei oder drei verschachtelte Tabellen. Dies wird sehr umständlich.

  • Es ist IS VIEL schwerer zu lesen. Das ist nicht der Meinung. Es gibt nur mehr verschachtelte Tags ohne identifizierende Markierungen.

  • Das Trennen von Inhalten von Präsentationen ist eine gute Sache, da Sie sich auf das konzentrieren können, was Sie tun. Das Mischen der beiden führt zu aufgeblähten Seiten, die schwer zu lesen sind.

  • Mit CSS für Stile kann Ihr Browser die Dateien zwischenspeichern, und nachfolgende Anforderungen sind viel schneller. Das ist riesig.

  • Tische binden Sie in ein Design ein. Natürlich braucht nicht jeder die Flexibilität von CSS Zen Garden, aber ich habe noch nie an einer Site gearbeitet, an der ich das Design hier und da nicht ein bisschen ändern musste. Mit CSS ist es viel einfacher.

  • Tische sind schwer zu stylen. Sie haben nicht viel Flexibilität damit (d. H. Sie müssen noch HTML-Attribute hinzufügen, um die Stile einer Tabelle vollständig zu steuern).

Ich habe in den letzten 4 Jahren wahrscheinlich keine Tabellen für nicht tabellarische Daten verwendet. Ich habe nicht zurückgeschaut.

Ich würde wirklich gerne vorschlagen, CSS Mastery von Andy Budd zu lesen. Es ist fantastisch.

Bild unter ecx.images-Amazon.com http://ecx.images-Amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg

45
Ben Scheirman

Es ist gut, Inhalte vom Layout zu trennen
Aber das ist ein trügerisches Argument; Klischee denken

Es ist ein trügerisches Argument, weil HTML-Tabellen Layout sind! Der Inhalt ist das Daten in der Tabelle, die Darstellung ist die Tabelle selbst. Aus diesem Grund kann es manchmal sehr schwierig sein, CSS von HTML zu trennen. Sie trennen nicht Inhalt von Präsentation, Sie trennen Präsentation von Präsentation! Ein Stapel verschachtelter Divs unterscheidet sich nicht von einer Tabelle - es handelt sich lediglich um eine andere Gruppe von Tags.

Das andere Problem bei der Trennung von HTML und CSS besteht darin, dass sie sich genau kennen müssen - man kann sie wirklich nicht vollständig trennen. Das Tag-Layout im HTML-Code ist eng mit der CSS-Datei verknüpft, unabhängig davon, was Sie tun.

Ich denke, dass Tabellen gegen Divs auf die Bedürfnisse Ihrer Anwendung abzielen.

In der Anwendung, die wir bei der Arbeit entwickeln, brauchten wir ein Seitenlayout, bei dem sich die Größe der Teile dynamisch an den Inhalt anpasst. Ich habe tagelang versucht, dies browserübergreifend mit CSS und DIVs zum Laufen zu bringen, und es war ein kompletter Albtraum. Wir haben zu Tischen gewechselt und alles nur funktioniert.

Wir haben jedoch ein sehr geschlossenes Publikum für unser Produkt (wir verkaufen Hardware mit einer Webschnittstelle), und Zugänglichkeitsprobleme sind für uns kein Problem. Ich weiß nicht, warum Screenreader nicht gut mit Tabellen umgehen können, aber ich denke, wenn das so ist, müssen Entwickler damit umgehen.

36
17 of 26

CSS/DIV - es sind nur Jobs für die Design-Jungs, nicht wahr? Die Hunderte von Stunden, die ich mit dem Debuggen von DIV/CSS-Problemen verbracht habe, mit dem Durchsuchen des Internets, um einen Teil des Markups mit einem undurchsichtigen Browser zum Laufen zu bringen - das macht mich verrückt. Sie nehmen eine kleine Änderung vor und das gesamte Layout läuft schrecklich schief - wo bleibt da die Logik? Verbringen Sie Stunden damit, etwas 3 Pixel in diese Richtung zu bewegen, dann etwas anderes 2 Pixel in die andere, um alle in eine Reihe zu bringen. Das scheint mir einfach irgendwie falsch zu sein. Nur weil du ein Purist bist und etwas nicht das Richtige ist, solltest du es nicht bis zum n-ten Grad und unter allen Umständen nutzen, besonders wenn es dir das 1000-fache deines Lebens erleichtert.

Also habe ich mich aus rein kommerziellen Gründen entschieden, obwohl ich die Nutzung auf ein Minimum beschränke. Wenn ich mit 20 Stunden Arbeit rechne, um einen DIV richtig zu platzieren, bleibe ich in einem Tisch. Es ist falsch, es stört die Puristen, aber in den meisten Fällen kostet es weniger Zeit und ist billiger in der Handhabung. Ich kann mich dann darauf konzentrieren, die Anwendung so zu gestalten, wie es der Kunde wünscht, anstatt den Puristen zu gefallen. Sie bezahlen doch die Rechnungen und meinen Streit mit einem Manager, der die Verwendung von CSS/DIV erzwingt - ich möchte nur darauf hinweisen, dass die Kunden auch sein Gehalt zahlen!

Der einzige Grund, warum all diese CSS/DIV-Argumente auftreten, ist, dass CSS in erster Linie mangelhaft ist und die Browser nicht miteinander kompatibel sind. Wenn dies der Fall wäre, wäre die Hälfte der Webdesigner auf der Welt arbeitslos .

Wenn Sie ein Fensterformular entwerfen, versuchen Sie nicht, Steuerelemente zu verschieben, nachdem Sie sie angeordnet haben. Deshalb finde ich es seltsam, warum Sie dies mit einem Webformular tun möchten. Ich kann diese Logik einfach nicht verstehen. Holen Sie sich das Layout richtig zu beginnen und was ist das Problem. Ich denke, das liegt daran, dass Designer gerne mit Kreativität flirten, während Anwendungsentwickler sich mehr darum kümmern, die Anwendung zum Laufen zu bringen, Geschäftsobjekte zu erstellen, Geschäftsregeln zu implementieren, herauszufinden, in welchem ​​Verhältnis Kundendaten zueinander stehen, um sicherzustellen, dass die Sache den Kunden entspricht Anforderungen, wissen Sie, wie in der realen Welt.

Verstehen Sie mich nicht falsch, beide Argumente sind gültig, aber kritisieren Sie bitte nicht die Entwickler, die einen einfacheren und logischeren Ansatz für das Entwerfen von Formularen gewählt haben. Wir haben oft wichtigere Dinge zu beachten als die korrekte Semantik der Verwendung einer Tabelle über einem Div.

Beispiel - basierend auf dieser Diskussion habe ich einige existierende tds und trs in divs konvertiert. 45 Minuten rumgespielt und versucht, alles nebeneinander zu stellen und ich habe aufgegeben. TDs in 10 Sekunden zurück - funktioniert - sofort - auf allen Browsern, nichts mehr zu tun. Bitte versuchen Sie mir verständlich zu machen - welche Rechtfertigung haben Sie dafür, dass ich es anders machen soll?

23
Tim Black

Das Layout sollte einfach sein. Die Tatsache, dass Artikel darüber geschrieben wurden, wie ein dynamisches dreispaltiges Layout mit Kopf- und Fußzeile in CSS erreicht werden kann, zeigt, dass es sich um ein schlechtes Layoutsystem handelt. Natürlich können Sie es zum Laufen bringen, aber es gibt buchstäblich Hunderte von Artikeln online darüber, wie es geht. Es gibt so gut wie keine derartigen Artikel für ein ähnliches Layout mit Tabellen, da dies offensichtlich ist. Egal, was Sie gegen Tabellen und zugunsten von CSS sagen, diese eine Tatsache macht alles rückgängig: Ein grundlegendes dreispaltiges Layout in CSS wird oft als "The Holy Grail" bezeichnet.

Wenn das nicht dazu führt, dass Sie "WTF" sagen, müssen Sie die Kool-Hilfe jetzt wirklich ablegen.

Ich liebe CSS. Es bietet erstaunliche Gestaltungsmöglichkeiten und einige coole Positionierungswerkzeuge, aber als Layout-Engine ist es mangelhaft. Es muss eine Art dynamisches Gitterpositionierungssystem geben. Eine einfache Möglichkeit, Boxen auf mehreren Achsen auszurichten, ohne vorher ihre Größe zu kennen. Ich mag es nicht, wenn Sie es <table> oder <gridlayout> oder was auch immer nennen, aber dies ist eine grundlegende Layout-Funktion, die in CSS fehlt.

Das größere Problem ist, dass die CSS-Fanatiker CSS zurückhalten, indem sie nicht zugeben, dass es fehlende Funktionen gibt. Ich würde gerne auf die Verwendung von Tabellen verzichten, wenn CSS wie praktisch jede andere Layout-Engine der Welt eine anständige mehrachsige Rasterpositionierung gewährleisten würde. (Sie wissen, dass dieses Problem in vielen Sprachen bereits mehrfach von allen außer dem W3C gelöst wurde, oder? Und niemand bestritt, dass eine solche Funktion nützlich war.)

Seufzer. Genug entlüften. Geh voran und stecke deinen Kopf zurück in den Sand.

21
needlestack

Gemäß der 508-Konformität (für Bildschirmlesegeräte für visuell Behinderte) sollten Tabellen nur zum Speichern von Daten und nicht für das Layout verwendet werden, da dadurch die Bildschirmlesegeräte ausflippen. Zumindest wurde mir das gesagt.

Wenn Sie jedem der Divs Namen zuweisen, können Sie sie auch mithilfe von CSS zusammenfassen. Sie sind nur ein bisschen schmerzhaft, um so zu sitzen, wie Sie es brauchen.

19
Rob

Hier ist ein Abschnitt von HTML aus einem aktuellen Projekt:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

Und hier ist derselbe Code wie bei einem tabellenbasierten Layout.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

Die einzige Sauberkeit, die ich in diesem tabellenbasierten Layout sehe, ist die Tatsache, dass ich mit meiner Einrückung übereifrig bin. Ich bin sicher, dass der Inhaltsabschnitt zwei weitere eingebettete Tabellen haben würde.

Eine andere Sache, über die man nachdenken sollte: Dateigröße. Ich habe festgestellt, dass tabellenbasierte Layouts normalerweise doppelt so groß sind wie ihre CSS-Gegenstücke. Bei unserem Hochgeschwindigkeitsbreitband ist das kein großes Problem, aber bei denen mit DFÜ-Modems.

18
Ross

Ich möchte hinzufügen, dass div-basierte Layouts einfacher zu verwalten, zu entwickeln und umzugestalten sind. Nur ein paar Änderungen im CSS, um Elemente neu anzuordnen und fertig. Nach meiner Erfahrung ist die Neugestaltung eines Layouts, das Tabellen verwendet, ein Albtraum (mehr, wenn es verschachtelte Tabellen gibt).

Ihr Code hat auch eine Bedeutung aus einer semantischen Sicht.

14
Guido

CSS-Layouts sind im Allgemeinen für die Barrierefreiheit viel besser, sofern der Inhalt in einer natürlichen Reihenfolge vorliegt und ohne Stylesheet Sinn macht. Und nicht nur Bildschirmleseprogramme haben Probleme mit tabellenbasierten Layouts. Sie erschweren es auch mobilen Browsern erheblich, eine Seite korrekt wiederzugeben.

Außerdem können Sie mit einem div-basierten Layout sehr einfach coole Dinge mit einem Druck-Stylesheet tun, z. B. Kopfzeilen, Fußzeilen und Navigation von gedruckten Seiten ausschließen - ich denke, es wäre unmöglich oder zumindest viel schwieriger, dies mit einem zu tun Tabellenbasiertes Layout.

Wenn Sie bezweifeln, dass die Trennung von Inhalt und Layout mit divs einfacher ist als mit Tabellen, werfen Sie einen Blick auf das div-basierte HTML unter CSS Zen Garden , und sehen Sie, wie sich durch das Ändern der Stylesheets das Layout drastisch ändert , und überlegen Sie, ob Sie die gleiche Vielfalt an Layouts erzielen könnten, wenn HTML tabellenbasiert wäre ... Wenn Sie ein tabellenbasiertes Layout erstellen, werden Sie wahrscheinlich kein CSS verwenden, um alle Abstände und Auffüllungen in der Tabelle zu steuern Zellen (wenn Sie es wären, würden Sie es mit ziemlicher Sicherheit einfacher finden, Floating Divs usw. zu verwenden). Ohne die Verwendung von CSS zur Steuerung all dessen und aufgrund der Tatsache, dass Tabellen die Reihenfolge von links nach rechts und von oben nach unten im HTML festlegen, bedeuten Tabellen in der Regel, dass Ihr Layout im HTML sehr stark fixiert wird.

Realistisch gesehen finde ich es sehr schwierig, das Layout eines div- und CSS-basierten Designs vollständig zu ändern, ohne die divs ein wenig zu verändern. Mit einem div- und CSS-basierten Layout ist es jedoch viel einfacher, Dinge wie den Abstand zwischen verschiedenen Blöcken und ihre relative Größe zu optimieren.

13
MB.

Die Tatsache, dass dies eine umstrittene Frage ist, ist ein Beweis dafür, dass das W3C die Vielfalt der zu erwartenden Layoutdesigns nicht antizipieren kann. Die Verwendung von divs + css für semantisch freundliches Layout ist ein großartiges Konzept, aber die Details der Implementierung sind so fehlerhaft, dass sie tatsächlich die kreative Freiheit einschränken.

Ich habe versucht, eine Website unseres Unternehmens von Tabellen auf Divs umzustellen, und es war so schlimm, dass ich die Arbeitsstunden, die ich in sie gesteckt hatte, total verschrottet habe und wieder zu Tabellen zurückgekehrt bin. Der Versuch, mit meinen Divs zu ringen, um die Kontrolle über die vertikale Ausrichtung zu erlangen, verfluchte mich mit großen psychologischen Problemen, die ich niemals erschüttern werde, solange diese Debatte weitergeht.

Die Tatsache, dass die Benutzer häufig komplexe und hässliche Problemumgehungen finden müssen, um einfache Entwurfsziele (z. B. vertikale Ausrichtung) zu erreichen, legt den Schluss nahe, dass die Regeln bei weitem nicht flexibel genug sind. Wenn die Spezifikationen ausreichen, warum ist es dann für hochkarätige Websites (wie SO) erforderlich, die Regeln mithilfe von Tabellen und anderen Problemumgehungen zu biegen?

13
DLH

Keine Argumente in DIVs gefallen mir.

Ich würde sagen: Wenn der Schuh passt, tragen Sie ihn.

Es ist erwähnenswert, dass es schwierig, wenn nicht unmöglich ist, eine gute DIV + CSS-Methode zum Rendern von Inhalten in zwei oder drei Spalten zu finden, die in allen Browsern konsistent ist und trotzdem so aussieht, wie ich es beabsichtigt hatte.

Das bringt mich in den meisten meiner Layouts ein wenig in Richtung Tabellen, und obwohl ich mich schuldig fühle, sie zu verwenden (verdammt warum, die Leute sagen einfach, dass es schlecht ist, also versuche ich, ihnen zuzuhören), ist die pragmatische Sichtweise letztendlich einfach einfacher und schneller für mich, TABELLEN zu benutzen. Ich werde nicht stundenweise bezahlt, deshalb sind Tische für mich billiger.

13
Radu094

Ich denke, es stimmt, dass die Verwendung des Tabellenelements für das Layout wenig mit Tabellendaten zu tun hat. Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?

Google und andere automatisierte Systeme tun kümmern sich darum, und sie sind in vielen Situationen genauso wichtig. Semantischer Code ist für ein nicht intelligentes System einfacher zu analysieren und zu verarbeiten.

12
ceejayoz

Nachdem ich mit einer Website arbeiten musste, die sechs Schichten verschachtelter Tabellen enthielt, die von einer bestimmten Anwendung generiert wurden, und die ungültige HTML generierte, war es in der Tat eine dreistündige Aufgabe, diese zu korrigieren, um eine geringfügige Änderung zu verhindern.

Dies ist natürlich der Edge-Fall, aber das tabellenbasierte Design ist nicht aufrechtzuerhalten. Wenn Sie CSS verwenden, trennen Sie den Stil so, dass Sie sich beim Korrigieren des HTML-Codes weniger Gedanken über das Brechen machen müssen.

Versuchen Sie dies auch mit JavaScript. Verschieben einer einzelnen Tabellenzelle von einem Ort an einen anderen Ort in einer anderen Tabelle. Eher kompliziert durchzuführen, wo div/span nur beim Kopieren und Einfügen funktioniert.

"Interessiert es meinen Chef?"

Wenn ich dein Chef wäre. Es würde dich interessieren. ;) Wenn du dein Leben wertschätzt.

8
Kent Fredric

Layoutflexibilität
Stellen Sie sich vor, Sie erstellen eine Seite mit einer großen Anzahl von Miniaturansichten.
DIVs:
Wenn Sie jedes Miniaturbild in einen DIV einfügen, schweben Sie nach links, vielleicht passen 10 davon in eine Reihe. Machen Sie das Fenster schmaler und BAM - es ist 6 in einer Reihe oder 2 oder wie viele passen.
TABELLE:
Sie müssen explizit angeben, wie viele Zellen sich in einer Reihe befinden. Wenn das Fenster zu eng ist, muss der Benutzer horizontal scrollen.

Wartbarkeit
Gleiche Situation wie oben. Nun möchten Sie der dritten Zeile drei Thumbnails hinzufügen.
DIVs:
Fügen Sie sie hinzu. Das Layout wird automatisch angepasst.
TABELLE: Fügen Sie die neuen Zellen in die dritte Zeile ein. ps! Jetzt sind zu viele Gegenstände da. Schneiden Sie einige aus dieser Reihe und legen Sie sie in die vierte Reihe. Jetzt sind zu viele Gegenstände da. Schneiden Sie einige aus dieser Reihe ... (etc)
(Wenn Sie die Zeilen und Zellen mit serverseitigem Scripting generieren, ist dies wahrscheinlich kein Problem.)

7
Nathan Long

Ich denke, dass das Boot gesegelt ist. Wenn Sie sich die Richtung der Branche ansehen, werden Sie feststellen, dass CSS und Open Standards die Gewinner dieser Diskussion sind. Dies bedeutet wiederum, dass die Designer für die meisten HTML-Arbeiten mit Ausnahme von Formularen Divs anstelle von Tabellen verwenden. Das fällt mir schwer, weil ich kein CSS-Guru bin, aber so ist es nun mal.

7
Thomas Wagner

Vergessen Sie auch nicht, dass Tabellen in mobilen Browsern nicht gut dargestellt werden. Sicher, das iPhone hat einen Kick-Ass-Browser, aber nicht jeder hat ein iPhone. Das Rendern von Tabellen kann für moderne Browser eine Nuss sein, für mobile Browser sind es jedoch ein paar Wassermelonen.

Ich persönlich habe festgestellt, dass viele Leute zu viele <div> -Tags verwenden, aber in Maßen kann es extrem sauber und einfach zu lesen sein. Sie erwähnen, dass es Leuten schwerer fällt, CSS zu lesen als Tabellen. in Bezug auf 'Code' ist das vielleicht wahr; Beim Lesen von Inhalten (view> source) ist es jedoch um einiges einfacher, die Struktur mit Stylesheets zu verstehen als mit Tabellen.

5
Swati

Sieht so aus, als wärst du nur an Tische gewöhnt und das wars. Wenn Sie das Layout in eine Tabelle einfügen, werden Sie auf dieses Layout beschränkt. Mit CSS können Sie Bits verschieben, siehe http://csszengarden.com/ Und nein, das Layout erfordert normalerweise nicht viele verschachtelte Divs.

Ohne Tabellen für Layout und korrekte Semantik ist HTML viel übersichtlicher und daher einfacher zu lesen. Warum sollte jemand, der CSS nicht versteht, versuchen, es zu lesen? Und wenn sich jemand als Webentwickler versteht, ist das gute Verständnis von CSS ein Muss.

SEO-Vorteile ergeben sich aus der Möglichkeit, die wichtigsten Inhalte weiter oben auf der Seite zu platzieren und ein besseres Verhältnis zwischen Inhalten und Markups zu erzielen.

http://www.hotdesign.com/seybold/

5
Rimantas

Die ganze Idee rund um das semantische Markup ist die Trennung von Markup und Präsentation, einschließlich Layout.

Divs ersetzen keine Tabellen, sondern können den Inhalt auf eigene Weise in Blöcke mit verwandtem Inhalt (,) aufteilen. Wenn Sie nicht über die erforderlichen Kenntnisse verfügen und sich auf Tabellen verlassen, müssen Sie Ihren Inhalt häufig in Zellen unterteilen, um das gewünschte Layout zu erhalten. Wenn Sie jedoch semantisches Markup verwenden, müssen Sie das Markup nicht berühren, um eine Präsentation zu erzielen. Dies ist sehr wichtig, wenn das Markup generiert wird und keine statischen Seiten.

Entwickler müssen aufhören, Markups bereitzustellen, die das Layout implizieren, damit diejenigen von uns, die über die Fähigkeiten zum Präsentieren von Inhalten verfügen, mit ihren Jobs weitermachen können, und Entwickler müssen nicht zu ihrem Code zurückkehren, um Änderungen vorzunehmen, wenn sich die Präsentation ändern muss.

5
Steve Perks
  • 508-Konformität - die Fähigkeit eines Screenreaders, Ihr Markup zu verstehen.
  • Warten auf Rendern - Tabellen werden im Browser nicht gerendert, bis das Element </table> beendet ist.
5
Rick Glos

Dabei geht es nicht wirklich darum, ob Divs besser als Tabellen für das Layout sind. Jemand, der CSS versteht, kann jedes Design mit Hilfe von Layouttabellen ziemlich einfach duplizieren. Der eigentliche Gewinn ist die Verwendung von HTML-Elementen für das, wofür sie da sind. Der Grund, warum Sie Tabellen nicht für tabellarische Daten verwenden, ist derselbe, warum Sie Ganzzahlen nicht als Zeichenfolgen speichern - die Technologie funktioniert viel einfacher, wenn Sie sie für den Zweck verwenden, für den sie bestimmt ist. Wenn es jemals notwendig war, Tabellen für das Layout zu verwenden (aufgrund von Browsermängeln in den frühen neunziger Jahren), ist dies sicherlich nicht jetzt der Fall.

4
domgblackwell

Es lohnt sich, CSS und Divs herauszufinden, damit die zentrale Inhaltsspalte vor der Seitenleiste in einem Seitenlayout geladen und gerendert wird. Wenn Sie jedoch Schwierigkeiten haben, ein Logo mit Floating Divs vertikal an einem Sponsorentext auszurichten, verwenden Sie einfach die Tabelle und fahren Sie mit dem Leben fort. Die Zen-Garten-Religion gibt einfach nicht viel für das Geld.

Die Idee der Trennung von Inhalt und Präsentation besteht darin, die Anwendung so zu partitionieren, dass unterschiedliche Arten von Arbeit unterschiedliche Codeblöcke betreffen. Hier geht es eigentlich um Change Management. Kodierungsstandards können den aktuellen Kodierungsstand jedoch nur oberflächlich untersuchen.

Das Änderungsprotokoll für eine Anwendung, die von Codierungsstandards abhängt, um "Inhalt von Präsentation zu trennen", zeigt ein Muster paralleler Änderungen in vertikalen Silos. Wie erfolgreich ist die Partitionierung, wenn eine Änderung von "Inhalt" immer mit einer Änderung von "Präsentation" einhergeht?

Wenn Sie Ihren Code wirklich produktiv partitionieren möchten, verwenden Sie Subversion und überprüfen Sie Ihre Änderungsprotokolle. Verwenden Sie dann die einfachsten Codierungstechniken - divs, Tabellen, JavaScript, Includes, Funktionen, Objekte, Fortsetzungen usw. -, um die Anwendung so zu strukturieren, dass die Änderungen auf einfache und bequeme Weise übernommen werden.

3
Patrick May

Tabellen sind nichtim Allgemeineneinfacher oder besser zu pflegen als CSS. Es gibt jedoch einigespezifischeLayout-Probleme, bei denen Tabellen in der Tat die einfachste und flexibelste Lösung sind.

CSS ist eindeutig vorzuziehen, wenn Präsentations-Markups und CSS dieselbe Art von Design unterstützen, und niemand, der bei klarem Verstand ist, würde argumentieren, dass font- -Tags besser sind als die Angabe von Typografie in CSS, da CSS Ihnen dieselbe Leistung verleiht wie font- Tags, aber viel sauberer.

Das Problem bei Tabellen ist jedoch, dass das Tabellenlayoutmodell in CSS in Microsoft Internet Explorer nicht unterstützt wird. Tabellen und CSS sind dahernotäquivalent. Der fehlende Teil ist das gitterartige Verhalten von Tabellen, bei dem die Kanten von Zellen sowohl vertikal als auch horizontal ausgerichtet sind, während Zellen immer noch erweitert werden, um ihren Inhalt zu enthalten. Dieses Verhalten ist in reinem CSS nicht einfach zu erreichen, ohne einige Dimensionen fest zu codieren, was das Design starr und spröde macht (solange wir den Internet Explorer unterstützen müssen - in anderen Browsern wird dies einfach durch die Verwendung von display:table-cell erreicht).

Es geht also nicht wirklich darum, ob Tabellen oder CSS vorzuziehen sind, sondern darum, die speziellen Fälle zu erkennen, in denen die Verwendung von Tabellen das Layout flexibler machen kann.

Der wichtigste Grund fürnotusing tables ist die Barrierefreiheit. Die Richtlinien für die Barrierefreiheit von Webinhalten http://www.w3.org/TR/WCAG10/ Ratschläge zur Verwendung von Tabellen für das Layout. Wenn Sie sich Gedanken über die Barrierefreiheit machen (und in einigen Fällen gesetzlich dazu verpflichtet sein könnten), sollten Sie CSS verwenden, auch wenn die Tabellen einfacher sind. Beachten Sie, dass Sie mit CSSalwaysdasselbe Layout erstellen können wie mit Tabellen. Dies erfordert möglicherweise nur mehr Arbeit.

3
JacquesB

Tools, die Tabellenlayouts verwenden, können aufgrund der zum Erstellen des Layouts erforderlichen Codemenge außerordentlich umfangreich werden. Das Netweaver Portal von SAP verwendet standardmäßig TABLE, um die Seiten zu gestalten.

Das SAP-Produktionsportal bei meinem aktuellen Auftritt hat eine Homepage, deren HTML-Code mehr als 60 KB wiegt und sieben Tabellen tief ist, dreimal innerhalb der Seite. Fügen Sie in Javascript den Missbrauch von 16 iframes mit ähnlichen Tabellenproblemen, übermäßig starkem CSS usw. hinzu, und die Seite wiegt über 5 MB.

Es lohnt sich, sich die Zeit zu nehmen, um das Seitengewicht zu verringern, damit Sie Ihre Bandbreite für Aktivitäten mit Benutzern nutzen können.

3
Mike Cornell

Die DOM-Manipulation ist in einem tabellenbasierten Layout schwierig.

Mit semantischen Divs:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

Mit Tischen:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

Nun, zugegeben, das zweite Beispiel ist irgendwie dumm und Sie können immer IDs oder Klassen auf eine Tabelle oder ein td-Element anwenden, aber das würde einen semantischen Wert hinzufügen, dem sich Tabellen-Befürworter so vehement widersetzen.

3
Chris Fletcher

Ich war überrascht zu sehen, dass einige Themen nicht bereits behandelt wurden. Hier sind meine 2 Cent zusätzlich zu all den sehr gültigen Punkten, die ich zuvor angesprochen habe:

.1. CSS & SEO:

a) Früher hatte CSS einen erheblichen Einfluss auf die SEO, da der Inhalt auf der Seite platziert werden konnte, wo immer Sie möchten. Vor einigen Jahren legten Suchmaschinen einen erheblichen Schwerpunkt auf "On-Page" -Faktoren. Etwas am oberen Rand der Seite wurde als relevanter für die Seite erachtet als etwas am unteren Rand. "Seitenanfang" für eine Spinne bedeutete "am Anfang des Codes". Mit CSS können Sie Ihren schlüsselwortreichen Inhalt am Anfang des Codes organisieren und ihn dennoch an einer beliebigen Stelle auf der Seite platzieren. Dies ist immer noch ein wenig relevant, aber die Faktoren auf der Seite spielen für das Seitenranking eine immer geringere Rolle.

b) Wenn das Layout auf CSS umgestellt wird, ist die HTML-Seite heller und wird daher für eine Suchmaschinenspinne schneller geladen. (Spinnen kümmern sich nicht darum, externe CSS-Dateien herunterzuladen). Das schnelle Laden von Seiten ist für mehrere Suchmaschinen, einschließlich Google, ein wichtiger Gesichtspunkt beim Ranking

c) SEO-Arbeit erfordert oft das Testen und Ändern von Dingen, was bei einem CSS-basierten Layout viel praktischer ist

.2. Generierter Inhalt:

Eine Tabelle lässt sich wesentlich einfacher programmgesteuert generieren als das entsprechende CSS-Layout.

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

Das Erstellen einer Tabelle ist einfach und sicher. Es ist in sich geschlossen und fügt sich gut in jede Vorlage ein. Dasselbe mit CSS zu tun, ist erheblich schwieriger und bringt möglicherweise keinerlei Vorteile: Das Bearbeiten des CSS-Stylesheets während des Flugs und das Hinzufügen des Stils inline unterscheidet sich nicht von der Verwendung einer Tabelle (der Inhalt ist nicht vom Layout getrennt).

Wenn eine Tabelle generiert wird, ist der Inhalt (in Variablen) bereits vom Layout (im Code) getrennt, was das Ändern ebenfalls vereinfacht.

Dies ist einer der Gründe, warum einige sehr gut gestaltete Websites (z. B. SO) immer noch Tabellenlayouts verwenden.

Wenn die Ergebnisse mit JavaScript bearbeitet werden müssen, sind divs natürlich die Mühe wert.

.3. Schneller Konvertierungstest

Wenn Sie herausfinden, was für ein bestimmtes Publikum funktioniert, ist es hilfreich, das Layout auf verschiedene Arten zu ändern, um die besten Ergebnisse zu erzielen. Ein CSS-basiertes Layout erleichtert die Arbeit erheblich

.4. nterschiedliche Lösungen für unterschiedliche Probleme

Layouttabellen sind in der Regel uneinheitlich, da "jeder Divs und CSS kennt" der richtige Weg ist.

Es bleibt jedoch die Tatsache, dass Tabellen schneller zu erstellen, einfacher zu verstehen und robuster sind als die meisten CSS-Layouts. (Ja, CSS kann genauso robust sein, aber ein kurzer Blick durch das Internet auf verschiedenen Browsern und Bildschirmauflösungen zeigt, dass dies nicht oft der Fall ist.)

Tische haben viele Nachteile, einschließlich Wartung, mangelnder Flexibilität ... aber lasst uns das Baby nicht mit dem Badewasser werfen. Es gibt viele professionelle Einsatzmöglichkeiten für eine Lösung, die schnell und zuverlässig ist.

Vor einiger Zeit musste ich ein sauberes und einfaches CSS-Layout mithilfe von Tabellen neu schreiben, da ein erheblicher Teil der Benutzer eine ältere Version von IE mit einer wirklich schlechten CSS-Unterstützung verwenden würde

Ich jedenfalls bin es leid, dass die Knie-Ruck-Reaktion "Oh nein! Tabellen für Layouts!"

Was das Publikum angeht, das "es war nicht für diesen Zweck gedacht und deshalb sollte man es nicht so benutzen", ist das nicht Heuchelei? Was halten Sie von all den CSS-Tricks, die Sie verwenden müssen, um das verdammte Ding in den meisten Browsern zum Laufen zu bringen? Waren sie für diesen Zweck gedacht?

3
Sylverdrag

Weil es HÖLLE ist, eine Site zu pflegen, die Tabellen verwendet und viel länger braucht, um Code zu erstellen. Wenn Sie Angst vor schwimmenden Divs haben, nehmen Sie daran teil. Sie sind nicht schwer zu verstehen und ungefähr 100 Mal effizienter und eine Million Mal weniger nervig (es sei denn, Sie verstehen sie nicht - aber hey, willkommen in der Welt der Computer).

Wer überlegt, sein Layout mit einer Tabelle zu erstellen, sollte nicht erwarten, dass ich sie pflege. Es ist die einfachste Art, eine Website zu rendern. Gott sei Dank haben wir jetzt eine viel bessere Alternative. Ich würde niemals zurückkehren.

Es ist beängstigend, dass einige Leute nicht wissen, wie viel Zeit und Energie es kostet, eine Website mit modernen Tools zu erstellen.

3
Chuck Le Butt
  1. Versuchen Sie, einen 10/20 tiefen Colspan/Rowspan zusammenzuführen/aufzuteilen. Mehr als einmal musste ich meinen Instinkt unterdrücken, um einen Kampf mit jemandem zu beginnen. [?!]
  2. Versuchen Sie, die Quellcode-Reihenfolge zu ändern, ohne die sichtbare Reihenfolge zu ändern. [SEO, Usability, ...]
  3. Die sehr (sehr einfache) Seite, die wir betrachten, ist ~ 150K. Ich wette, es kann mit richtigem CSS fast halbiert werden. [SEO (Ja, SEO, neueste Google-Spezifikationen lesen usw.), perfo, ...]
  4. Versuchen Sie, eine Iterator-Vorlage zu erstellen, die in jeder Breite funktionieren kann.
  5. Die Diskussion der Materie in diesem tabellarischen Medium von SO kann eine Singularität verursachen und uns alle zerstören
2
Halil Özgür

Das Problem der strikten Trennung von Präsentation und Inhalt erscheint mir in etwa analog zur Trennung von Header-Dateien von Implementierungsdateien in C++. Es macht Sinn, aber es kann auch ein Schmerz sein. Sehen Sie sich Java und C # an, wo Klassen in einer einzelnen Quelldatei definiert sind. Die Autoren der neueren Sprachen bemerkten etwas, das den Programmierern Kopfschmerzen bereitete, und sie wurden es los. Das scheint der Kern dieser Diskussion zu sein. Eine Seite sagt, CSS sei zu schwierig, die andere Seite sagt, man müsse ein CSS-Meister werden.

Bei einfachen Layoutproblemen sollten Sie die Regel "Präsentation muss vollständig getrennt sein" nicht biegen. Was ist mit einem neuen Tag (oder einer Erweiterung des div-Tags), mit dem wir die Präsentation direkt in HTML steuern können? Lassen wir die Präsentation nicht schon in HTML durch? Schau dir h1, h2 ... h6 an. Wir alle kennen diese Kontrolldarstellung.

Die Fähigkeit zum Lesen von Code (und HTML ist Code) ist sehr wichtig. Gurus neigen dazu zu übersehen, wie wichtig es ist, eine Programmierumgebung für die Massen so zugänglich wie möglich zu machen. Es ist sehr kurzsichtig zu denken, dass nur professionelle Programmierer wichtig sind.

2
user825628

Ein großes Problem für mich ist, dass das Rendern von Tabellen, insbesondere von verschachtelten Tabellen, viel länger dauert als eine ordnungsgemäß gestaltete CSS-Implementierung. (Sie können CSS genauso langsam machen).

Alle Browser rendern die CSS schneller, da jedes div ein separates Element ist, sodass ein Bildschirm geladen werden kann, während der Benutzer liest. (Für große Datenmengen usw.). In diesem Fall habe ich CSS anstelle von Tabellen verwendet und mich nicht einmal mit Layout befasst.

Eine verschachtelte Tabelle (Tabellen in Zellen usw.) wird erst im Browserfenster gerendert, wenn das letzte "/ table" gefunden wurde. Schlimmer noch - eine schlecht definierte Tabelle wird manchmal nicht einmal gerendert! Oder wenn doch, verhalten sich die Dinge schlecht. (nicht richtig mit "TD" 's etc. colspanning)

Ich benutze Tabellen für die meisten Dinge, aber wenn es um große Datenmengen und den Wunsch geht, dass ein Bildschirm für Endbenutzer schnell gerendert wird, versuche ich mein Bestes, um das zu nutzen, was CSS zu bieten hat.

2
Tim Fischer

Ich musste Sites auf beide Arten erstellen, plus ein drittes, das gefürchtete "Hybrid" -Layout mit Tabellen, Divs und Styles: Divs/CSS gewinnt handlich.

Sie müssten drei Divs tief verschachteln, um das Codegewicht von nur einer Tabellenzelle auf Anhieb zu erreichen. Dieser Effekt skaliert mit verschachtelten Tabellen.

Ich würde es auch vorziehen, eine Layoutänderung gegenüber einer Änderung für jede Seite auf meiner Website vorzunehmen.

Ich habe die volle Kontrolle über jeden Aspekt der Präsentation mit divs/css. Tabellen vermasseln das auf abscheuliche Weise, besonders im IE, einem Browser, den ich noch nie unterstützt habe.

Meine Zeit für die Pflege oder Neugestaltung einer divs/css-Website ist ein Bruchteil dessen, was es in Tabellen wäre.

Schließlich kann ich mit CSS und praktisch jeder Skriptsprache mehrere umschaltbare Layouts innovieren. Das wäre für mich mit Tischen unmöglich.

Viel Glück mit Ihrem ROI, wenn Sie diese Entscheidung treffen.

2
John Dunagan

Ein Beispiel: Sie möchten den Hauptinhaltsbereich einer Seite zentrieren, aber um die Floats darin zu speichern, muss sie floatet werden. In CSS gibt es kein "float: center".

Dies ist nicht der einzige Weg, um "die Schwimmer" in einem zentrierten Element zu halten. Also überhaupt kein gutes Argument!

In gewisser Weise ist es eine falsche Prämisse, die Sache "divs vs tables".

Schnelle und schmutzige Aufteilung einer Seite in drei Spalten? Tabellen sind einfacher, um ehrlich zu sein. Kein Fachmann verwendet sie mehr für das Layout, da sie die Positionierung von Seitenelementen in der Seite verriegeln.

Das eigentliche Argument ist "Positionierung durch CSS (hoffentlich in einer entfernten Datei)" im Gegensatz zu "Positionierung durch HTML in der Seite". Sicherlich kann jeder die Vorteile des ersteren gegenüber dem letzteren sehen?

  1. Größe - Wenn sich Ihr Seitenlayout im HTML-Code befindet, kann es auf den Seiten nicht zwischengespeichert werden und muss auf jeder Seite wiederholt werden. Sie sparen enorm viel Bandbreite, wenn sich Ihr Layout in einer zwischengespeicherten CSS-Datei befindet und nicht auf der Seite.
  2. Mehrere Entwickler können gleichzeitig an derselben Seite arbeiten - ich arbeite an HTML, andere arbeiten an CSS. Kein Repository erforderlich, keine Probleme mit Überschreiben, Sperren von Dateien usw.
  3. Das Vornehmen von Änderungen ist einfacher - es wird Probleme mit dem Layout in verschiedenen Browsern geben, aber Sie müssen nur eine Datei, die CSS-Datei, reparieren, um sie zu sortieren.
  4. Zugänglichkeit, wie bereits erwähnt. In Tabellen wird davon ausgegangen, dass ein zweidimensionales Layout für alle funktioniert. So sehen manche Nutzer Ihre Inhalte nicht und Google sieht Ihre Inhalte nicht.

Bedenken Sie:

[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]

dies entspricht zwei Zeilen einer Tabelle mit 6 Zellen. Jemand, der das 2D-Tabellenlayout sehen kann, sieht eine Beschriftung unter jedem Bild. Aber mit Sprachsynthese oder einem PDA und für eine Suchmaschinenspinne, das ist

picture picture picture caption caption caption

und die Beziehung, die mit der Tabelle offensichtlich ist, verschwindet.

Sind DIVs und CSS besser für die Aufgabe einfach Rechtecke auf einer HTML-Seite auslegen, um in kürzester Zeit ein bestimmtes Design zu erzielen? Nein, wahrscheinlich nicht. Aber ich bin nicht in der Lage, Rechtecke schnell auszulegen, um ein bestimmtes Design zu erzielen. Ich denke an ein viel größeres Bild.

2
AmbroseChapel

Durch die Trennung von Inhalt und Layout können Sie auch einfacher druckerfreundliche Layouts oder nur verschiedene Skins (Stile) für Ihre Site erstellen, ohne unterschiedliche HTML-Dateien erstellen zu müssen. Einige Browser (wie Firefox) unterstützen sogar die Auswahl eines Stylesheets aus dem Ansichtsmenü.

Und ich denke, es ist einfacher, ein tabellenloses Layout beizubehalten. Sie müssen sich keine Gedanken über Zeilen- oder Spaltenabstände machen. Sie erstellen einfach einige Container-Divs und platzieren den Inhalt dort, wo Sie ihn benötigen. Und das sagte ich denke es ist auch lesbarer (<div id="sidebar"> vs <tr><td>...</td><td>...<td>sidebar</td></tr>).

Es ist nur ein kleiner Trick, den Sie lernen müssen (und wenn Sie den Trick erst einmal gemeistert haben, denke ich, dass er einfacher und sinnvoller ist).

2
Grad van Horck

Um auf das Argument "Tabellen sind langsamer" zu antworten, denken Sie, dass die Renderzeit die falsche Metrik ist. Sehr oft schreiben Entwickler eine große Tabelle, um das gesamte Layout für eine Seite zu erstellen - was die Größe der herunterzuladenden Seite erheblich vergrößert. Ob es Ihnen gefällt oder nicht, es gibt immer noch eine Menge DFÜ-Benutzer.

Siehe auch: Überbeanspruchen von ViewState

1
Greg Hurlman

Aus früheren Erfahrungen musste ich mich für DIV entscheiden. Selbst in OOP besteht das Hauptziel darin, die Kopplung zwischen Objekten zu verringern, sodass dieses Konzept auf DIVS und Tabellen angewendet werden kann. Tabellen dienen zum Speichern von Daten, nicht zum Anordnen von Daten auf einer Seite. Ein DIV wurde speziell entwickelt, um Elemente auf einer Seite anzuordnen. Daher sollte das Design DIVs verwenden. Tabellen sollten zum Speichern von Daten verwendet werden.

Außerdem ist das Bearbeiten von Websites, die mit Tabellen erstellt wurden, einfach schwierig (meiner Meinung nach).

1
Richard

die Positionierung von divs und CSS ermöglicht ein flexibleres Design, das das Ändern und Schablonieren Ihrer Webseiten erleichtert.

Das heißt, wenn Sie nicht an der Flexibilität interessiert sind, ist die Verwendung einer Tabelle anstelle einiger Divs, die von CSS in eine Tabelle umgewandelt werden, auf jeden Fall viel einfacher und schneller. Ich neige dazu, Tabellen zu verwenden, wenn ich ein Design aufmache, nur um es ein bisschen schneller richtig aussehen zu lassen.

1
workmad3

Wenn ich mein Layout mit CSS entwerfe, gebe ich im Allgemeinen jedem Hauptabschnitt eine eigene Wurzel (Körperebene) div und verwende relative/absolute Positionierung, um es an die richtige Stelle zu bringen. Dies ist etwas flexibler als Tabellen, da ich nicht auf eine Anordnung beschränkt bin, die ich mithilfe von Zeilen und Spalten darstellen kann.

Wenn ich mich entscheide, das Layout neu zu ordnen (z. B., dass die Navigationsleiste jetzt rechts angezeigt wird), kann ich einfach die Position der Elemente an einer Stelle ändern (die CSS-Datei), und der HTML-Code wird nicht angezeigt. nicht ändern müssen. Wenn ich das mit Tabellen machen würde, müsste ich nach Informationen suchen und viel Attribut modifizieren und kopieren und einfügen, um den gleichen Effekt zu erzielen.

Tatsächlich kann ich mit CSS sogar meine Benutzer auswählen, wie ihr Layout funktionieren soll. Solange sich die allgemeine Größe der Inhaltsbereiche nicht ändert, kann ich ein bisschen PHP Scripting verwenden, um mein CSS basierend auf den Benutzereinstellungen auszugeben und es ihnen zu ermöglichen, die Site neu zu ordnen ihre eigenen Vorlieben. Wieder möglich mit Tischen, aber viel schwerer zu pflegen.

Schließlich bietet CSS einen MAJOR-Vorteil, den Tabellen niemals bieten werden: die Möglichkeit, Inhalte basierend auf dem Anzeigegerät neu zu formatieren. Mit CSS kann ich einen völlig anderen Stilsatz (einschließlich Position, Formatierung usw.) für einen Drucker verwenden als den, den ich für den Monitor verwende. Dies kann auch auf andere Medien ausgeweitet werden. Ein hervorragendes Beispiel ist Opera Show, mit dem eine clever gestaltete (und sehr standardisierte) CSS-erweiterte Seite als Diashow angezeigt werden kann.

Am Ende sind Flexibilität und Management die wirklichen Gewinner. Im Allgemeinen können Sie mit CSS mehr aus dem Layout herausholen. An einem tabellenbasierten Layout ist nichts technisch nicht standardgemäß, aber warum sollten Sie sich einschränken?

1
Nicholas Flynt

In der Vergangenheit hatten Screenreader und andere Eingabehilfen Schwierigkeiten, Tabellen effizient zu handhaben. Bis zu einem gewissen Grad wurde dies in Bildschirmlesegeräten durch das Umschalten zwischen einem "Tabellen" -Modus und einem "Layout" -Modus auf der Grundlage dessen, was es in der Tabelle sah, gehandhabt. Dies war oft falsch und so mussten die Benutzer den Modus manuell wechseln, wenn sie durch Tabellen navigierten. In jedem Fall waren und sind die großen, oft stark verschachtelten Tabellen mit einem Screenreader nur sehr schwer zu navigieren.

Dasselbe gilt, wenn divs oder andere Elemente auf Blockebene zum erneuten Erstellen von Tabellen verwendet werden und stark verschachtelt sind. Der Zweck von divs ist es, als Informations- und Layoutelement verwendet zu werden, und als solches sollen ähnliche Informationen gespeichert und für visuelle Benutzer auf dem Bildschirm angezeigt werden. Wenn ein Screenreader auf eine Seite stößt, ignoriert er häufig Layoutinformationen, sowohl auf CSS-Basis als auch auf HTML-Basis (Dies gilt nicht für alle Screenreader, sondern für die beliebtesten wie JAWS, Windows Eyes und Orca für Linux ist es).

Zu diesem Zweck werden tabellarische Daten, d. H. Daten, die logisch sinnvoll sind, um in zwei oder mehr Dimensionen mit einer Art von Überschriften angeordnet zu werden, am besten in Tabellen platziert und verwenden divs, um das Layout des Inhalts auf der Seite zu verwalten. (Eine andere Möglichkeit, sich vorzustellen, was "tabellarische Daten" sind, besteht darin, sie in Diagrammform zu zeichnen. Wenn dies nicht möglich ist, wird sie wahrscheinlich nicht am besten in einer Tabelle dargestellt.)

Schließlich werden bei einem tabellenbasierten Layout häufig stark verschachtelte Tabellen verwendet, um eine fein abgestimmte Steuerung der Position von Elementen auf der Seite zu erreichen. Dies hat zwei Auswirkungen: 1.) Erhöhte Codegröße für jede Seite - Da Navigation und gemeinsame Struktur häufig mit den Tabellen durchgeführt werden, wird für jede Anforderung derselbe Code über das Netzwerk gesendet, während die CSS-Datei von einem div/css-basierten Layout abgerufen wird über einmal und verwendet dann weniger wortreiche divs. 2.) Bei stark verschachtelten Tabellen dauert das Rendern des Client-Browsers viel länger, was zu etwas langsameren Ladezeiten führt.

In beiden Fällen werden diese Faktoren durch die Erhöhung der "Last Mile" -Bandbreite sowie durch viel schnellere PCs gemildert, die jedoch für viele Standorte immer noch ein Problem darstellen.

In Anbetracht dessen sind Tabellen, wie andere bereits gesagt haben, einfacher, weil sie rasterorientierter sind und weniger Gedanken zulassen. Wenn zu erwarten ist, dass die betreffende Site nicht lang ist oder nicht gewartet wird, ist es möglicherweise sinnvoll, die einfachste Methode zu verwenden, da dies möglicherweise die kostengünstigste ist. Wenn die erwartete Nutzerbasis jedoch einen erheblichen Teil der behinderten Personen umfasst oder wenn die Site für längere Zeit von anderen gepflegt wird, kann es sich am Ende auszahlen, die Zeit im Voraus zu verwenden, um die Dinge in einer übersichtlichen und zugänglichen Weise zu erledigen.

1
cdeszaq

Ich verstehe immer noch nicht ganz, wie Divs/CSS es einfacher macht, ein Seitendesign zu ändern, wenn man den Umfang der Tests berücksichtigt, um sicherzustellen, dass die Änderungen in allen Browsern funktionieren, insbesondere bei allen Hacks und so weiter. Es ist ein äußerst frustrierender und langwieriger Prozess, der viel Zeit und Geld verschwendet. Zum Glück gilt die 508-Gesetzgebung nur für die USA (Land der Freien - ja, richtig). Da ich in Großbritannien ansässig bin, kann ich Websites in jedem von mir gewählten Stil entwickeln. Entgegen der landläufigen (US-) Meinung gilt die Gesetzgebung in Washington nicht für den Rest der Welt - Gott sei Dank. Es muss ein guter Tag in der Welt des Webdesigns gewesen sein, als die Gesetzgebung in Kraft trat. Ich glaube, ich werde mit zunehmendem Alter von 25 Jahren in der IT-Branche immer zynischer, aber ich bin mir sicher, dass diese Art von Gesetzgebung nur dem Schutz von Arbeitsplätzen dient. In Wirklichkeit kann jeder eine vernünftige Webseite mit ein paar Tabellen zusammenstellen. Es erfordert viel mehr Aufwand und Wissen, um dies mit DIVs/CSS zu tun. Meiner Erfahrung nach kann es Stunden und Stunden dauern, bis Googeln Lösungen für ganz einfache Probleme findet und unverständliche Artikel in Foren voller idealistischer Eiferer liest, die sich alle über die „richtige“ Art und Weise streiten, Dinge zu tun. Sie können nicht einfach Ihre Zehen ins Wasser tauchen und die Dinge in jedem Fall richtig zum Laufen bringen. Es scheint mir auch, dass das Fehlen einer definitiven Anleitung zur Verwendung von DIVS/CSS "out of the box", die für alle Situationen gilt, auf Browsern funktioniert und in "normaler" Sprache ohne Geek geschrieben ist, auch nach a riecht bisschen Protektionismus.
Ich bin ein Anwendungsentwickler und würde sagen, dass es fast doppelt so lange dauert, um Layoutprobleme herauszufinden und auf allen Browsern zu testen, als die Basisanwendung zu erstellen, Geschäftsobjekte zu entwerfen und zu implementieren und die Datenbank zu erstellen hinteres Ende. Meine Zeit = Geld, sowohl für mich als auch für meine Kunden. Es tut mir leid, wenn ich nicht alle Pro-DIV/CSS-Argumente ablehne, um die Kosten zu senken und meinen Kunden ein gutes Preis-Leistungs-Verhältnis zu bieten. Vielleicht ist es genau die Art und Weise, wie Entwickler denken, aber es scheint mir viel einfacher zu sein, eine komplexe Tabellenstruktur zu ändern, als DIVs/CSS zu modifizieren. Zum Glück scheint es jetzt eine Lösung für diese Probleme zu geben - die sogenannte WPF.

1
Tim Black

Ich denke, es interessiert niemanden, wie eine Website entworfen/implementiert wurde, wenn sie sich großartig verhält und schnell funktioniert.

Ich verwende sowohl "table" als auch "div"/"span" -Tags im HTML-Markup.

Lassen Sie mich einige Argumente nennen, warum ich divs wähle:

  1. für eine Tabelle müssen Sie mindestens 3 Tags schreiben (table, tr, td, thead, tbody), für ein ansprechendes Design haben Sie manchmal viele verschachtelte Tabellen

  2. Ich habe gerne Komponenten auf der Seite. Ich weiß nicht genau, wie ich es erklären soll, aber ich werde es versuchen. Angenommen, Sie benötigen ein Logo, das nur ein kleines Stück über dem nächsten Seiteninhalt platziert werden muss. Bei Verwendung von Tabellen müssen Sie 2 Bilder ausschneiden und diese in 2 verschiedene TDs einfügen. Mit DIVs können Sie ein einfaches CSS haben, um es nach Ihren Wünschen anzuordnen. Welche Lösung gefällt Ihnen am besten?

  3. wenn mehr als 3 geschachtelte Tabellen für etwas tun, denke ich, es mit Divs neu zu entwerfen

ABER ich benutze noch Tabellen für:

  1. tabellendaten

  2. inhalt, der sich selbst erweitert

  3. schnelle Lösungen (Prototypen), da das DIV - Boxmodell in jedem Browser anders ist, weil viele Generatoren Tabellen usw. verwenden

1
Dani

Indem wir immer noch Tabelle für Layouts verwenden, fehlt uns die Innovation auf der Div-Seite.

Viele haben Lösungen gefunden, die das Erstellen von Layouts für Divs erleichtern. Am beliebtesten ist die Gitterarchitektur. Es gibt dynamische Layoutgeneratoren, die auf dieser Architektur basieren. Check out: 1) 960.gs und (http://grids.heroku.com/) 2) Blaupause und so viele in letzter Zeit.

Ich habe nicht viel Innovation in Bezug auf Architektur und Werkzeuge mit dem Tabellenlayout gesehen.

Abgesehen von allen Theorien würde ich sagen, dass das Layout mit CSS und divs praktisch schneller ist. Vielmehr machten Innovationen in diese Richtung es einfacher als alles andere.

1
Pixelgrey

Tabellen eignen sich gut für HTML, das Sie für etwas Einfaches oder Temporäres zusammenfassen. Wenn Sie eine große Website erstellen, sollten Sie Divs und CSS verwenden, da die Pflege im Laufe der Zeit einfacher ist, wenn sich Ihre Website ändert.

1
Adam Rosenfield

1: Ja, Ihre Benutzer kümmern sich darum. Wenn sie einen Bildschirmleser verwenden, geht dieser verloren. Wenn ich ein anderes Tool verwende, das versucht, Informationen von der Seite zu extrahieren, ist es irreführend, auf Tabellen zu stoßen, die nicht zur Darstellung von Tabellendaten verwendet werden.

Zum Trennen von Inhalten ist ein Div oder Span zulässig, da genau die Bedeutung dieser Elemente ist. Wenn ich, eine Suchmaschine, ein Bildschirmleseprogramm oder etwas anderes, auf ein Tabellenelement stoße, erwarten wir, dass dies bedeutet, dass "das Folgende tabellarische Daten sind, die in einer Tabelle dargestellt werden". Wenn wir auf ein div stoßen, erwarten wir, dass "dies ein Element ist, das verwendet wird, um meinen Inhalt in separate Teile oder Bereiche zu unterteilen .

2: Lesbarkeit: Falsch. Wenn sich der gesamte Präsentationscode in CSS befindet, kann ich den HTML-Code lesen und den Inhalt der Seite verstehen. Oder ich kann die CSS lesen und die Präsentation verstehen. Wenn im HTML-Code alles durcheinander gebracht wird, muss ich im Kopf alle Teile der Präsentation durchstreichen, bevor ich überhaupt sehen kann, was Inhalt ist und was nicht. Außerdem würde ich Angst haben, einen Webentwickler zu treffen, der CSS nicht versteht, daher denke ich nicht, dass dies ein Problem ist.

3: Tabellen sind langsamer: Ja, das sind sie. Der Grund ist einfach: Tabellen müssen vollständig analysiert werden , einschließlich ihres Inhalts, bevor sie gerendert werden können. Ein div kann gerendert werden, wenn es angetroffen wird, sogar bevor sein Inhalt analysiert wurde. Das bedeutet, dass Divs angezeigt werden, bevor die Seite vollständig geladen wurde.

Hinzu kommt, dass Tabellen sehr viel anfälliger sind und in verschiedenen Browsern mit unterschiedlichen Schriftarten und Schriftgrößen und all den anderen Faktoren, die zu einem unterschiedlichen Layout führen können, nicht immer gleich gerendert werden. Tabellen sind eine hervorragende Möglichkeit, um sicherzustellen, dass Ihre Website in bestimmten Browsern um ein oder zwei Pixel kleiner ist, nicht gut skaliert wird, wenn der Benutzer seine Schriftgröße ändert oder seine Einstellungen auf andere Weise ändert.

Natürlich ist die Nummer 1 die große. Viele Tools und Anwendungen hängen von der semantischen Bedeutung einer Webseite ab. Das übliche Beispiel sind Screenreader für sehbehinderte Benutzer. Wenn Sie ein Webentwickler sind, werden Sie feststellen, dass viele große Unternehmen, die Sie andernfalls einstellen, um an einer Site zu arbeiten, verlangen , dass die Site auch in diesem Fall zugänglich ist. Was bedeutet, dass Sie über die semantische Bedeutung Ihres HTML nachdenken müssen. Mit dem Semantic Web oder besser gesagt mit Mikroformaten, RSS-Readern und anderen Tools wird Ihr Seiteninhalt nicht mehr ausschließlich über einen Browser angezeigt.

1
jalf

Ich entschuldige mich für mein Englisch, aber hier ist ein weiterer Grund:

Ich habe in einer Regierungsorganisation gearbeitet und der Hauptgrund, warum ich TABLE nicht benutze, ist für behinderte Menschen. Sie verwenden Maschinen zum "Übersetzen" von Webseiten.

Das Problem ist, dass diese "Übersetzungsmaschine" die Website nicht lesen kann, wenn sie von TABLE ausgeführt wird. Warum ? Weil TABLE für DATEN sind.

wenn Sie TABELLEN verwenden, müssen Sie für jede ZELLE einige Informationen angeben, damit behinderte Menschen wissen, wo sie sich in der TABELLE befinden. Stellen Sie sich vor, Sie haben einen großen Tisch und müssen zoomen, um nur eine Zelle auf dem Bildschirm zu sehen: Sie müssen wissen, in welcher Zeile/Spalte Sie sich befinden.

Daher wird DIV verwendet, und Behinderte können einfach Text lesen und erhalten keine seltsamen Informationen zu Zeilen/Spalten, wenn sie nicht dort sein müssen.

Ich bevorzuge TABLE auch, um schnelle und einfache Vorlagen zu erstellen, aber ich bin jetzt an CSS gewöhnt ... es ist mächtig, aber man muss wirklich wissen, was man tut ... :)

1
RVeur23

Flex verfügt über ein Tag zum Anordnen von Objekten in vertikalen Spalten. Ich denke nicht, dass sie das gesamte Layout/den gesamten Inhalt richtig verstanden haben, aber zumindest haben sie dieses Problem gelöst.

Wie viele Leute, die mit CSS frustriert sind, habe ich auch weit und breit nach einer einfachen Antwort gesucht, mich hocherfreut gefühlt, als ich glaubte, sie gefunden zu haben, und meine Hoffnungen waren zerbrochen, als ich die Seite in Chrome aufschlug. Ich bin definitiv nicht in der Lage zu sagen, dass dies nicht möglich ist, aber ich habe noch niemanden gesehen, der Beispielcode für Peer-Reviews anbietet, um eindeutig zu beweisen, dass dies zuverlässig möglich ist.

Kann also jemand von der CSS-Seite dieser Insel eine Denkweise/Methodik für das Layout vertikaler Spalten empfehlen? Ich habe versucht, in der zweiten und dritten Reihe absolut zu positionieren, aber am Ende überlappen sich die Inhalte überall und Float hat ähnliche Probleme, wenn die Seite verkleinert wird.

Wenn es eine Antwort auf diese Frage gäbe, wäre ich begeistert von -mach das Richtige - Sag mir einfach etwas wie: "Hey, hast du es versucht? * * flow: vertical | horizontal "und ich habe keine Haare mehr.

1
Shanimal

Google misst dem Textinhalt in einer Tabelle eine sehr niedrige Priorität bei. Ich gab einer örtlichen Wohltätigkeitsorganisation SEO-Ratschläge. Bei der Prüfung ihrer Website wurden Tabellen zum Layout der Website verwendet. Betrachtet man jede Seite, unabhängig davon, welche Wörter - oder Wortkombinationen - von den Seiten stammen, die ich im Google-Suchfeld verwendet habe, werden die Seiten auf keiner der Top-Suchseiten angezeigt. (Durch Angabe der Site in der Suche wurde die Seite jedoch zurückgegeben.) Eine Seite wurde nach normalen Standards gut kopiert, um bei einer Suche ein gutes Ergebnis zu erzielen, sie wurde jedoch auf keiner der ersten Seiten der zurückgegebenen Suchergebnisse angezeigt . (Beachten Sie, dass sich dieser Text in einer Tabelle befand.) Dann entdeckte ich einen Textabschnitt auf den Seiten, der sich nicht in einer Tabelle, sondern in einem div befand. Wir haben einige der Wörter aus diesem Div in die Suchmaschine eingegeben. Ergebnis? Es kam bei No.2 im Suchergebnis herein.

1
Simon Measures

Ich habe einmal gelernt, dass eine Tabelle sofort geladen wird, mit anderen Worten, wenn eine Verbindung langsam ist, der Bereich, in dem die Tabelle geladen wird, leer bleibt, bis die gesamte Tabelle geladen ist und unabhängig davon, ob es bereits vollständig ist oder nicht.

1
Davy

Verwenden Sie Tabellen, wenn Sie sicherstellen möchten, dass Elemente im Layout in einer bestimmten physischen Beziehung bleiben müssen. Für Daten ist die Tabelle im Allgemeinen das beste Layoutelement, da Sie nicht möchten, dass Ihre Spalten auf unerwartete Weise umgebrochen werden und die Assoziationen verwirren.

Man könnte auch argumentieren, dass Nicht-Datenelemente, die in einer bestimmten Beziehung verbleiben müssen, auch in einer Tabelle gerendert werden sollten.

Flexible CSS-Layouts eignen sich hervorragend für Inhalte, die für mobile Geräte und große Bildschirme sowie für Druck- und andere Anzeigearten geeignet sind. Manchmal muss der Inhalt jedoch nur sehr spezifisch angezeigt werden. es könnte sehr gut gerechtfertigt sein.

1
Sal

Ich versuche, TABELLEN so weit wie möglich zu vermeiden, aber wenn wir komplexe Formulare entwerfen, die mehrere Steuerelementtypen und unterschiedliche Beschriftungspositionen mit ziemlich strengen Steuerelementen für die Gruppierung kombinieren, ist die Verwendung von DIVs unzuverlässig oder oft nahezu unmöglich.

Ich werde jetzt nicht argumentieren, dass diese Formulare nicht neu gestaltet werden könnten, um ein DIV-basiertes Layout besser zu unterstützen, aber für einige von ihnen besteht unser Kunde darauf, die vorhandenen Layouts aus der Vorgängerversion (geschrieben in klassischem ASP) nicht zu ändern, da sie a entsprechen Papierform, mit der die Benutzer vertraut sind.

Da die Darstellung der Formulare dynamisch ist (wobei die Anzeige einiger Abschnitte vom Status des Falls oder den Berechtigungen des Benutzers abhängt), verwenden wir Gruppen gestapelter Divs, die jeweils eine Tabelle mit logisch gruppierten Formularelementen enthalten. Jede Spalte der TABELLE ist so klassifiziert, dass sie von CSS gesteuert werden kann. Auf diese Weise können wir verschiedene Abschnitte des Formulars deaktivieren, ohne das Problem zu haben, dass keine Tabelle zum Umbrechen von Zeilen in Divs vorhanden ist.

1
CMPalmer

Ich habe mich vor einigen Jahren mit dem Thema Screenreader und Tabellen befasst und dabei Informationen gefunden, die der Meinung der meisten Entwickler widersprechen:

http://www.webaim.org/techniques/tables/

"Sie werden wahrscheinlich einige Befürworter der Barrierefreiheit hören, die sagen, Layouttabellen seien eine schlechte Idee, und stattdessen sollten CSS-Layouttechniken verwendet werden. Es stimmt, was sie sagen, aber um ehrlich zu sein, ist die Verwendung von Tabellen für das Layout nicht die schlechteste Was Sie in Bezug auf die Barrierefreiheit tun können. Menschen mit allen Arten von Behinderungen können problemlos auf Tabellen zugreifen, sofern die Tabellen barrierefrei gestaltet sind. "

1
Rimian

Ich glaube, dies ist ein Problem, das mit einem allgemeinen Problem zusammenhängt. Als HTML geboren wurde, konnte niemand seine weit verbreitete Verwendung vorhersehen. Eine weitere Technologie, die unter dem Einfluss ihres eigenen Erfolgs fast zusammengebrochen wäre. Wenn HTML-Seiten in vi auf einem grünen Textterminal geschrieben wurden, reichte eine TABELLE aus, um den Besuchern der Seite Daten zu präsentieren, und es waren meistens Daten, die in tabellarischer Form Sinn machten.

Wir alle wissen, wie sich die Dinge entwickelt haben. TABELLEN sind erst vor relativ kurzer Zeit aus der Mode gekommen, aber es gibt viele Gründe, DIV- und CSS-basierte Layouts zu bevorzugen (Barrierefreiheit ist nicht das letzte). Natürlich kann ich kein CSS schreiben, um mein Leben zu retten :-) und ich denke, ein Experte für Grafikdesign sollte immer zur Hand sein.

Das heißt ... es gibt viele Daten, die auch auf einer modernen Website in einer Tabelle dargestellt werden sollten.

1
Manrico Corazzi

Wenn Sie den Tabellenwinkel unterstützen, suchen Sie sich eine Site mit Tabellen und holen Sie sich einen Screenreader - schalten Sie den Screenreader aus und den Monitor aus.

Versuchen Sie es dann mit einer semantisch korrekten div-Layout-Site.

Sie werden den Unterschied sehen.

Tabellen sind nicht böse, wenn die darin enthaltenen Daten tabellarisch sind, um die Seite nicht zu layouten.

1
Allen Hardy

Wenn zu viele Tabellen verschachtelt sind, bedeutet das Rendern der Seite meines Wissens nach einen erheblichen Mehraufwand für den Browser.

1 - Der Browser wartet, bis die endgültige Ansicht geladen ist, bis die gesamte Tabelle geladen ist.

2 - Der Algorithmus zum Rendern der Tabelle ist teuer und geht nicht auf einmal. Der Browser versucht beim Abrufen des Inhalts, die Breite und Höhe des Inhalts zu berechnen. Wenn Sie also geschachtelte Tabellen haben, zum Beispiel, wenn der Browser die erste Zeile empfangen hat und die erste Zelle eine große Menge an Inhalt und nicht definierter Breite und Höhe hat, berechnet sie die Breite und rendert die erste Zeile während es die 2. Reihe erhält, hat Zelle # 2 viel Inhalt! Es wird nun die Breite für Zellen der 2. Reihe berechnet. Was ist mit der ersten? Es werden Breiten rekursiv berechnet. Das ist auf Kundenseite schlecht. (Um ein Beispiel aufzustellen) Als Programmierer optimieren Sie Dinge wie die Zeit zum Abrufen von Daten, optimierte Datenstrukturen usw. Sie optimieren Dinge, die serverseitig ausgeführt werden sollen, beispielsweise in 2 Sekunden, aber der Endbenutzer erhält die endgültige Ansicht 8 sek. Was ist hier falsch ? 1. Möglicherweise ist das Netzwerk langsam! Was ist, wenn das Netzwerk in Ordnung ist? Was ist das Netzwerk liefert den Inhalt in den nächsten 1 Sekunden? Wo werden diese zusätzlichen 5 Sekunden verbraucht? Bedenken Sie Folgendes: Der Browser nimmt möglicherweise viel Zeit in Anspruch, um die Tabellen zu schätzen und zu rendern.

Wie kann man Tabellen optimieren? Wenn Sie Tabellen verwenden, würde ich vorschlagen, immer die Breite für die Zellen zu definieren. Dies garantiert nicht, dass der Browser nur diese Breiten blind annimmt, wäre jedoch eine große Hilfe für den Browser bei der Entscheidung über die anfänglichen Breiten.

Aber am Ende ist div eine großartige Möglichkeit, da CSS vom Browser zwischengespeichert werden kann. während Tabelle nicht zwischengespeichert werden!

1
Biranchi Panda

Tabellen, die als reines Layout verwendet werden, stellen einige Probleme für die Barrierefreiheit dar (wie ich gehört habe). Aber ich verstehe, was hier gefragt wird, dass Sie das Web irgendwie verkrüppeln, indem Sie eine Tabelle verwenden, um die korrekte Ausrichtung von etwas auf Ihrer Seite sicherzustellen.

Ich habe gehört, dass die Leute zuvor argumentiert haben, dass FORM-Bezeichnungen und -Eingaben tatsächlich Daten sind und dass sie in Tabellen aufgenommen werden sollten.

Das Argument, dass die Verwendung einer Tabelle, um sicherzustellen, dass einige Elemente korrekt ausgerichtet sind, zu dieser massiven Zunahme des Codes führt, enthält in der Regel Beispiele dafür, wie ein einzelner DIV alle seine Anforderungen erfüllen kann. Sie enthalten nicht immer die 10 Zeilen CSS und spezielle Browser-Hacks, die sie für IE5, IE5.5, IE6, IE7 schreiben mussten ...

Ich denke, es geht immer noch darum, Balance in Ihrem Design zu verwenden. Tabellen befinden sich in der Toolbox. Denken Sie daran, wofür sie bestimmt sind.

0
HB

Sicherlich war die OP ein bisschen in die Jahre gekommen, die Argumente scheinen so wochenlang und leicht zu kontern.

Webseiten sind die Domäne von Webentwicklern, und wenn sie sagen, dass div & CSS besser ist als Tabellen, ist das gut genug für mich.

Wenn ein Layout durch Tabellen erzielt wird, die von einer Server-App generiert wurden, bedeutet ein neues Layout Änderungen an der App, eine Neuerstellung und ein Redelpoy der Anwendung, wie dies nur bei Änderungen an einer CSS-Datei der Fall ist.

Plus, Zugänglichkeit. Tabellen, die für das Layout verwendet werden, machen eine Website unzugänglich. Verwenden Sie sie daher nicht. Es ist ein Kinderspiel, nicht illegal zu erwähnen.

0
Ian

Superkurze Antwort: Das Entwerfen von wartbaren Websites ist mit Tabellen schwierig und mit der Standardmethode einfach.

Eine Website ist keine Tabelle, sondern eine Sammlung von Komponenten, die miteinander interagieren. Es macht keinen Sinn, es als Tabelle zu bezeichnen.

0
Rich Bradshaw

In Bezug auf die Wartung der Website und die Überarbeitung des Designs bei gleichzeitiger Pflege der Inhalte (was vor allem im E-Commerce immer wieder vorkommt):

Inhalt und Design werden über Tabellen zusammengeführt = Inhalt und Design werden aktualisiert.

Inhalt getrennt von Design = Aktualisierung von Design und vielleicht ein wenig Inhalt.

Wenn es nach mir ginge, würde ich meinen Inhalt in PHP generierendem XML belassen, in Markup in XSLT konvertiert und mit CSS und Javascript für die Interaktion entworfen. Für die Java Seite der Dinge, JSP zu JSTL, um das Markup zu generieren.

0
mltorrefranca

Mit DIV können Sie ganz einfach Dinge wechseln. Zum Beispiel könnten Sie dies machen:

Menu | Content

Content | Menu

Menu
----
Content

Es ist einfach, es in CSS zu ändern, nicht in HTML. Sie können auch mehrere Stile angeben (Rechtshänder, Linkshänder, speziell für kleine Bildschirme).

In CSS können Sie das Menü auch in einem speziellen Stylesheet ausblenden, das zum Drucken verwendet wird.

Eine andere gute Sache ist, dass Ihr Inhalt immer in der gleichen Reihenfolge im Code ist (das Menü zuerst, der Inhalt danach), auch wenn es optisch anders dargestellt wird.

0
ofaurax