Was ist der beste Weg, um Tabellenlayout in CSS-Layout zu konvertieren?

Question

Ich bin dabei, auf einer Webseite mit einem komplexen tabellenbasierten Layout zu arbeiten (vor Jahren kodiert).

Eines der Dinge, die ich tun möchte, ist das Layout in ein passendes CSS-Layout mit Divs und Spannen zu konvertieren.

Können Sie einen guten Ansatz vorschlagen, um solche Probleme anzugehen? Soll ich ein CSS-Framework wie Blueprint verwenden? Einfach reingehen und hacken bis es richtig aussieht? Ich nutze bereits Firebug und die IE Developer Toolbar.

Answer 1

Bei der Konvertierung zwischen Tabelle und CSS gibt es normalerweise keine Wunderwaffe. Jede Seite ist anders und hat andere Anforderungen. Die einzige wirkliche Antwort lautet: Einfach das Markup von Grund auf neu starten.

Der beste Rat ist, das Markup vollständig zuerst zu schreiben. Stellen Sie sicher, dass das Markup korrekt und semantisch ist und Ihre Daten vollständig darstellt. Schreiben Sie nicht das Stylesheet ... noch nicht. Erstellen Sie nach dem Markup das CSS. Auf diese Weise haben Sie ein semantisches Markup und CSS kontrolliert die Präsentation.

CSS-Frameworks befürworten diesen Ansatz für semantisches Markup häufig nicht, da sie gezwungen sind, zusätzliche Tags hinzuzufügen, um ihren Ansatz zu erfüllen. Folglich sind CSS-Frameworks manchmal mehr problematisch als ihr Wert.

Machen Sie die Markup, dann die CSS.

Answer 2

Der Umwandlungsprozess wird ein schmerzhafter Kopfschmerz sein! Ich schlage vor, dass Sie ein komplettes Redesign beginnen.

Answer 3

Iterative Art funktioniert auch. Beginne mit kleinen Blöcken und wandle sie in CSS um. Dies sollte Ihre Tabellenstruktur vereinfachen und hoffentlich nur das "Grundraster" in Tabellen und den Rest in CSS lassen.

Von dort, wählen Sie eine bestehende, getestete Lösung, wenn es ein einfaches Layout ist (für 1 bis 3 Spalten gibt es Tonnen von getesteten Lösungen da draußen). Wenn es komplexer ist, gehen Sie mit Blueprint.

Answer 4

Bevor Sie beginnen, stellen Sie sicher, dass Sie einen CSS-Reset verwenden. Eric Meyer und Yahoo YUI sind beide ausgezeichnet. Dies wird dazu beitragen, dass alle Browser gleich aussehen.

Installieren Sie auch die HTML validator zu. Dadurch wird sichergestellt, dass Ihr HTML-Code gut aussieht und bereit für das Hinzufügen des CSS ist.

Dann schnappen Sie sich eine Kopie von Firebug und installieren Sie es in Firefox. Dies ist hervorragend, um zu sehen, welche CSS-Regeln was machen. Sie können einzelne Regeln deaktivieren, indem Sie nach jeder Regel auf s klicken.

Jetzt besuchen Sie einige Webseiten, die korrekt validieren und sehen, welche Regeln sie in ihren Stylesheets verwendet haben.

Websites zu versuchen sind www.alistapart.com, CSS Zen Garden, SimpleBits usw.

Answer 5

Ich weiß nicht, ist dies eine Hilfe sein kann, ich CSS-Framework bauen Emastic genannt (unterstützt Flüssigkeit und festen Spalten) und Sie können simulieren Tabellen, wenn Sie hier möchten, ist das Beispiel Emastic Table

Answer 6

Ich zweite die Kommentatoren, die Sie sagen, sollten Sie das Ganze von Grund auf neu zu entwerfen. Bereinige den HTML-Code und mache dann das CSS.

Ich möchte einen Grund hinzufügen, dies zu tun.Üblicherweise sind tabellenbasierte Designs mindestens ein paar Jahre alt und sehen daher ziemlich passe aus. Nutzen Sie diese Gelegenheit, um das Design zu verbessern. Entweder eine leichte Erfrischung oder eine komplette Überholung, je nach Geschmack und Bedarf.

Answer 7

Ich würde kein Framework verwenden. Das Erlernen eines neuen Frameworks ist nur sinnvoll, wenn Sie es erneut über & verwenden. Jedes Framework hat seine eigenen Fehler und Schwächen. Verwende

display: table-cell; 

, um eine Spalte zu erstellen. Diese werden wie float: left; ausgerichtet. Siehe http://quirksmode.org/css/css2/display.html

Answer 8

In einigen Fällen könnte die Verwendung von regulären Ausdrücken Ihren Prozess beschleunigen.

So etwas wie folgt aus:

<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td> 

würde den Beginn einer Tabelle anzeigen lassen und den Inhalt der ersten Zelle in $ 1 für ein liefern ersetzen:

<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div> 

Natürlich können Sie‘ d müssen an Ihren speziellen Anwendungsfall angepasst werden. Wenn Sie mehrere ähnliche Seiten haben, können Sie versuchen, zuerst eine Hand zu codieren und dann etwas zu verwenden, um die anderen einfacher zu machen.

Ein anderer Ansatz sei so etwas wie diese jQuery-Plugin zu verwenden: https://github.com/ryandoom/jquery-plugin-table-to-div

Es soll folgenden Rendering ändern, kann aber während der Entwicklung verwendet werden, um eine bestimmte Tabelle zu nehmen und eine einfache DIV basierte Form davon bereitzustellen.