私は複雑なテーブルベースのレイアウト（年前にコード化された）を持つWebページを作成しようとしています。テーブルレイアウトをCSSレイアウトに変換する最適な方法は何ですか？
私がしたいことの1つは、divsとspanで適切なCSSレイアウトにレイアウトを変換することです。
あなたはこのような問題に取り組むための良いアプローチを提案できますか？青写真のようなCSSフレームワークを使うべきですか？それが正しく見えるようになるまでちょうどそこに着くとハックする？私はすでにFirebugとIE Developer Toolbarを多用しています。
テーブルとCSSの間の変換には、一般的には、弾丸はありません。すべてのサイトが異なり、要件が異なります。唯一の真の答えは、最初からマークアップを開始することです。
最高のアドバイスは、マークアップを完全に書き込むことです。マークアップが正確で意味があり、データを完全に表すことを確認してください。 まだスタイルシートを書き込まないでください。マークアップが完了したら、CSSを作成します。この方法ではセマンティックマークアップがあり、CSSはプレゼンテーションを完全に制御しています。
CSSフレームワークでは、アプローチを遵守するためにタグを追加する必要があるため、このアプローチをセマンティックマークアップに使用することはしばしばありません。したがって、CSSフレームワークは時にはその価値よりも面倒です。
マークアップを行い、次にCSSを実行します。
変換プロセスは苦しい頭痛になります！私は全体的な再設計を始めることをお勧めします。
反復方法も同様に機能します。小さいブロックから始めてCSSに変換します。これはあなたのテーブル構造を簡素化し、うまくいけばテーブルの "基本的なグリッド"と残りのCSSのすべてを残してください。
そこから、シンプルなレイアウトの場合は、既存のテスト済みのソリューションを選択します（1〜3列の場合、そこにテストされたソリューションがたくさんあります）。それがより複雑な場合は、青写真と一緒に行く。
開始する前に、CSSリセットを使用していることを確認してください。 Eric MeyerおよびYahoo YUIはどちらも優れています。これは、すべてのブラウザを同じように見せるのに役立ちます。
また、HTML validatorもインストールしてください。これにより、あなたのHTMLが見栄え良くなり、CSSを追加できるようになります。
次に、Firebugのコピーを入手し、Firefoxにインストールしてください。これは、どのCSSルールが何をしているかを見るのに優れています。個々のルールを無効にするには、各ルールごとにsをクリックします。
ここで、正しく検証し、スタイルシートでどのルールを使用しているかを確認するWebページをご覧ください。しようとする
Webサイト私にはわからないwww.alistapart.com、CSS Zen Garden、SimpleBitsなど
が、これは任意の助けになることができているが、私はEmasticと呼ばれるCSSフレームワークを構築（流体と固定列をサポートしています）、あなたはシミュレートすることができますテーブルが必要な場合はここに例がありますEmastic Table
私は最初からすべてを再設計すると言うコメント者です。 HTMLをクリーンアップし、CSSを作成します。
私はそうする理由を追加したいと思います。通常、テーブルベースのデザインは少なくとも数年前のものなので、かなり渋滞しています。この機会を活用してデザインを改善してください。あなたの味とニーズに応じて、若干のリフレッシュまたは完全なオーバーホール。
私はフレームワークを使用しません。新しいフレームワークを学ぶことは、&をまたもって使っている場合にのみ役に立ちます。各フレームワークには独自のバグと脆弱性があります。
display: table-cell;
を使用して列を作成します。これらは、float: left;のように整列します。 http://quirksmode.org/css/css2/display.html
場合によっては、正規表現を使用するとプロセスがスピードアップすることがあります。例えば
、このような何か：
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
テーブルの開始に合わせて交換のための$ 1で最初のセルの内容を提供する：もちろん
<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>
あなたは」特定のユースケースに合わせてカスタマイズする必要があります。類似したページが多数ある場合は、最初に手作業でコードを作成し、次にこのようなコードを使用して他のコードを簡単に変換してみてください。
別のアプローチは、このjQueryプラグインのようなものを使用することです：https://github.com/ryandoom/jquery-plugin-table-to-div
それは、レンダリング、以下の変更を意図しているが、与えられたテーブルを取ると、それを単純にDIVベースのフォームを提供するために、開発時に使用することができます。
これは理論的な観点からは問題ありませんが、マークアップを変更する（順序を変更したり、クラスを追加したり、divやspanの要素をラップする）必要があることに注意してください。これで結構です！ Div、スパン、クラスは意味的に間違っているわけではなく、悪用しないでください。 –