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

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, Inhalte vom Layout zu trennen.
  Dies ist jedoch ein trügerisches Argument. Klischee denken . Ich denke, es ist wahr, dass die Verwendung des Tabellenelements für das Layout wenig mit tabellarischen Daten zu tun hat. Na und? Interessiert es meinen Chef? Interessieren sich meine Benutzer?
  
  Vielleicht ich oder meine Kollegen, die eine Webseitenpflege pflegen müssen ... Ist eine Tabelle weniger wartbar? Ich denke, die Verwendung einer Tabelle ist einfacher als die Verwendung von Divs und CSS.
  
  Übrigens ... warum ist die Verwendung eines div oder eines span eine gute Trennung von Inhalt und Layout und einer Tabelle nicht? Um ein gutes Layout nur mit Divs zu erhalten, sind häufig viele verschachtelte Divs erforderlich.

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

• Für SEO ist es besser, keine Tabellen zu verwenden.
  Warum? Kann jemand Beweise dafür vorlegen? Oder eine Aussage von Google, dass Tabellen aus SEO-Sicht nicht empfohlen werden?

• Tabellen sind langsamer.
  Ein zusätzliches tbody-Element muss eingefügt werden. Dies sind Erdnüsse 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, die aktualisiert werden müssen, benötigen ebenfalls neuen Inhalt (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind nicht sehr wahrscheinlich. Zen Garden ist eine schöne Website, aber ein bisschen theoretisch. Ganz zu schweigen vom Missbrauch von CSS.

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

Ich werde Ihre Argumente nacheinander durchgehen und versuchen, die darin enthaltenen Fehler 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 kommt möglicherweise nicht völlig in Frage (schließlich haben sich auch in anderen Sprachen neue Redewendungen entwickelt), aber mögliche negative Auswirkungen müssen ausgeglichen werden. Selbst wenn es heute keine Argumente gegen den Missbrauch des <table>Elements gäbe, könnte es morgen sein, da Browser-Anbieter das Element speziell behandeln. Schließlich wissen sie, dass „ <table>Elemente nur für tabellarische Daten bestimmt sind“ und können diese Tatsache nutzen, um die Rendering-Engine zu verbessern, das <table>Verhalten subtil zu ändern und damit Fälle zu brechen, in denen sie zuvor missbraucht wurden.

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

Hängt davon ab. Ist Ihr Chef spitzhaarig? Dann könnte es ihn nicht interessieren. Wenn sie kompetent ist, wird sie sich darum kümmern, weil die Benutzer es tun werden .

Vielleicht ich oder meine Kollegen, die eine Webseitenpflege pflegen müssen ... Ist eine Tabelle weniger wartbar? 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 benötigt ]} . Das Tabelle ist in der Tat weniger wartbar sollte klar sein. Die Verwendung 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. Auf der anderen Seite, vernünftige Nutzung von semantisch sinnvoller HTML mit CSS kombiniert könnte solche Änderungen an die CSS beschränken und die verwendeten Bilder.

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

Tief verschachtelte <div>s sind genau wie Tabellenlayouts ein Anti-Pattern. Gute Webdesigner brauchen nicht viele von ihnen. Auf der anderen Seite 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 teilen.

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. Dies ist wie zu sagen, ich sollte GVim oder Emacs nicht 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.

Für SEO ist es besser, 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 tabellarische Daten natürlich relevant sein könnten, ist es selten das, wonach Benutzer suchen. Benutzer suchen nach Begriffen, die im Seitentitel verwendet werden, oder nach ähnlich prominenten Positionen. Es wäre daher logisch, tabellarische Inhalte von der Filterung auszuschließen und damit die Verarbeitungszeit (und die Kosten!) Um einen großen Faktor zu reduzieren.

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

Das zusätzliche Element hat nichts damit zu tun, dass Tabellen langsamer sind. Andererseits ist der Layoutalgorithmus 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. Darüber hinaus 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 habe ich keine Benchmark-Daten. Ich würde mich selbst dafür interessieren, weil es richtig ist, dass diesem Argument eine gewisse wissenschaftliche Genauigkeit fehlt.

Die meisten Websites, die aktualisiert werden müssen, benötigen ebenfalls neuen Inhalt (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind nicht sehr wahrscheinlich.

Ganz und gar 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 sind immer viel enger. Darüber hinaus müssen Designänderungen gelegentlich dynamisch vorgenommen werden. Betrachten Sie Template-Engines, wie sie vom WordPress-Blogging-System 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 Dienst 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 nicht erreicht, und häufig 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 von Datensätzen.

Hier ist die Antwort meines 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 Fahrzeugklasse ist eine unangemessene Klasse für die Fahrradinstanz. Der Code ist fehlerfrei, aber semantisch falsch. Es reflektiert den Programmierer schlecht.

Semantik 102

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

Fazit

Werden Besucher es bemerken? Interessiert es Ihren Chef? Könnte sein. Schneiden wir manchmal als Programmierer Abstriche? Sicher. Aber sollten wir? Wer profitiert, wenn Sie semantisches Markup verwenden? Sie - und Ihr beruflicher Ruf. Jetzt geh und mach das Richtige.

Offensichtliche Antwort: Siehe CSS Zen Garden . Wenn Sie mir sagen, dass Sie mit einem tabellenbasierten Layout problemlos dasselbe tun können (denken Sie daran - der HTML-Code ändert sich nicht), 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 Ihr tabellenbasiertes Layout sie in der 3. Zelle der 2. Zeile der 2. verschachtelten Tabelle auf der Seite platziert.

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

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

Siehe diese doppelte Frage.

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

Ich denke auch, dass Sie die Auswirkungen einiger der Dinge, die Sie in der Frage erwähnt haben, unterschätzen. Wenn Sie beispielsweise sowohl Designer als auch Programmierer sind, wissen Sie möglicherweise nicht genau, wie gut Präsentation und Inhalt voneinander getrennt sind. Sobald Sie jedoch in ein Geschäft eintreten, 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, bietet CSS gegenüber Tabellen für das Layout erhebliche Vorteile. Und obwohl jedes Element für sich möglicherweise nicht das Verlassen von Tabellen rechtfertigt, lohnt es sich im Allgemeinen.

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

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

Das zeigt nur, dass selbst diejenigen, die sich für die strenge DIV & CSS-Religion einsetzen, ihre eigenen Regeln nicht befolgen können. Sie können dies als Richtlinie dafür verwenden, wie genau Sie ihnen folgen.

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 schöner Vorteil ist. Bei einer Druckseite können Sie die Navigation leise unterdrücken, ohne beispielsweise eine druckerfreundliche Seite erstellen zu müssen.

Eine Tabelle für das Layout wäre nicht so schlecht. Meistens können Sie jedoch nicht mit nur einer Tabelle das gewünschte Layout erhalten. Ziemlich bald haben Sie zwei oder drei verschachtelte Tabellen. Dies wird sehr umständlich.

• Es ist viel schwerer zu lesen. Das liegt nicht an 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.

• Tabellen binden Sie in ein Design ein. Sicher, nicht jeder braucht 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 wenig ändern musste. Mit CSS ist es viel einfacher.

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

Ich habe seit wahrscheinlich 4 Jahren keine Tabellen mehr 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

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

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

Das andere Problem beim Trennen des HTML-Codes vom CSS besteht darin, dass sie genaue Kenntnisse voneinander benötigen - Sie können sie wirklich nicht vollständig trennen. Das Tag-Layout im HTML-Code ist unabhängig von Ihrer Tätigkeit eng mit der CSS-Datei verknüpft.

Ich denke, Tabellen gegen Divs hängen von den Anforderungen Ihrer Anwendung ab.

In der Anwendung, die wir bei der Arbeit entwickeln, brauchten wir ein Seitenlayout, bei dem sich die Teile dynamisch an ihren Inhalt anpassen. Ich habe tagelang versucht, dies dazu zu bringen, browserübergreifend mit CSS und DIVs zu arbeiten, und es war ein Albtraum. Wir sind zu Tischen gewechselt und alles hat einfach funktioniert .

Wir haben jedoch ein sehr geschlossenes Publikum für unser Produkt (wir verkaufen ein Stück Hardware mit einer Webschnittstelle) und Probleme mit der Barrierefreiheit 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.

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 und dem Durchsuchen des Internets verbracht habe, um einen Teil des Markups mit einem obskuren Browser zum Laufen zu bringen - das macht mich verrückt. Sie nehmen eine kleine Änderung vor und das gesamte Layout läuft fürchterlich schief - wo unten liegt die Logik darin. Verbringen Sie Stunden damit, etwas 3 Pixel auf diese Weise zu bewegen, dann etwas anderes 2 Pixel das andere, um sie alle in eine Reihe zu bringen. Das scheint mir einfach irgendwie falsch zu sein. Nur weil Sie Purist sind und etwas "nicht das Richtige" ist, heißt das nicht, dass Sie es bis zum n-ten Grad und unter allen Umständen nutzen sollten, besonders wenn es Ihr Leben 1000-mal einfacher macht.

Also habe ich mich endlich entschieden, rein aus kommerziellen Gründen, obwohl ich mich 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 zu verwalten. Ich kann mich dann darauf konzentrieren, die Anwendung so zu gestalten, wie es der Kunde wünscht, anstatt den Puristen zu gefallen. Sie bezahlen schließlich die Rechnungen und mein Argument an einen 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 unzureichend ist und dass die Browser nicht miteinander kompatibel sind. Wenn dies der Fall wäre, wäre die Hälfte der Webdesigner weltweit arbeitslos .

Wenn Sie ein Fensterformular entwerfen, versuchen Sie nicht, Steuerelemente zu verschieben, nachdem Sie sie angelegt haben. Ich finde es daher seltsam, warum Sie dies mit einem Webformular tun möchten. Ich kann diese Logik einfach nicht verstehen. Holen Sie sich das richtige Layout 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 tatsächlich zum Laufen zu bringen, Geschäftsobjekte zu erstellen, Geschäftsregeln zu implementieren und herauszufinden, wie sich Kundendaten miteinander in Beziehung setzen, um sicherzustellen, dass die Sache den Kunden entspricht Anforderungen - wissen Sie - wie das Zeug der realen Welt.

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

Ein typisches Beispiel: Basierend auf dieser Diskussion habe ich einige vorhandene tds und trs in divs konvertiert. 45 Minuten damit herumzuspielen und zu versuchen, alles nebeneinander aufzustellen, und ich gab auf. TDs zurück in 10 Sekunden später - funktioniert - sofort - auf allen Browsern, nichts mehr zu tun. Bitte versuchen Sie mir verständlich zu machen - welche mögliche Rechtfertigung haben Sie dafür, dass ich es anders mache!

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 "Der Heilige Gral" bezeichnet.

Wenn Sie dann nicht "WTF" sagen, müssen Sie die Kool-Hilfe jetzt wirklich ablegen.

Ich liebe CSS. Es bietet erstaunliche Styling-Optionen und einige coole Positionierungswerkzeuge, ist aber als Layout-Engine mangelhaft. Es muss eine Art dynamisches Gitterpositionierungssystem geben. Eine einfache Möglichkeit, Boxen auf mehreren Achsen auszurichten, ohne vorher ihre Größe zu kennen. Es ist mir egal, ob Sie es <Tabelle> oder <Gitterlayout> oder was auch immer nennen, aber dies ist eine grundlegende Layoutfunktion, die in CSS fehlt.

Das größere Problem ist, dass die CSS-Fanatiker, indem sie nicht zugeben, dass Funktionen fehlen, CSS von allem zurückgehalten haben, was es sein könnte. Ich würde gerne keine Tabellen mehr verwenden, wenn CSS wie im Grunde jede andere Layout-Engine der Welt eine anständige mehrachsige Rasterpositionierung bieten würde. (Sie wissen, dass dieses Problem bereits in vielen Sprachen von allen außer dem W3C gelöst wurde, oder? Und niemand anderes bestritt, dass eine solche Funktion nützlich war.)

Seufzer. Genug Entlüftung. Gehen Sie voran und stecken Sie Ihren Kopf zurück in den Sand.

Gemäß der 508-Konformität (für Bildschirmleser für visuell unparteiische) sollten Tabellen nur zum Speichern von Daten und nicht für das Layout verwendet werden, da dies dazu führt, dass die Bildschirmleser ausflippen. Zumindest wurde mir gesagt.

Wenn Sie jedem der Divs Namen zuweisen, können Sie sie alle auch mithilfe von CSS zusammenfügen. Es ist nur ein bisschen schmerzhafter, so zu sitzen, wie Sie es brauchen.

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 Inhaltsbereich zwei weitere eingebettete Tabellen enthalten würde.

Eine andere Sache, über die man nachdenken sollte: Dateigrößen . 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.

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

Ihr Code hat auch aus semantischer Sicht eine Bedeutung .

Keine Argumente in DIVs sprechen für mich.

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 habe.

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

CSS-Layouts sind im Allgemeinen für die Barrierefreiheit viel besser, vorausgesetzt, der Inhalt kommt in einer natürlichen Reihenfolge und ist ohne Stylesheet sinnvoll. Und es sind nicht nur Bildschirmleser, die mit tabellenbasierten Layouts zu kämpfen haben. Sie erschweren es auch mobilen Browsern, eine Seite richtig zu rendern.

Mit einem div-basierten Layout können Sie mit einem Druck-Stylesheet sehr einfach coole Dinge tun, z. B. Kopf- und Fußzeilen sowie die Navigation von gedruckten Seiten ausschließen. Ich denke, es wäre unmöglich oder zumindest viel schwieriger, dies mit a zu tun tabellenbasiertes Layout.

Wenn Sie Zweifel haben, dass die Trennung von Inhalt und Layout mit divs einfacher ist als mit Tabellen, schauen Sie sich das div-basierte HTML bei CSS Zen Garden an , sehen Sie, wie das Ändern der Stylesheets das Layout drastisch ändern kann, und überlegen Sie, ob Sie dies könnten Erzielen Sie die gleiche Vielfalt an Layouts, wenn der HTML-Code tabellenbasiert ist ... Wenn Sie ein tabellenbasiertes Layout erstellen, ist es unwahrscheinlich, dass Sie CSS verwenden, um den gesamten Abstand und das Auffüllen in den Zellen zu steuern (wenn ja, Sie Ich würde es mit ziemlicher Sicherheit einfacher finden, schwebende Divs usw. überhaupt 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 angeben, bedeuten Tabellen in der Regel, dass Ihr Layout im HTML-Code sehr stark fixiert wird.

Realistisch gesehen ist es meiner Meinung nach sehr schwierig, das Layout eines Div- und CSS-basierten Designs vollständig zu ändern, ohne die Divs ein wenig zu ändern. Mit einem Div- und CSS-basierten Layout ist es jedoch viel einfacher, Dinge wie den Abstand zwischen verschiedenen Blöcken und ihre relativen Größen zu optimieren.

Die Tatsache, dass dies eine heiß diskutierte Frage ist, ist ein Beweis dafür, dass das W3C die Vielfalt der versuchten Layoutdesigns nicht antizipieren konnte. Die Verwendung von divs + css für ein semantisch benutzerfreundliches 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 der Websites unseres Unternehmens von Tabellen auf Divs umzustellen, und es war so ein Kopfschmerz, dass ich die Stunden der Arbeit, die ich in sie gesteckt hatte, völlig verschrottet habe und wieder zu Tischen zurückgekehrt bin. Der Versuch, mit meinen Divs zu ringen, um die Kontrolle über die vertikale Ausrichtung zu erlangen, hat mich mit großen psychologischen Problemen verflucht, die ich niemals erschüttern werde, solange diese Debatte weiter tobt.

Die Tatsache, dass Menschen häufig komplexe und hässliche Problemumgehungen finden müssen, um einfache Entwurfsziele (wie die vertikale Ausrichtung) zu erreichen, deutet stark darauf hin, dass die Regeln bei weitem nicht flexibel genug sind. Wenn die Spezifikationen ausreichend sind, warum ist es dann für hochkarätige Websites (wie SO) erforderlich, die Regeln mithilfe von Tabellen und anderen Problemumgehungen zu biegen?

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

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

Nachdem ich mit einer Website arbeiten musste, die 6 Ebenen verschachtelter Tabellen umfasste, die von einer Anwendung generiert wurden, und ungültiges HTML generiert hatte, war es in der Tat eine dreistündige Aufgabe, das Problem zu beheben, indem eine geringfügige Änderung vorgenommen wurde.

Dies ist natürlich der Randfall, aber tabellenbasiertes Design ist nicht wartbar. Wenn Sie CSS verwenden, trennen Sie den Stil, sodass Sie sich beim Korrigieren des HTML-Codes weniger Gedanken über das Brechen machen müssen.

Versuchen Sie dies auch mit JavaScript. Verschieben Sie eine einzelne Tabellenzelle von einem Ort an einen anderen Ort in einer anderen Tabelle. Eher kompliziert durchzuführen, wo div / span nur kopieren und einfügen würde.

"Interessiert es meinen Chef?"

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

Layoutflexibilität
Stellen Sie sich vor, Sie erstellen eine Seite mit einer großen Anzahl von Miniaturansichten.
DIVs :
Wenn Sie jedes Miniaturbild in ein DIV einfügen und nach links schweben, passen möglicherweise 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. Jetzt möchten Sie der dritten Zeile drei Miniaturansichten 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. Hoppla! Jetzt gibt es dort zu viele Gegenstände. Schneiden Sie einige aus dieser Reihe und legen Sie sie in die vierte Reihe. Jetzt gibt es dort zu viele Gegenstände. Schneiden Sie einige aus dieser Zeile aus ... (usw.)
( Wenn Sie die Zeilen und Zellen mit serverseitigem Scripting generieren, ist dies wahrscheinlich kein Problem. )

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

Vergessen Sie auch nicht, dass Tabellen in mobilen Browsern nicht gut gerendert werden. Sicher, das iPhone hat einen umwerfenden Browser, aber nicht jeder hat ein iPhone. Das Rendern von Tabellen kann für moderne Browser Erdnüsse sein, für mobile Browser jedoch eine Reihe von Wassermelonen.

Ich persönlich habe festgestellt, dass viele Leute zu viele <div>Tags verwenden, aber in Maßen kann es extrem sauber und leicht zu lesen sein. Sie erwähnen, dass es für Leute schwieriger ist, CSS zu lesen als für Tabellen. in Bezug auf 'Code' ist das vielleicht wahr; In Bezug auf das Lesen von Inhalten (Ansicht> Quelle) ist es jedoch viel einfacher, die Struktur mit Stylesheets als mit Tabellen zu verstehen.

Sieht so aus, als wären Sie nur an Tische gewöhnt und das wars. Wenn Sie das Layout in eine Tabelle einfügen, sind Sie nur für dieses Layout eingeschränkt. Mit CSS können Sie Bits verschieben, sehen Sie sich http://csszengarden.com/ an. Und nein, für das Layout sind normalerweise nicht viele verschachtelte Divs erforderlich.

Ohne Tabellen für Layout und korrekte Semantik ist HTML viel sauberer und daher leichter zu lesen. Warum sollte jemand, der CSS nicht verstehen kann, versuchen, es zu lesen? Und wenn sich jemand als Webentwickler betrachtet, 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 haben und ein besseres Verhältnis von Inhalt zu Markup zu erzielen.

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

• 508 Compliance - Die Fähigkeit eines Screenreaders, Ihr Markup zu verstehen.
• Warten auf das Rendern - Tabellen werden im Browser erst am Ende des </table>Elements gerendert.

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

Divs ersetzen keine Tabellen, sie haben ihre eigene Verwendung bei der Trennung von Inhalten in Blöcke verwandter Inhalte (,). Wenn Sie nicht über die erforderlichen Fähigkeiten verfügen und sich auf Tabellen verlassen, müssen Sie Ihren Inhalt häufig in Zellen aufteilen, um das gewünschte Layout zu erhalten. Sie müssen jedoch das Markup nicht berühren, um eine Präsentation zu erzielen, wenn Sie semantisches Markup verwenden. Dies ist sehr wichtig, wenn das Markup generiert wird und nicht statische Seiten.

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

Hier geht es nicht wirklich darum, ob Divs für das Layout besser sind als Tabellen. Jemand, der CSS versteht, kann jedes Design mithilfe von Layouttabellen ziemlich einfach duplizieren. Der eigentliche Gewinn besteht darin, HTML-Elemente für das zu verwenden, wofür sie da sind. Der Grund, warum Sie keine Tabellen für nicht tabellarische Daten verwenden würden, ist der gleiche Grund, warum Sie keine Ganzzahlen 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 jetzt sicherlich nicht der Fall.

Tools, die Tabellenlayouts verwenden, können aufgrund der zum Erstellen des Layouts erforderlichen Codemenge außerordentlich schwer 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 über 60 KB wiegt und sieben Tabellen tief ist, dreimal innerhalb der Seite. Fügen Sie im Javascript den Missbrauch von 16 Iframes mit ähnlichen Tabellenproblemen, übermäßig schwerem CSS usw. hinzu, und die Seite wiegt über 5 MB.

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

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

Die Idee, Inhalte von Präsentationen zu trennen, besteht darin, die Anwendung so zu partitionieren, dass unterschiedliche Arten von Arbeit unterschiedliche Codeblöcke beeinflussen. Hier geht es eigentlich um Change Management. Codierungsstandards können den aktuellen Codezustand 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 komfortable Weise passen.

Weil es HÖLLE ist, eine Site zu pflegen, die Tabellen verwendet und deren Code viel länger dauert. Wenn Sie Angst vor schwebenden Divs haben, nehmen Sie an einem Kurs 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 erwägt, sein Layout mit einer Tabelle zu erstellen, sollte nicht erwarten, dass ich es pflege. Es ist der rückständigste Weg, 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 sich der Zeit- und Energievorteile beim Erstellen einer Website mit modernen Tools nicht bewusst sind.

Tabellen sind nicht im Allgemeinen nicht einfacher oder wartbarer als CSS. Es gibt jedoch einige spezifische Layoutprobleme, bei denen Tabellen tatsächlich die einfachste und flexibelste Lösung sind.

CSS ist eindeutig vorzuziehen, wenn Präsentations-Markup und CSS dieselbe Art von Design unterstützen. Niemand font, der bei klarem Verstand ist, würde argumentieren, dass -tags besser sind als die Angabe von Typografie in CSS, da CSS Ihnen die gleiche Leistung bietet wie font-tags, aber in ein viel sauberer Weg.

Das Problem bei Tabellen besteht jedoch im Wesentlichen darin, dass das Tabellenlayoutmodell in CSS in Microsoft Internet Explorer nicht unterstützt wird. Tabellen und CSS sind daher in ihrer Leistung nicht gleichwertig. Der fehlende Teil ist der gitterartige Verhalten von Tabellen, bei denen 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 leicht zu erreichen, ohne einige Dimensionen fest zu codieren, was das Design starr und spröde macht (solange wir Internet Explorer unterstützen müssen - in anderen Browsern wird dies einfach durch die Verwendung erreicht display:table-cell).

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

Der wichtigste Grund für die nicht mit Tabellen ist die Zugänglichkeit. In den Richtlinien zur Barrierefreiheit von Webinhalten ( http://www.w3.org/TR/WCAG10/) wird empfohlen, keine Tabellen für das Layout zu verwenden. Wenn Sie Bedenken hinsichtlich der Barrierefreiheit haben (und in einigen Fällen gesetzlich dazu verpflichtet sind), sollten Sie CSS verwenden, auch wenn Tabellen einfacher sind. Beachten Sie, dass Sie mit CSS immer das gleiche Layout wie mit Tabellen erstellen können. Dies erfordert möglicherweise nur mehr Arbeit.

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

.1. CSS & SEO:

a) CSS hatte früher einen sehr großen Einfluss auf die Suchmaschinenoptimierung, da der Inhalt auf der Seite positioniert werden konnte, wo immer Sie möchten. Vor einigen Jahren legten Suchmaschinen großen Wert auf "On-Page" -Faktoren. Etwas oben auf der Seite wurde als relevanter für die Seite angesehen als etwas unten. "Oben auf der Seite" bedeutete für eine Spinne "am Anfang des Codes". Mithilfe von CSS können Sie Ihren schlüsselwortreichen Inhalt am Anfang des Codes organisieren und ihn dennoch an einer beliebigen Stelle auf der Seite positionieren. Dies ist immer noch etwas relevant, aber auf der Seite sind Faktoren für das Seitenranking immer weniger wichtig.

b) Wenn das Layout auf CSS verschoben wird, ist die HTML-Seite leichter 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 eine wichtige Rangfolge für mehrere Suchmaschinen, einschließlich Google

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

.2. Generierter Inhalt:

Eine Tabelle ist wesentlich einfacher programmgesteuert zu generieren als das entsprechende CSS-Layout.

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

Das Generieren einer Tabelle ist einfach und sicher. Es ist in sich geschlossen und lässt sich gut in jede Vorlage integrieren. Dasselbe mit CSS zu tun ist erheblich schwieriger und möglicherweise überhaupt nicht von Vorteil: Das CSS-Stylesheet auf dem Flug schwer zu bearbeiten, und das Hinzufügen des Inline-Stils unterscheidet sich nicht von der Verwendung einer Tabelle (Inhalt ist nicht vom Layout getrennt).

Wenn eine Tabelle generiert wird, ist der Inhalt (in Variablen) bereits vom Layout (in Code) getrennt, was das Ändern ebenso einfach macht.

Dies ist ein Grund, warum einige sehr gut gestaltete Websites (z. B. SO) immer noch Tabellenlayouts verwenden.

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

.3. Schnelle Konvertierungstests

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

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

Layout-Tabellen werden normalerweise aufgelöst, weil "jeder weiß, dass Divs & CSS" der richtige Weg sind.

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 in verschiedenen Browsern und Bildschirmauflösungen zeigt, dass dies nicht oft der Fall ist.)

Tische haben viele Nachteile, einschließlich Wartung, mangelnder Flexibilität ... aber lassen Sie uns das Baby nicht mit dem Badewasser werfen. Es gibt viele professionelle Anwendungen für eine Lösung, die sowohl schnell als auch 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 des IE mit wirklich schlechter Unterstützung für CSS verwenden würde

Zum einen bin ich krank und müde von der Knie-Ruck-Reaktion "Oh nein! Tabellen für das Layout!"

Was die Menge "Es war nicht für diesen Zweck gedacht und deshalb sollten Sie es nicht so verwenden" betrifft, 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?