27

Stack Overflow のソース コードを見て、テーブルとインライン CSS がかなり使用されていることに気付きました。また、インライン テーブル属性の書式設定の使用も奇妙に感じました。

<table width="100%">

人気のある (または以前は人気があった) DIV の代わりにテーブルを使用してテンプレートを構成する特定の理由があるかどうか、私はただ興味があります。

同様に... CSS を使用する目的には、同じページでインライン CSS を使用することも含まれます (これにはおそらく優れた回答/解決策があることを知っています...それらが何であるかに興味があります)

表形式のデータにテーブルを使用することに問題はないことは理解していますが、この場合、構造にはスタック オーバーフロー テーブルが使用されます。

4

14 に答える 14

29

Tables vs. Divs は無意味な聖戦です。

レイアウトのために特定の方法でテーブルを使用すると、問題を引き起こす可能性がある特定の問題があります。これらの 1 つは、マージンと配置を処理するためにサイト全体のレイアウトを 1 つのテーブルに構築することです。これは、テーブルが頻繁にレンダリングされる方法のため、Web サイトがコンテンツのダウンロード時にブラウザ エンジンによってプログレッシブにレンダリングされないことを意味します。全体が受領された後にレンダリングされます。大きなページまたは低速のモデム ユーザーの場合、かなり長い間空白のページを見つめている可能性がありますが、これは「悪いこと」です。mozilla/ie5 世代のブラウザーでテーブル レンダリングに多くの矛盾があったことは気にしないでください。これは、特にセル内の画像で、一貫性のあるクロス ブラウザー テーブル レイアウトをやや面倒なものにしていました。

純粋な div パスの支持者は、理論的には HTML 4.01 が純粋なコンテンツであり、そのすべてに意味があるため、コンテンツとプレゼンテーションについて話すのが好きです。div は抽象的な意味で意味のある組織構造を提供し、CSS によってのみ表示されます。これらの引数では、表は、実際の表形式のデータを含めるために使用される場合にのみ有効です。もちろん、これは十分に複雑なレイアウトの場合、プレゼンテーション CSS に必要なフックをサポートするためだけにかなりの数の空の div が浮かんでいるという事実を無視しており、この抽象化の最初のレベルを破っています。この抽象化が破られると、意味のあるコンテンツを持たない HTML のプレゼンテーション フックがレイアウトに必要なだけの場合、テーブルよりも div の方が適切であるという法則はなくなります。

最終的には、すべての方法の制限を認識し、最も適切な方法を使用することです。無意味な (つまり、コンテンツに意味のない) div の配列を設定するよりもテーブルを使用する方が単純に簡単な場合が多く、テーブルのレンダリングの制限は適用されません。テーブルが小さく、内部コンテンツの小さなチャンクを表す場合、レンダリングの遅延は関係ありません。

于 2009-01-08T23:21:16.773 に答える
22

SO の開発には関わっていないので、一般的なことしか話せません。

ベースのレイアウトtablesよりも、多くの場合、ブラウザー間でより簡単で一貫性があることがわかりました。CSS

CSSまた、物事を成し遂げようとすると、あちこちでランダムに放出することがよくあります。後でリファクタリングできると思います。

表の幅を CSS ではなく HTML で設定することを選択した理由については、私にはわかりません。

私は、SO が開始したとき、本物の誠実なデザイナーを使っていたことを知っています。ただし、そのデザイナーが、サイトがどのように見えるべきか、または実際のマークアップのイメージを提供したかどうかはわかりません。

そう言って私を炎上させないでください。私たち全員が CSS 忍者というわけではありません。

于 2009-01-08T22:21:24.803 に答える
18

SO はおそらく Web 開発者ではなく、プログラマーによって書かれました。

于 2009-01-08T22:26:41.423 に答える
9

テーブルは悪いものではありませんが、特定の用途 (以前はどこにでもありました) は悪いものです。つまり、スペーサー、ネストされたセルなどを使用して、マージンとパディングを制御します。

今日では誰もがcssとdivを使ったレイアウトについて話していますが、問題の真実は、レイアウトに関してはcssがひどいということです。できることは限られています。css を使用して 2 列または 3 列のレイアウトを取得するための推奨される解決策をいくつか見てください。を投げる<table><tr><td id="left-column"><td id="right-column"></tr></table>方がはるかに簡単です。

css は重要なレイアウトには適していません (つまり、純粋な div/css を意味します)。

上記のテーブル ソリューションでは、css を使用して、幅、パディング、境界線、背景画像などを制御する必要があります。

于 2009-01-08T22:26:37.193 に答える
8

テーブルをあきらめて使用する

于 2009-01-08T23:48:18.700 に答える
4

Internet Explorerは、グリッドのようなレイアウト モデル (html テーブルのレンダリング方法と同等) を提供するdisplay:table CSS プロパティをサポートしていないためです。グリッド モデルは、多くのレイアウトをモデル化するための最も単純で柔軟な方法です。

3 つの選択肢がありますが、どれも魅力的ではありません。

  • Internet Explorer のサポートを犠牲にします (他の最新のブラウザーはすべてdisplay:table、10 年以上にわたって CSS2 標準の一部であったプロパティをサポートしています)。
  • 費用がかかり、保守が難しい面倒な CSS 回避策を使用します。
  • セマンティックの純度を犠牲にして、TABLE 要素を使用します。

SO が最後のオプションを選択したのは、おそらく、障害のあるユーザーのサポートよりもInternet Explorer ユーザーのサポートの方が重要であると考えているためと、開発が迅速で保守が簡単なものが必要だったためです。

于 2009-01-13T15:25:58.250 に答える
2

ジェフと彼のチームは、それを迅速かつ汚く仕上げていました。これは非常に迅速な開発サイクルであり、混乱の多くをリファクタリングする時間がありませんでした。

それに直面してください - あなたが専門家でない限り、CSS はテーブル構造に時間がかかります。

インライン スタイルと含まれている css は、それを実行しようとしている兆候に過ぎず、(少なくとも最初の反復では) それを行う「正しい」方法について心配していません。正しい方法は、うまく機能し、それを迅速に完了させることでした。

于 2009-01-08T22:36:11.480 に答える
2

IE8 は、最終的に CSS display: table-* 値のサポートを追加する最後の主要ブラウザーになるため、この区別はなくなります。願わくば、これで CSS の難しさについての不満が解消され、人々がプレゼンテーションでマークアップを汚染するのをやめることができます。

于 2009-01-13T15:42:03.537 に答える
1

「cssは難しすぎる」と「テーブルはより速くて簡単」という言い訳と、構造マークアップにテーブルを使用することの何が問題になっているのかについてのいくつかの正しい不安が相まって。

問題は、SOがテーブルやインラインcssなどを使用することを選択した理由を尋ねることです。これに対する答えは、おそらく、優雅な劣化とセマンティクスに精通していないか、それが十分に重要であるとは考えていなかったということです。時間とリソースを費やす。

cssを知らなくても問題はありませんが、セマンティックマークアップとcssの適切な使用を却下するのは、それが間違っていることを知らないからです。

あなたのサイトがテーブルを使用するすべてのブラウザで同じように見えることを支持する一方で、視覚的なブラウザを使用しない人には少しも考えないでください-それは強い言葉です、そして私はそうしないので、口調をお詫びします」侮辱するつもりです。

ところで-構造的なマークアップにテーブルを使用することは「聖戦」であるという考えに私は恥ずかしい思いをします。セマンティックマークアップは過度に支持されていると考える人もいるかもしれませんが、それは盲目的な信仰に基づいていません。

于 2009-01-13T15:02:14.493 に答える
1

テーブルとレイアウト

SO のレイアウトはテーブルに基づいていません。

一見すると、SO レイアウトは 80% が div ベース、20% がテーブル ベースであると言えます。表は、ヘッダーと「バッジ」ボックスで使用されます。テーブルの使用は、私見ではバッジに適しています (結局のところ、アイテムのリストです)。ヘッダーにはあまり適していません。
それ以外の場所では、div が使用されます。

インライン CSS

ここでも、多くのインライン定義が使用されていますが (おそらくサイトの構造をすばやくモックアップするため)、SO は css も正しく使用しています (div のスタイルを設定し、印刷フォーマットを提供するため)。

于 2009-01-08T23:36:43.247 に答える
0

CSS は優れており、マークアップを非常に単純化できますが、コンテンツを表に揃える方が簡単で信頼性が高い場合があります。また、動的に生成されたコードの場合、非 CSS ベースのスタイリングの問題点のいくつかはそれほど悪くありません。具体的には、動的にマークアップを作成しているため、機能コードのスタイリング要素をリファクタリングできます。

インライン スタイルについては、ページを作成するときによく使用し、後で外部シートにリファクタリングしようとします。これにより、私のテストが少し簡単になり (ハード リフレッシュを行う必要はありません)、変更は 2 つではなく 1 つのファイルにまとめられます。

于 2009-01-08T22:35:23.713 に答える
0

私にはわかりませんが、私が思いつく唯一の説明は、Jeff が私たちに考えてほしいほど Web 標準を支持しておらず、チームの誰も CSS に熱中していないということです。プログラマーは、多くの場合、CSS スキルの欠如を弁解するために、クロスブラウザー性、使いやすさ、およびその他の多くの想定される時間上のメリットを利用します。批判しているわけではありませんが、彼らはおそらく C#/Java/Ruby/SQL などのプログラミングが本当に得意なのです。ポロネックを着たり、Mac Book を振り回したり、デザイナー...

于 2009-01-13T15:35:42.520 に答える
0

私の考えは、(引数テーブルとcssを除いて)テーブルを使用したことです

  • 彼らは意見を得るために機能を迅速に展開する必要がありました
  • 結局のところ、これは単なるパブリック ベータ版です。
  • 彼らは ASP.NET MVC の実験を増やし、レイアウトの問題を減らしました。
  • SO は質問と回答のプログラミングに関するものであり、最後に何が重要かということです。
  • SO は、ポイントとバッジに報酬を与えることによって貢献者を認識することがすべてです (これは物議を醸すトピックでもある可能性があります)。
  • 等々....
于 2009-01-13T13:38:35.987 に答える