☰

Why not use tables for layout in HTML? [closed] Ask Question

tag-icon • tag-icon html css
Why not use tables for layout in HTML? [closed] Ask Question

It seems to be the general opinion that tables should not be used for layout in HTML.

Why?

I have never (or rarely to be honest) seen good arguments for this. The usual answers are:

  • It's good to separate content from layout
    But this is a fallacious argument; Cliche Thinking. I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?

    Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and CSS.

    By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs.

  • Readability of the code
    I think it's the other way around. Most people understand HTML, few understand CSS.

  • It's better for SEO not to use tables
    Why? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective?

  • Tables are slower.
    An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page.

  • A layout overhaul is easier without tables, see css Zen Garden.
    Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

I am really interested in good arguments to use divs + CSS instead of tables.

ベストアンサー1

I'm going to go through your arguments one after another and try to show the errors in them.

It's good to separate content from layout But this is a fallacious argument; Cliché Thinking.

HTML は意図的に設計されたものなので、これはまったく誤りではありません。要素の誤用は完全にあり得ないというわけではありませんが (結局のところ、他の言語でも新しいイディオムが開発されています)、起こり得る否定的な影響は相殺する必要があります。さらに、<table>今日要素の誤用に対する反論がなかったとしても、ブラウザー ベンダーが要素に特別な処理を適用する方法により、明日は反論があるかもしれません。結局のところ、ブラウザー ベンダーは「<table>要素は表形式のデータ専用」であることを知っており、この事実を利用してレンダリング エンジンを改良し、その過程で要素の動作を微妙に変更して<table>、以前に誤用されていたケースを解消する可能性があります。

だから何？上司は気にするだろうか？ユーザーは気にするだろうか？

場合によります。あなたの上司は髪が尖っていますか？それなら気にしないかもしれません。彼女が有能なら気にするでしょう。なぜならユーザーは意思。

おそらく、Web ページを保守しなければならない私や同僚の開発者は気にしているでしょう... テーブルは保守しにくいのでしょうか? テーブルを使用する方が div や CSS を使用するよりも簡単だと思います。

プロのウェブ開発者の大多数はあなたに反対しているようです [引用が必要]。テーブルは実際、保守性が低いことは明らかです。レイアウトにテーブルを使用すると、企業のレイアウトを変更すると、実際にはすべてのページを変更することになります。これは非常にコストがかかります。一方、意味的に意味のある HTML と CSS を慎重に組み合わせて使用​​すると、そのような変更を CSS と使用する画像に限定できる可能性があります。

ところで、div または span を使用すると、コンテンツをレイアウトやテーブルから適切に分離できないのはなぜでしょうか? div のみで適切なレイアウトを実現するには、多くの場合、多数のネストされた div が必要になります。

深くネストされた<div>div は、テーブル レイアウトと同様にアンチパターンです。優れた Web デザイナーは、そのような要素をあまり必要としません。一方、そのような深くネストされた div であっても、テーブル レイアウトの問題の多くは発生しません。実際、コンテンツを論理的に分割することで、セマンティック構造に貢献することさえあります。

コードの読みやすさは逆だと思います。ほとんどの人は HTML を理解しますが、CSS を理解する人はほとんどいません。よりシンプルです。

「ほとんどの人」は重要ではありません。プロフェッショナルが重要です。プロフェッショナルにとって、テーブル レイアウトは HTML + CSS よりも多くの問題を引き起こします。これは、ほとんどの人にとってメモ帳の方が簡単なので、GVim や Emacs を使用するべきではないと言っているようなものです。または、ほとんどの人にとって MS Word の方が簡単なので、LaTeX を使用するべきではないと言っているようなものです。

SEO的にはテーブルを使わない方が良い

これが本当かどうかはわかりませんし、これを議論に使うつもりもありませんが、論理的にはそうでしょう。検索エンジンは関連データを検索します。表形式のデータはもちろん関連している可能性がありますが、ユーザーが検索するのはほとんどありません。ユーザーは、ページ タイトルや同様に目立つ位置で使用されている用語を検索します。したがって、表形式のコンテンツをフィルタリングから除外し、処理時間 (およびコスト!) を大幅に削減することは論理的です。

テーブルは遅くなります。追加の tbody 要素を挿入する必要があります。これは、最新の Web ブラウザーにとっては大したことではありません。

追加要素は、テーブルが遅くなることとは何の関係もありません。一方、テーブルのレイアウト アルゴリズムははるかに難しく、ブラウザーは、コンテンツのレイアウトを開始する前にテーブル全体が読み込まれるまで待たなければならないことがよくあります。さらに、レイアウトのキャッシュは機能しません (CSS は簡単にキャッシュできます)。これらはすべて、以前に説明したとおりです。

テーブルの使用によってページの速度が大幅に低下するベンチマークをいくつか示してください。

残念ながら、ベンチマーク データはありません。この議論には一定の科学的厳密さが欠けているというのは事実なので、私自身も興味があります。

アップグレードが必要なほとんどの Web サイトには、新しいコンテンツ (HTML) も必要です。Web サイトの新しいバージョンに新しい CSS ファイルのみが必要になるシナリオは、あまり考えられません。

まったくそうではありません。コンテンツとデザインを分離することでデザインの変更が簡素化されたケースをいくつか手がけてきました。HTML コードの一部を変更する必要はありますが、変更はずっと限定的なものになります。さらに、デザインの変更は動的に行う必要がある場合もあります。WordPress ブログ システムで使用されているようなテンプレート エンジンを考えてみましょう。テーブル レイアウトは文字通りこのシステムを台無しにします。私は商用ソフトウェアで同様のケースに取り組んだことがあります。HTML コードを変更せずにデザインを変更できることは、ビジネス要件の 1 つでした。

もう 1 つ。テーブル レイアウトにより、Web サイトの自動解析 (スクリーン スクレイピング) がはるかに難しくなります。これは些細なことのように聞こえるかもしれませんが、結局のところ、誰が行うのでしょうか。私自身も驚きました。スクリーン スクレイピングは、問題のサービスがデータにアクセスするための Web サービスの代替手段を提供していない場合に非常に役立ちます。私はバイオインフォマティクスの分野で働いていますが、そこではこれが悲しい現実です。最新の Web 技術と Web サービスはほとんどの開発者に届いておらず、多くの場合、スクリーン スクレイピングがデータ取得プロセスを自動化する唯一の方法です。多くの生物学者が依然としてこのようなタスクを手動で実行しているのも不思議ではありません。何千ものデータ セットに対してです。

おすすめ記事