664 Stimmen

Benno Richters avatar

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

Gefragt el 17 de September, 2008
Wann wurde die Frage gestellt
470806 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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

Warum?

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

  • Es ist gut, dass 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 tabellarischen Daten zu tun hat. Aber was soll's? Ist es meinem Chef egal? Interessiert es meine Benutzer?

    Vielleicht interessiert es mich oder meine Entwickler-Kollegen, die eine Webseite pflegen müssen... Ist eine Tabelle weniger wartungsfreundlich? Ich denke, eine Tabelle zu verwenden ist einfacher als mit divs und CSS.

    Übrigens... warum ist die Verwendung eines Divs oder eines Spans eine gute Trennung von Inhalt und Layout und eine Tabelle nicht? Ein gutes Layout mit nur divs erfordert oft eine Menge von verschachtelten divs.

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

  • Für SEO ist es besser, keine Tabellen zu verwenden
    Warum? Kann jemand einen Beweis dafür vorlegen, dass es so ist? Oder eine Aussage von Google, dass von Tabellen aus SEO-Sicht abgeraten wird?

  • Die Tische sind langsamer.
    Es muss ein zusätzliches tbody-Element eingefügt werden. Für moderne Webbrowser sind das Peanuts. Zeigen Sie mir einige Benchmarks, bei denen die Verwendung einer Tabelle eine Seite erheblich verlangsamt.

  • Eine Überarbeitung des Layouts ist ohne Tabellen einfacher, siehe css Zen-Garten .
    Die meisten Websites, die ein Upgrade benötigen, brauchen auch neue Inhalte (HTML). Szenarien, in denen eine neue Version einer Website nur eine neue CSS-Datei benötigt, sind nicht sehr wahrscheinlich. Zen Garden ist eine nette Website, aber ein bisschen theoretisch. Ganz zu schweigen von seiner missbrauchen von CSS.

Ich bin wirklich an guten Argumenten für die Verwendung von Divs + CSS anstelle von Tabellen interessiert.

Gefragt el 17 de September, 2008 von Benno Richters

Antworten

Zu viele Anzeigen?

18voto

Ross avatar
Ross Punkte 44536

Hier ist ein html-Ausschnitt aus einem kürzlich durchgeführten 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 in 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 haben würde.

Ein weiterer Punkt, der zu bedenken ist: Dateigrößen . Ich habe festgestellt, dass tabellenbasierte Layouts normalerweise doppelt so groß sind wie ihre CSS-Gegenstücke. Bei unserer Hochgeschwindigkeits-Breitbandverbindung ist das kein großes Problem, aber für diejenigen mit Einwahlmodems schon.

Beantwortet el 18 de September, 2008 von Ross (44536 Punkte )

14voto

Guido avatar
Guido Punkte 44293

Ich möchte hinzufügen, dass div-basierte Layouts einfacher zu pflegen, zu entwickeln und zu überarbeiten sind. Nur ein paar Änderungen im CSS, um Elemente neu anzuordnen, und schon ist es erledigt. Meiner Erfahrung nach ist die Neugestaltung eines Layouts, das Tabellen verwendet, ein Alptraum (noch mehr, wenn es verschachtelte Tabellen gibt).

Ihr Code hat auch eine Bedeutung aus einer semantisch Sichtweise.

Beantwortet el 17 de September, 2008 von Guido (44293 Punkte )

13voto

Radu094 avatar
Radu094 Punkte 27290

Ich habe keine Argumente zu Gunsten von DIV.

Ich würde sagen: Wenn der Schuh passt, zieh ihn an.

Es ist erwähnenswert, dass es schwierig, wenn nicht gar unmöglich ist, eine gute DIV+CSS-Methode für die Darstellung von Inhalten in zwei oder drei Spalten zu finden, die auf allen Browsern konsistent ist und trotzdem genau so aussieht, wie ich es mir vorgestellt habe.

Dadurch verschiebt sich das Gleichgewicht in den meisten meiner Layouts ein wenig in Richtung Tabellen, und obwohl ich ein schlechtes Gewissen habe, weil ich sie verwende (keine Ahnung, warum, die Leute sagen einfach, es sei schlecht, also versuche ich, auf sie zu hören), ist es für mich aus pragmatischer Sicht einfach einfacher und schneller, TABELLEN zu verwenden. Ich werde nicht nach Stunden bezahlt, also sind Tabellen für mich billiger.

Beantwortet el 17 de September, 2008 von Radu094 (27290 Punkte )

13voto

DLH avatar
DLH Punkte 2701

Die Tatsache, dass dies eine heiß diskutierte Frage ist, zeigt, dass das W3C nicht in der Lage war, die Vielfalt der Layout-Designs vorherzusehen, die versucht werden würden. Die Verwendung von divs+css für ein semantisch freundliches Layout ist ein großartiges Konzept, aber die Details der Implementierung sind so mangelhaft, dass sie die kreative Freiheit tatsächlich einschränken.

Ich habe versucht, eine unserer Firmenseiten von Tabellen auf Divs umzustellen, und es hat mir so viel Kopfzerbrechen bereitet, dass ich die vielen Stunden Arbeit, die ich hineingesteckt hatte, komplett verworfen habe und wieder zu Tabellen zurückgekehrt bin. T

Die Tatsache, dass die Menschen häufig komplizierte und hässliche Umgehungslösungen finden müssen, um einfache Designziele (wie die vertikale Ausrichtung) zu erreichen, deutet stark darauf hin, dass die Regeln nicht annähernd flexibel genug sind. Wenn die Spezifikationen ausreichend sind, warum finden es dann hochkarätige Websites (wie SO) notwendig, die Regeln mit Hilfe von Tabellen und anderen Umgehungslösungen zu beugen?

Beantwortet el 9 de August, 2010 von DLH (2701 Punkte )

13voto

MB. avatar
MB. Punkte 7147

CSS-Layouts sind im Allgemeinen viel besser für die Barrierefreiheit geeignet, vorausgesetzt, der Inhalt ist in einer natürlichen Reihenfolge angeordnet und ergibt auch ohne Stylesheet einen Sinn. Und nicht nur Screenreader haben Probleme mit tabellenbasierten Layouts: Sie erschweren es auch mobilen Browsern, eine Seite richtig darzustellen.

Außerdem kann man mit einem div-basierten Layout sehr einfach coole Dinge mit einem Druck-Stylesheet machen, wie z.B. Kopf- und Fußzeilen und die Navigation von gedruckten Seiten ausschließen - ich denke, das wäre mit einem tabellenbasierten Layout unmöglich oder zumindest viel schwieriger zu machen.

Wenn Sie daran zweifeln, 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-Garten sehen Sie, wie eine Änderung der Stylesheets das Layout drastisch verändern kann, und überlegen Sie, ob Sie die gleiche Vielfalt an Layouts erreichen könnten, wenn das HTML tabellenbasiert wäre... Wenn Sie ein tabellenbasiertes Layout verwenden, ist es unwahrscheinlich, dass Sie CSS verwenden, um alle Abstände und Auffüllungen in den Zellen zu steuern (wenn Sie das täten, wäre es mit Sicherheit einfacher, fließende 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 vorgeben, bedeuten Tabellen in der Regel, dass Ihr Layout sehr stark im HTML fixiert wird.

Realistischerweise denke ich, dass es sehr schwer ist, das Layout eines div- und CSS-basierten Designs komplett zu ändern, ohne die divs ein wenig zu verändern. Allerdings ist es bei einem div- und CSS-basierten Layout viel einfacher, Dinge wie die Abstände zwischen verschiedenen Blöcken und ihre relativen Größen zu ändern.

Beantwortet el 17 de September, 2008 von MB. (7147 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X