2

私は決して CSS の専門家ではありません。私はそれをある程度知っていますが、あまり深くは知りません。float と IE6 は私を泣かせます。だから、人々がそれを使って何ができるかを見るのをいつも楽しみにしています。

ただし、私が目にするほとんどの例では、固定サイズが使用されています。私が理解している限り、これは CSS が非常にトリッキーであり、特に IE6 では、要素に幅があるとハッキングがはるかに簡単になるためです。

しかし、私は柔軟な幅が本当に好きです。だとしたら、テーブルでデザインを作るのがなぜ間違っているのか理解できませんか？「CSS について知っていることはすべて間違っている!」という本があります。これは、最近のブラウザーで CSS を使用してテーブル レイアウトを作成できるようになったことがいかに優れているかを説明しています... しかし、HTML テーブルでは常にそれを行うことができなかったのでしょうか? はい、それは CSS ではなく、純粋な CSS ほどきれいではないかもしれません... しかし、結局のところ、テーブル レイアウトは私たちがしばしば必要とするものであり、それを行うために邪悪なハッキーな CSS とシンプルだが純粋ではないもののどちらかを選択する必要がある場合は、十分な HTML テーブルがあるのに、なぜこれらの選択肢のいずれかが悪いと見なされるべきなのか理解できません。KISSはいいことですよね。

それとも、私はそれを理解していないかもしれませんが、CSS でテーブルのようなレイアウトを作成できます - IE6 で動作します - お尻にあまり苦労しませんか? そのようなサイトの例はありますか?

更新: はい、コンテンツとスタイルの分離について知っています。実際、私は DRY、SRP、およびその他の設計必須事項に熱狂しています。そういうわけで、私は実際に CSS で何かをしようとしました。しかし、上記のような本にも書かれているほど、表よりもはるかに難しく、信頼できないのであれば、なぜそんなに頑張るのでしょうか? すべてをテーブルで行う必要があるとは言いません。しかし、それが CSS よりも本当に簡単である場合、単純で予測可能なソリューションよりも CSS を好む必要があるのはなぜでしょうか?

つまり、常にテーブルを使用する必要があるとは言いません。マスターページのレイアウトを覚えておいてください - それは独立しており、他のページに影響を与えません.20分でCSSからテーブルに切り替えることができます.無害？

更新: これは、私が言おうとしていたことの非常に良い要約であることがわかりました: http://www.flownet.com/ron/css-rant.html . そして議論http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments。

興味のある方は、さらに優れた記事をご覧ください: http://kv5r.com/articles/dev/layouttables1.asp

4

6 に答える 6

4

YamlとFluid 960gsをご覧ください。どちらも、クロスブラウザー レイアウトで大いに役立ちます。テーブル レイアウトは答えではなく、IE6 は遅かれ早かれ姿を消すでしょう。

于 2009-10-22T10:52:57.680 に答える
3

あなたは本質的に正しいです。アクセシビリティのために、セルの順序がページに適切である限り、レイアウトにテーブルを使用することに何の問題もありません。個人的には、固定幅はレイアウト用のテーブルよりもはるかに使い勝手が悪いと感じています。

レイアウトにテーブルを使用する場合は、ブラウザが最初からテーブルを正しくレイアウトできるようにwidth: 100%; table-layout: fixed（そしてスタイル<col>付きでwidth）スタイルを使用するようにしてください（これにより、テーブルレイアウトの使いやすさの問題の1つが修正されます）。 IEのかなり貧弱な自動レイアウト幅推測に依存しないでください。

私は確かに可能な限りCSSをレイアウトに好みますが、ほとんどの単純なサイトレイアウトは、CSSのみを使用して合理的に実現できます（特にIE5とその風変わりなボックスモデルはなくなりました）が、CSSがハッキングできず、テーブルがハッキングできる場合があります。一般的なケースは、複雑な流体幅のフォームです。

最も重要な問題はwidth: 100%-10em、ビューポートの幅から別の列の固定サイズを引いた列を取得するなどのことを言う能力がないことです。単純なケースでは、マージンとラッパーdivを使用してこれを回避できますが、CSSレイアウトを機能させるためだけにページ上の要素を並べ替えて複数のラッパーを追加し始めると、プレゼンテーションはすでに混同されています。内容：テーブルとそれほど違いはありません。

最悪の場合、マークアップ自体の内部のレイアウトを完全に指定するためにネストと固定クラス名を使用する必要がある、ばかげた「CSSフレームワーク」になってしまいます。これはテーブルに勝るものはありません。古き良き時代へのこの絶望的な先祖返りが、流行の最先端のWeb2.0技術と見なされていることは絶対に陽気なことだと思います。

CSS3は、現在のポジショニングオプションのいくつかの興味深い代替案に取り組んでおり、いつかは完全なマークアップとレイアウトの分離を約束する可能性があります。しかし、それは今日では遠い道のりです。

于 2009-10-22T11:47:05.633 に答える
1

HTML テーブルが表形式のデータ以外には適していないのには理由があります。HTML はデータ コンテンツのマークアップ言語であるため、データのレイアウトではなく、実際のデータのグループを含める必要があります。CSS は、完全にレイアウトとスタイルを目的としています。したがって、その名前。したがって、CSS には Web ページのルック アンド フィール全体が含まれている必要があり、HTML にはデータの構造が含まれています。二人が出会うことはありません。

テーブルですべてを行うのは、理由があって悪いことです。

スタイルとコンテンツの間の抽象化と考えるべきであり、ここから良い要約を得ることができます: http://www.alistapart.com/articles/separationdilemma/

また、質問への直接的な回答として、「A List Apart」にアクセスして、記事を検索してください。彼らはあなたがここで行おうとしている旅を説明しています: http://www.alistapart.com/articles/journey/

シンプルで予測可能なソリューションよりも CSS を優先する必要があるのはなぜですか?

それが私たちが言おうとしていることです。短期的には簡単に思えるかもしれませんが、あなたが書いたものは、将来的に保守しにくくなり、編集するのが難しくなります. 短期的には簡単に思える Web ページを作成することはできますが、後でさらに多くのことをしたい場合に備えて、自分の足を痛めているだけです。最初のラウンドで正しく実行しないのはなぜですか？（実際にはほんの少しの余分な努力です）

于 2009-10-22T10:56:04.340 に答える
0

テーブルをレイアウトとして使用するマークアップを作成したくない理由は、デザインとコンテンツを切り離すためです。

マークアップは、その中にあるコンテンツの完全な説明として、単独で存在する必要があります。基本的に、スタイルに触れる前に、HTML でページをマークアップする必要があります。次に、CSS を使用して、セマンティック マークアップのデフォルトの外観を変更します。

問題は、レイアウトしている Web コンテンツは「表形式のデータ」ではないということです。マークアップはコンピューター/ボットが読み取るためのものであり、スタイルは私たちが見るためのものです。保守性の追加コストで。

于 2009-10-22T10:55:33.853 に答える
0

これは、私が個人的に遭遇したシナリオであり、共有したいと思います。注: 私は「まったくテーブルがない」ことを主張しているわけではありません。他の要件にも対応しています。

フォームを作成しました (視覚的にトップダウン フロー):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

次に、顧客は次のようなより構造化された管状のものを望んでいました。

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

TR TD ソートのテーブルを使用していないので、CSS の変更と HTML マークアップのマイナーな変更を使用して、構造を簡単に (ほぼ) 変換できます。

于 2009-10-22T11:02:28.467 に答える