2008-09-14 13 views
52

私は表が表形式のデータ用であることを知っていますが、レイアウトに使用するのは魅力的です。私は3列のレイアウトを得るためにDIVを扱うことができますが、4つのネストされたDIVを取得すると、それは手間がかかります。DIVとテーブルまたはCSSとの比較愚かなもの

レイアウトのためにDIVを使用するよう説得するためのチュートリアル/リファレンスがありますか?

私はDIVを使用したいと思っていますが、私はDIV/SPANを私が望むところに置くのに1時間を費やすことを拒否します。

@GaryF:Blueprint CSSは、CSSの最高の秘密にする必要があります。

グレートツール - Blueprint Grid CSS Generator

+0

4列のレイアウトにCSSとhtmlが必要ですか?もしあなたが私に知らせるなら、私はすでにそれをここに持っています。 – Mauro

+0

@マウロ:私は4列のレイアウトについて話していませんでした。深いDIVネストを意味していました。 –

+1

青写真を取り巻くある程度の論争があることをご承知ください。 http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/ http://jeffcroft.com/blog/2007/nov/18/follow-up-css-frameworks/ ちょっと知っておいてください。 :) –

答えて

1

これは役に立たないかもしれませんが、私は何とかCSSに関連するこれらの問題をすべて理解していません。新聞のデザイナーが広告ページに映画を埋め込もうとすると、誰もが彼が少し狂っていることに同意するだろう。しかし、同じ人々はHTMLで3列のレイアウトの後に松の木に似ています。 HTMLは現時点ではこの種のレイアウトをうまく処理することができません。さらに、マルチカラムレイアウトは、一般に、コンピュータモニタでの読み取りにはあまり適していません。実行可能な選択肢が十分ではありませんか?

そしてテーブルでさえ、流暢な列レイアウトを実装する良い方法を提供していないので、このようなハックに頼る理由は全くありません。現代的なブラウザの半分(つまり、> MSIE 6)を前提とすると、テーブルは私が知っているクリーンなHTML + CSSよりも利点がありません。

+1

HTML以外はそれを処理できます。それを処理できないのはCSSです。 –

+1

あなたはもっと具体的になりますか?まさにCSSが扱えないものは? –

+1

コンラッドはHTMLで「3列のレイアウト」を達成できないと述べています。テーブルは非常に簡単にこれを実現します。 100%の高さの要素と垂直方向の配置で同様の話です。このような状況では、CSSは難しい傾向にあり、人々の働き方に標準を働かせるよりも、デザインを批判する傾向があります。 –

23

さまざまなことができるYahoo Grid CSSがあります。

しかし、覚えておいてください:CSSは宗教ではありません。 cssではなくテーブルを使用して時間を節約する場合は、そうしてください。

私の心を決してできないコーナーケースの1つは、フォームです。私はCSSでやってみたいですが、テーブルよりもはるかに複雑です。

フォームはヘッダー(ラベル)とデータ(入力フィールド)を持つという点で、フォームは表であると主張することさえできます。

+2

厳密に言えば、フォームは(ほぼ)決してテーブルではありません。データの列見出しはどうなりますか?「入力フィールド」ですか?段落は単一セルのテーブルです...フォームのサポートはかなり厄介です。主にブラウザの製造元がスタッフに同意しないからです。 –

+0

私はラベルがヘッダーであると主張したいと思います。水平配列IIRC –

+1

OKを指定する引数もありますが、ヘッダーの単一の行とデータの単一の行を持つデータのセットは、意味的にテーブルよりも定義リストに近いものです。 –

1

私はテーブルを使用します。

私の経験上、レイアウト用のテーブルを使用すると、すべてのブラウザで同じように動作します(特にIE6をサポートしようとしている場合)。表を使用して10分で実行できるようになったときに、CSSでレイアウトを動作させるには、時間と時間をかけてコーディングする価値がありません。

テーブルを使用するもう1つの利点は、レイアウトが非常に簡単にコンテンツ自体のサイズを変更できることです。 CSSでそれをやろうとするのは、大きな悪夢です。

1

CSSには、デザイナーがウェブサイトを生き生きとさせない仕様を示唆しているように思えるような制限がたくさんあります。

CSSで簡単に操作できない場合は、HTMLテーブルを使用してください。

しかし、フレームワークの中には助けてくれるものがあります。あなたがそれを管理できるのであれば、CSSで行うほうがずっといいです。

6

私の意見では、バイアスはIE6以上のCSSに有利なはずです - つまり、あなたのサイトはIE6を使用している人(例えば、変わった)ビジョンの悪い人や自動化されたユーザーエージェントではなく、IE6を使用している人を「疎外させる」。IE6の使用は減少しています。後者のグループは増加している。あなたのサイトがIE6で完璧に見えなくても、それを見ることができない人のためのテーブルベースのレイアウトよりも、読んだ方が簡単かもしれません。

これは非常に一般的な質問ですので、具体的には答えにくいです。優秀な資源である2冊は、以下のとおりです。

あなただけのサイト全体のレイアウトを設計時間を過ごすために持っている場合、それはつもりは悪くはありません。

16

英国と米国では、表に対してCSSレイアウトを優先させるための法的要件があります。セクション508(米国)と障害者差別措置法(英国)は、視力の弱いユーザーのアクセシビリティ基準をカバーしています。

英国では、法人化されたユーザーの能力を妨げるようなサイトを商業的に制作することは実際には違法とされていますそれは車椅子利用者が入ることはできません - それでも、ウェブサイトのアクセシビリティに関する訴追はまだありません。しかし、私は常にあなたのサイトの設計が長期的に維持するのがはるかに容易であることを意味するので、CSSと一緒に行くだろう。

CSS(私はW3Cの学校と.Net Magazine http://www.netmag.co.ukを使用していました)を学ぶことに投資する時間はお金がかかるでしょう。

+1

ドイツでも同じことが当てはまりますが、連邦政府のオフィスのウェブサイトにのみ適用されます。 –

5

CSSは宗教ではないかもしれませんが、ブラウザがレイアウト用にHTMLを解釈する方法です。そうであってもいなくても、現代のブラウザーはすべて、W3Cのボックスモデルの一部のバージョンを使用しています。テーブルに依拠し続けるには、ウェブレンダリング技術を設計する人々の目には明らかに間違っている方法論に依然として頼っています。

私は、CSSが時々非常に複雑に見えることは知っていますが、私はそれがこの誕生日に必要であると信じています(あなたのクライアントがそれを望んでいると信じています)。

時間がかかりそうでないと感じたら、実際にCSSを学ぶ(時間がないように要素や位置を決めるのに数秒かかります)、実際に知っている人にレイアウト作業を渡す必要がありますフロントエンドを知っている。

はい、現在のCSSの実装には問題がありますが、テーブルベースのレイアウトに戻す必要があると感じるはずがありません。あなたが他の言語やフレームワークのように座って、それを学ぶ時間を取るだけです。

私が見つけた最高のオンライン参照リソースはこの1つである: http://reference.sitepoint.com/css

しかし、それはこのようなものが重要である理由を理解するためにあなたを助けることに長い道のりを行くDesigning With Web Standardsのような本を見て損はないかもしれません。

4

私はYAML(まだ別のマルチカラムレイアウト)を見るまで青写真が素晴らしかったと思っていました。素晴らしいですonline builder toolがあります。私は5分以内にクールなマルチカラムレイアウトを得ることができます。

1

A List Apartは、セマンティックHTMLを使用する際の参考になるでしょう。Holy Grail articleは、おそらく最良の例の1つです。また、トピックに関するインスピレーションのためにCSS Zen Gardenをチェックしたり、Dave Sheaの優れた本「The Zen of CSS Design」を読んでください。

1

レイアウトにCSSを使用するのは、意味的に正しいだけでなく、表に複数の欠点があるためです。

テーブルがほとんどすべてのスクリーンリーダーを破損するため、テーブルがアクセス不能になって恐ろしいです。そのため、テーブルの読み込み方法のために視覚的に無意味な情報が得られます。

また、CSS対応のものよりもはるかに低速です。表は2回、レイアウト用に1回、内容用にもう一度描画する必要があります。これは、リモートイメージがある場合、または接続が遅いサーバーに2つのイメージがある場合、全体レイアウトがレンダリングされないことを意味します。

ハッシュマップを使用しているときに配列を使用して辞書を保存しますか?いいえ、そこに何かがあるとテーブルを使うべきではありません。

2

しばらくすると、それについて考えることさえしません。 CSSでdivを使用する方が簡単なオプションのようです。さらに、jQueryなどのフレームワークを使用すると自由度が増します。私はcssやdivを使わずにクールなjQueryをやっているとは想像もできませんでした。テーブルをスタイルとレイアウトに使用すると、新技術がたくさんあるのを忘れてしまい、90年代にこだわっているような気がします。

関連する問題