DIV の代わりにテーブル [重複]

https://stackoverflow.com/questions/30251

html
css

09-06-2019
|

質問

重複の可能性:
HTML のレイアウトにテーブルを使用してみませんか?

HTML コーディングで DIV の代わりにテーブルを選択する必要があるのはどのような状況ですか?

解決

「Tables vs Divs」全体は、かろうじて的を外しています。「テーブル」や「ディビジョン」ではありません。それはセマンティック HTML を使用することです。

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

そうすれば、よりセマンティックなページが得られ、CSS で定義されるクラスの数はそれほど必要なくなります。代わりに、タグを直接ターゲットにすることもできます。おそらく最も重要なことは、同等のテーブルや div の多いページよりも、Google で (逸話的に) はるかに高いスコアを獲得できるページがあることです。何よりも、一部の視聴者とのつながりをより良くするのに役立ちます。

したがって、戻って table と div の観点から見てみると、実際には div が過剰に使用され、table が十分に使用されていないという点に達しているというのが私の意見です。なぜ？なぜなら、よく考えてみると、世の中には見落とされがちな「表形式データ」のカテゴリーに分類されるものがたくさんあるからです。たとえば、この Web ページ上の回答とコメントです。これらは複数のレコードで構成されており、各レコードには同じフィールドのセットが含まれます。大声で叫ぶため、SQL サーバーテーブルにも保存されます。これは表形式データの正確な定義です。これは、スタックオーバーフローの投稿のようなものをレイアウトするには、HTML テーブルタグがセマンティックな選択肢として絶対に適切であることを意味します。同じ原則が他の多くのものにも当てはまります。table タグを使用して 3 列のレイアウトを設定するのは得策ではないかもしれませんが、グリッドやリストに使用するのは確かに問題ありません...もちろん、実際に ol または ul (リスト) タグを使用できる場合は除きます。

他のヒント

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

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

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

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

実際的には、セルが積み重ねられている場合 (モバイルでよくあること)、論理フローで情報を提供する限り、単一のテーブルをメインレイアウトとして長く使用しても問題ありません。CSS 理論は素晴らしく聞こえますが、 部分的に ハッキングが多すぎると現実生活では機能しませんが、これは「純粋さ」の理想に反するものです。

CSS とテーブルのアプローチを使用して以来、Web サイトのデザインにかかる時間が大幅に節約され、メンテナンスがはるかに簡単になりました。ハッキングが減り、より直感的になります。「私はdivを挿入しましたが、今ではすべてめちゃくちゃに見えます！」と言う人々から電話が少なくなります。さらに重要なことは、アクセシビリティの問題はまったくないことです。

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

テーブル -> データ

Div -> レイアウト

(主に)

注記：質問がなされた時点では、レイアウト目的でテーブルを使用する実際的な理由がありました。ブラウザの改良によりこれは必要なくなったので、回答を更新しました。

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

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

いくつかの例：

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

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

私は、パブリック Web サイト用の HTML (テーブルはいいえ、いいえ、いいえ、div ははい、はい、はい) と、半公開またはプライベートの Web アプリケーション用の HTML を区別します。ページレイアウトであってもテーブルを好む傾向があります。

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

多くの投稿者がすでに述べているように、表形式のデータを表示するにはテーブルを使用する必要があります。

テーブルが導入されたのは、 HTML3.2 これらの使用法に関する仕様の関連する段落は次のとおりです。

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

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

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

フォームのテーブルに関する引数はわかりますが、もっと良い代替手段があります...袖をまくり上げて 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/

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

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

テーブルは、レイアウトのためではなく、表形式のコンテンツのために設計されました。

したがって、データを表示するためにこれらを使用しても、決して不快に思う必要はありません。

私は次の 2 つの場合にテーブルを使用します。

1) 表形式のデータ

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

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

この件に関して、私はこう思いましたこれサイトはかなり面白かったです。

1) 表形式のデータを表示する場合。カレンダーは表形式データの一例ですが、最初は必ずしも明らかではありません。

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

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

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

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

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

@マリウス:

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

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

私はラベルに固定幅を与えるか、上の行に表示することが多いです。

@ジョン・リムジャップ

ラベルの場合:テキストボックス、div も table も適切ではありません。 <dl>は

私が持っているもう1つの使用は、フォーム、特にラベルです。テキストボックスのペア。これは技術的にはDivボックスで行うことができますが、テーブルでこれを行うのははるかに簡単で、ラベル：テキストボックスのペアは実際には本質的に表面的であると主張することができます。

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

テーブルを含むページがブラウザによって読み込まれると、ブラウザがタグを適切にレンダリングするのに時間がかかります。div を使用する場合と同様に、ブラウザは軽いため時間がかかりません。さらに、CSS を適用して div をテーブルとして表示することができます。

通常、テーブルは重量があり、div は軽量です。

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

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

したがって、テーブルはデータだけでなく、上記の状況にも依然として役立つと思います。さらに、テーブルは依然として W3C 準拠のブラウザであり、代替ブラウザ (障害者用など) はテーブルを正しく解釈します。

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

テーブルは元々、実験結果などの科学データを画面上に表示することを目的としていました。Dave Raggett は、レイアウトの実装に慣れることを意図していませんでした。

上記を覚えていれば、それが頭の中にかなり明確に残ることがわかります。通常、テーブルで読み取ることが期待されるものである場合は、それが適切なタグであり、純粋なレイアウトである場合は、ニーズを達成するために他のものを使用してください。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow