html - DIV 対 TABLE 反論してください

Question

「HTML の構造化になぜテーブルを使用すべきではないのか」と尋ねる人がたくさんいます。多くの回答が寄せられていますが、セマンティクスの世界に変換されている人はめったにいません。とはいえ、テーブルを使用すべき (または使用する可能性がある) 理由を裏付ける説得力のある反論はまだ見たことがありません。

テーブルが有効な構造マークアップである場合の根拠を提供したい人はいますか?

2008 年 11 月 7 日

この疑問が思ったように消えなかったのを考えると、疑問を明確にしてその存在を説明したほうがいいと思います。

「DIVs vs. TABLEs」の質問に続いて「テーブルの方が簡単」という議論を何度も読んだことへの不満から、私はもう少し質問を明らかにし、テーブル愛好家が簡単にフックから外れないようにしたいと思いました。

他の人はそれぞれに言うかもしれませんが、「テーブルの方が簡単」な開発者によって作成された、サイトに配置するためのアプリケーションを永遠に与えられています。テーブル愛好家が議論を聞いているのを十分に見ていません。

昔マンボ使ってた人いますか？Microsoft の Sharepoint のトップにデザインを載せるのに、誰かがバッシングしなければなりませんでしたか? ネストされたテーブルのがらくたをすべて戦わなければならないのは地獄でした。それが何人かの血まみれの優れたコーダーによって書かれたことを考えると、私はまったくイライラします。妥当なセマンティックマークアップはかなり前から存在していたので、開発者が「テーブルの方が簡単だ」と主張し続ける理由はありません。テーブルは簡単ではありません - 彼らは怠惰です!

私の質問は、それが提示された否定的な方法について否定的な意見に値しましたが、人々がテーブルを使用する唯一の理由は、HTML を知らないためであるということを受け入れるのを待っています。そうすれば、jjrv が言うように、テーブルは表形式のデータであることを理解できるからです。

score 16 · Accepted Answer

テーブルは、データのテーブルがある場合に有効です。恐ろしいテーブルタグを回避するために多数のdivを使用するために邪魔にならないインタラクティブなグリッドウィジェットを見てきました。表形式のデータの場合は、表形式にします。

私のより物議を醸す見方は、CSSで垂直レイアウトの問題を処理する際に問題が発生した場合、テーブルを使用するだけで、多くの場合すぐに解決できるというものです。コンテンツとプレゼンテーションを混ぜ合わせることは、おそらく本来あるべきほどきれいではありませんが、それは仕事を成し遂げ、IEを回避するためのCSSハックを回避します。

score 6 · Accepted Answer

RE: なぜテーブルなのですか?

一部の人々は（何年も経った今でも）変化を恐れているからです. 彼らは、セマンティック HTML を使用するのは良いことだと聞いています (通常、その概念を完全には理解していません)。そこで、今までやったことのない CSS を使ってレイアウトを組もうとする。彼らはいくつかの問題に遭遇し (十分に文書化されており、通常は簡単に解決できます)、手を上げてテーブルに戻ります。

次に、CSS は「時間がかかりすぎる」(「それを学ぶのに時間をかけたくない」) または「実用的でない」(「理解できない。難しすぎる」) と判断し、テーブルは唯一の正しい方法。頑固さと無知によって、彼らは自分のでたらめを信じ、顧客や同僚を説得します。

そして、彼らの世界は幸せで変わらず、さらに過去へと消え去り、陳腐化へと進んでいきます*

そして、それが「なぜテーブルなのか」です。終わり。

(*ただし、HTML メールのコーディングに適しています)

score 2 · Accepted Answer

テーブルは、CSSを何時間もいじって、コンテンツに関係なく2つの隣接する列状のdivを100％の高さと幅に拡張し、追加のdivラッパーを追加せずにすべてのブラウザーでハックを機能させることができない開発者向けです。そして最後に、彼らは絶対的な欲求不満で5秒の修正に頼ります：

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

難しい真実は、ほとんどのユーザー（スクリーンリーダーを使用しているユーザーを除く）は、ページがすばやく読み込まれる限り、ページがどのようにマークアップされるかを本当に気にしないということです。

開発者には予算と時間の制約があり、「優れた」CSSとマークアップには時間がかかります。

Web上に多数のリソースがあり、その単純なテーブルを置き換えるために2つのdivを並べる方法を非常に骨の折れる詳細で説明しているという事実は、この設計が本質的にテーブルと同じくらい欠陥があることを私に非常に明白に言います。2列のテーブルをページに追加する方法を説明するために必要なチュートリアルはいくつですか？

HTML5は、新しいヘッダー、フッター、セクション、ナビゲーション、および脇のタグを使用して、すべての健全性をもたらすはずです。Nettuts +からの例：

<div id="content">
    <div id="mainContent">
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
    </div>
    <aside>
        <!-- Sidebar -->
    </aside>
</div>

次に、CSSの場合は次のようになります。

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

display: table;CSSに次のプロパティがあることに気付いたとき、鋭い目を持つ人は皮肉な感覚を気に入るはずですdisplay: table-cell;。

テーブルが戻ってきました！HTML5の裏口からこっそり入ります;-)

score 1 · Accepted Answer

興味深いメモは、非常に複雑なJavaScriptアプリケーションに関連しています。GmailまたはGoogleカレンダーとFirebugを区別すると、レイアウトの場合でも、テーブルが広く使用されていることがわかります。確かに、これらは通常動的に生成されますが、これは、まれに、非常に視覚的に複雑なインタラクティブユーザーインターフェイスをDIVのみを使用して構築することが非常に難しいことを示しています。

score 1 · Accepted Answer

機能を追加したり、バグを修正したり、データ駆動型 Web サイトの外観を変更したりする場合は、最新のセマンティックマークアップを使用する方がはるかに簡単です。AJAX 機能やあらゆる種類の対話型スクリプトを追加すると、TABLE よりも DIV や CSS の方がうまく機能します。

Drupal、Joomla、WordPress などのコンテンツマネージャーへの移行は、セマンティックマークアップで既に整理されている場合、はるかに簡単になります。

新しいブラウザーエディションでは、最新のマークアップもより効率的にサポートされ、サイトの表示が高速になります。これらすべてのテーブルを再配置すると、表示時間が遅くなる可能性があります。

一方、テーブルはここにとどまります。一部の人々はそれらを使い続け、ブラウザはそれらを表示し続けます。非セマンティックマークアップが必要な場合は、本質的に問題はありません。変更されることのない完全に静的なサイトは、最新のマークアップと同様にテーブルでも実行できます。

有効な構造マークアップについては、次のとおりです。テーブルは、データベースやスプレッドシートのテーブルのように、表形式のデータを表示する優れた方法です。それらは、他のものに対して実際に有効なマークアップではありません。

score 1 · Accepted Answer

DIV ベースのレイアウトには制限があります。テーブルがなければ、コンテンツの高さに基づいて適切に拡大する 2 列のレイアウトを実装することは基本的に不可能です。

score 0 · Accepted Answer

テーブルは、無愛想な古いHTMLv1.0ブラウザでもサポートされています。ターゲット市場に1990年代から携帯電話に組み込まれたブラウザを使用している人々が含まれている場合、それはテーブルを使用する良い理由かもしれません。

多くの既存の自動生成されたHTMLはテーブルを使用します。コードがこれらのテーブルと対話したり、それらのテーブルを含める必要がある場合は、一貫性を保つことをお勧めします。

score 0 · Accepted Answer

最小公倍数の HTML または複数の列または行にまたがる表形式のデータにはテーブルを使用します。それ以外の場合、css レイアウトは冗長性がはるかに低く、コツをつかめば保守がはるかに簡単になります。

score 0 · Accepted Answer

テーブルは表形式のデータに優れているという点でjjrvは正しいと思います。テーブルを使用するだけでなく、テーブルのように何かを「機能させる」ために邪魔をすることは、境界線が遅れています。

標準に関心があり、すべてのブラウザーで確実に実装する方向に進んでいる場合は、ほとんどのマークアップをテーブルのないリキッドレイアウトにする必要があります。

本当に古いブラウザー、つまり恐ろしい ie6 より前のブラウザーに対応する必要がある場合は、css に多くの問題が発生することになります。現在の使用状況の統計を考えると、すべての人が css レイアウトをサポートする「最新の」ブラウザーを使用していると想定しても問題ありません。

これはすべて、レイアウトで壁に頭をぶつけて、テーブルでそれを通してf___と言いたい/したいときであり、それは機能します。これが非推奨の慣行であることを願っていますが、クリンチでは予測可能な結果が得られます。

html - DIV 対 TABLE 反論してください

9 に答える 9

Related

Reference