html - DIV の代わりのテーブル

Question

重複の可能性:
HTML のレイアウトにテーブルを使用しないのはなぜですか?

HTML コーディングで DIV ではなくテーブルを選択する必要があるのは、どのような場合ですか?

score 197 · Accepted Answer

「TablesvsDivs」全体は、マークをほとんど見逃していません。「テーブル」や「div」ではありません。セマンティックHTMLの使用についてです。

divタグでさえ、適切にレイアウトされたページではごくわずかな役割しか果たしません。使いすぎないでください。HTMLを正しくまとめれば、それほど多くは必要ありません。リスト、フィールドセット、凡例、ラベル、段落などのようなものは、divまたはspanが達成するためによく使用されるものの多くを置き換えることができます。Divは、主に論理的な除算を示すことが理にかなっている場合に使用し、絶対に必要な場合にのみ追加のレイアウトに使用する必要があります。同じことがテーブルにも当てはまります。表形式のデータがある場合に使用しますが、それ以外の場合は使用しません。

次に、よりセマンティックなページがあり、CSSで定義されているクラスの数はそれほど多くありません。代わりに、タグを直接ターゲットにすることができます。おそらく最も重要なのは、同等のテーブルやdivが多いページよりも、Googleで（逸話的に）スコアがはるかに高いページがあることです。何よりも、それはあなたがあなたの聴衆の一部とより良くつながるのを助けるでしょう。

したがって、戻ってテーブルとdivの観点から見ると、実際にはdivが過剰に使用され、テーブルが十分に使用されていない状態になっていると思います。なんで？なぜなら、実際に考えてみると、見落とされがちな「表形式データ」の範疇に入るものがたくさんあるからです。たとえば、このWebページに関する回答とコメント。それらは複数のレコードで構成され、それぞれに同じフィールドのセットがあります。それらは、大声で叫ぶために、SQLサーバーテーブルに格納されています。これは、表形式データの正確な定義です。これは、HTMLテーブルタグが、StackOverflowの投稿のようなものをレイアウトするためのセマンティックな選択として絶対に適していることを意味します。同じ原則が他の多くのものにも当てはまります。テーブルタグを使用して3列のレイアウトを設定するのは良い考えではないかもしれませんが、

score 52 · Accepted Answer

私が提示しているデータが確かに表形式である場合。

一部のWebデザイナーが、一部のサイトの表形式データでdivを使用しているのはばかげていると思います。

私がそれに対して持つもう1つの用途は、フォーム、特にラベル：テキストボックスのペアです。これは技術的にはdivボックスで行うことができますが、テーブルでこれを行う方がはるかに簡単であり、label：textboxのペアは実際には表形式であると主張できます。

score 24 · Accepted Answer

以前は純粋なCSSを実行していましたが、その追求を断念し、最も実用的なアプローチとしてハイブリッドテーブル/cssアプローチを採用しました。皮肉なことに、それはアクセシビリティのせいでもあります。SidekickでCSSを試してみたことはありますか？なんて悪夢だ！CSSベースのWebサイトが新しいブラウザでどのようにレンダリングされるかを見たことがありますか？CSSをオフにしなければならなかったため、要素が重なっているか、正しく表示されませんでした。CSSベースのWebサイトのサイズを変更してみたことがありますか？ブラウザでズーム機能を使用すると、見た目がひどく、視覚障害者に悪影響を与えることがよくあります。テーブルを使用してこれを行うと、スケーリングが大幅に向上します。人々がアクセシビリティについて話すとき、私は多くの人が手がかりを持っていないことに気づきます、そしてそれは私が障害者であり、彼らがそうではないので私を悩ませます。彼らは本当に盲人と一緒に働いたのですか？聴覚障害者？アクセシビリティが主な関心事である場合、なぜビデオの99％がクローズドキャプションされていないのですか？多くのCSS純粋主義者はAJAXを使用していますが、AJAXによってコンテンツにアクセスできなくなることがよくあることに気づいていません。

実用的には、セルがスタックされている場合（モバイルで見られるもの）、論理フローで情報を提供するのと同じくらい長い間、メインレイアウトとして単一のテーブルを使用することは問題ありません。CSS理論は素晴らしいように聞こえますが、実際の生活ではハックが多すぎて部分的に機能します。これは「純度」の理想に反するものです。

CSS with tableアプローチを使用して以来、Webサイトの設計にかかる時間を大幅に節約でき、保守がはるかに簡単になりました。ハックが少なく、より直感的です。「DIVを挿入したのですが、すべてがめちゃくちゃになっているようです」という人からの電話が少なくなりました。そしてさらに重要なことに、アクセシビリティの問題はまったくありません。

score 21 · Accepted Answer

通常、レイアウトを提供するためにテーブルを使用していないときはいつでも。

テーブル->データ

Divs->レイアウト

（主に）

score 20 · Accepted Answer

注: 質問がされた時点では、いくつかのレイアウト目的で表を使用する実際的な理由がありました。これはブラウザーの改善により不要になったため、回答を更新しました。

HTML<table>要素は、データが論理的に 2 次元構造を持つ場合に使用する必要があります。データを行と列で構造化でき、行と列の両方に意味のあるヘッダーを適用できる場合は、おそらく表形式のデータです。

データが 1 行または 1 列しかない場合、それは表形式のデータではなく、単なる線形コンテンツです。表形式のデータと見なすには、少なくとも 2 つの行と 2 つの列が必要です。

いくつかの例：

サイドバーとページヘッダー/フッターを配置するためのテーブルの使用。これは表形式のデータではなく、ページレイアウトです。css grid や flexbox などがより適切です。

新聞スタイルのコラムにテーブルを使用。これは表形式のデータではありません - それでも直線的に読み取ることができます。css 列のようなものがより適切です。

score 13 · Accepted Answer

パブリックWebサイト（テーブルno-no-no、divs yes-yes-yes）のHTMLと、ページレイアウトでもテーブルを好む傾向があるセミパブリックまたはプライベートWebアプリケーションのHTMLを区別します。

「テーブルが悪い」という立派な理由のほとんどは、通常、公開Webサイトでのみ問題になりますが、Webアプリではそれほど問題にはなりません。複雑なCSS+DIVよりもTABLEを使用することで、同じレイアウトを取得し、ブラウザー間でより一貫した外観を得ることができる場合は、通常、先に進んでTABLEを承認します。

score 11 · Accepted Answer

多くのポスターがすでに言及しているように、表形式のデータを表示するには表を使用する必要があります。

表はHTML3.2で導入されました。ここでは、それらの使用法に関する仕様の関連する段落を示します。

[テーブル]は、表形式の資料をマークアップするため、またはレイアウトの目的で使用できます。

score 8 · Accepted Answer

トーマスに同意します。一般的な経験則では、スプレッドシートで意味がある場合は、テーブルを使用できます。そうでなければそうではありません。

ページのレイアウトとしてテーブルを使用しないでください。これが、テーブルに関する主な問題です。

score 7 · Accepted Answer

フォームのテーブルに関する議論はわかりますが、もっと良い代替手段があります... 袖をまくり上げて CSS を学ぶだけです。

例えば：

<fieldset>
  <legend>New Blog Post</legend>

  <label for="title">Title:</label>
  <input type="text" name="title" />

  <label for="body">Body:</label>
  <textarea name="body" rows="6" cols="40">
  </textarea>
</fieldset>

その html を取得して、横に並べたラベルまたはテキストボックスの上にラベルを配置してフォームをレイアウトできます (こちらの方が簡単です)。柔軟性があることは本当に役に立ちます。また、いずれかの表に相当するものよりも HTML が少なくなります。

CSS フォームの優れた例については、次の優れた例をご覧ください。

http://jeffhowden.com/code/css/forms/

http://www.sitepoint.com/article/fancy-form-design-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

score 6 · Accepted Answer

私は通常、フォームタイプの情報（名、姓、住所など）を表示するテーブルを選択します。ここでは、複数の行にまたがるラベルとフィールドの並べが重要です。レイアウトに使用するDIV。

もちろん、テーブルはDIVでラップされています:)

score 4 · Accepted Answer

表は、レイアウトではなく、表形式のコンテンツ用に設計されています。

したがって、それらを使用してデータを表示しても、気分が悪くなることはありません。

score 4 · Accepted Answer

私は次の 2 つのケースでテーブルを使用します。

1) 表形式のデータ

2) レイアウトをコンテンツに合わせて動的にサイズ変更したいときはいつでも

score 3 · Accepted Answer

データを 2 次元グリッドに配置できる場合は、を使用します<table>。できない場合は、しないでください。<table>それ以外に使用するのはハックです (ただし、特に古いブラウザーとの互換性に関しては、適切な代替手段がないことがよくあります)。明らかに使用すべきものを使用しないことも同様に悪いことです。すべてではありません。実際、セマンティックレベルでは完全に無意味であるため、よりセマンティックな代替手段を優先して、何としても回避する必要があります。<table> <div><span>

score 3 · Accepted Answer

3

この件に関しては、このサイトはかなり面白いと思いました。

于 2009-01-29T22:01:06.640 に答える

score 2 · Accepted Answer

1）表形式のデータを表示します。カレンダーは、最初は必ずしも明白ではない表形式のデータの一例です。

2）私は医療費請求会社で働いており、社内作業のほとんどすべてのレイアウトはCSSを使用して行われています。ただし、保険会社から請求者が使用する必要のある紙のフォームを受け取ることがあり、プログラムによってそれらがhtml形式に変換され、イントラネットを介して記入および印刷できるようになります。フォームが受け入れられることを確認するには、元の紙のバージョンと非常に厳密に一致する必要があります。これらの場合、テーブルにフォールバックするのは簡単です。

score 2 · Accepted Answer

テーブルは、表形式のデータに使用されます。スプレッドシートに入れるのが理にかなっている場合は、表を使用してください。それ以外の場合は、div、span、ul など、使用するのに適したタグがあります。

score 1 · Accepted Answer

表形式のコンテンツだけだと思います。たとえば、データベーステーブルまたはスプレッドシートのようなデータをHTMLに印刷した場合です。

score 1 · Accepted Answer

意味的に正しいHTMLが必要な場合は、表形式のデータにのみテーブルを使用する必要があります。

divそれ以外の場合は、必要なものすべてにテーブルを使用しますが、 sとCSSを使用して同じことを行う方法がおそらくあります。

score 1 · Accepted Answer

@マリウス：

レイアウトは表形式のデータですか？いいえ、数年前は標準でしたが、現在はそうではありません:-)

私がそれに対して持つもう1つの用途は、フォーム、特にラベル：テキストボックスのペアです。これは技術的にはdivボックスで行うことができますが、テーブルでこれを行う方がはるかに簡単であり、label：textboxのペアは実際には表形式であると主張できます。

私はラベルに固定幅を与えるか、上の行に表示する傾向があります。

score 1 · Accepted Answer

@ジョン・リムジャップ

label : textbox の場合、div もテーブルも適切ではありません: <dl>s は

score 0 · Accepted Answer

もう 1 つの用途は、フォーム、特に label : textbox のペアです。これは技術的には div ボックスで行うことができますが、テーブルでこれを行う方がはるかに簡単であり、label:textbox のペアは実際には表形式であると主張できます。

特に MS 開発者の間では、かなりの数が見られます。そして、私は過去にかなりの量を行ってきました。機能しますが、一部のアクセシビリティとベストプラクティスの要因が無視されます。フォームをレイアウトするには、ラベル、入力、フィールドセット、凡例、および CSS を使用する必要があります。なんで？それが目的なので、より効率的です。アクセシビリティは重要だと思います。しかし、それは私の個人的な好みです。誰もが非難する前に、まずそのようにしてみるべきだと思います。すばやく、簡単に、きれいにできます。

score 0 · Accepted Answer

div はシンプルdivisionsで、セマンティックな意味でリンクされているページのセクションをグループ化するために使用することを意図していません。それ以外の暗黙の意味はありません。

表はもともと、実験結果などの科学データを画面に表示することを目的としていました。Dave Raggett は、それらがレイアウトの実装に慣れるつもりはなかったに違いありません。

上記を覚えていれば、それが通常テーブルで読むと予想されるものであれば、それが適切なタグであり、純粋なレイアウトであれば、他の何かを使用してニーズを達成することができれば、頭の中でかなり明確に保たれることがわかります。

score 0 · Accepted Answer

DIV がレイアウトに使用されていることは明らかですが、この理由により、スプレッドシートを使用して div 構造内でグリッドレイアウトを行うことが「強制」されました。

パーセンテージ値を追加すると、div との適切な位置合わせができませんでしたが、テーブルのセルで表現された同じ値が期待される結果をもたらしました。

したがって、テーブルはデータだけでなく、上記の状況でも依然として有用であると思います。その上、テーブルは依然として W3C 準拠のブラウザーであり、代替ブラウザー (無効になっている場合など) はそれらを正しく解釈します。

score 0 · Accepted Answer

テーブルを含むページがブラウザによってロードされるたびに、ブラウザがタグを適切にレンダリングするのにより多くの時間がかかります。div が使用されているかのように、ブラウザは軽いので時間がかかりません。さらに、css を適用して div をテーブルとして表示することもできます。

通常、テーブルは重く、div は軽量です。

html - DIV の代わりのテーブル

24 に答える 24

Related

Reference