HTMLのレイアウトにテーブルを使用しないのはなぜですか?[閉まっている]


665

HTMLでのレイアウトにテーブルを使用してはならないというの一般的な見方のようです。

どうして?

私はこれについて良い議論を見たことがありません(または正直に言うとまれです)。通常の答えは次のとおりです。

  • コンテンツをレイアウトから分離するのは良いこと
    ですが、これは誤った議論です。クリシェ思考。レイアウトにtable要素を使用しても、表形式のデータとはほとんど関係がないのは事実です。だから何?上司は気にしますか?ユーザーは気にしますか?

    おそらく、私またはWebページのケアを維持する必要のある他の開発者...テーブルの保守性は低下しますか?テーブルを使用するが、divやCSSを使用するより簡単だと思います。

    ちなみに、なぜdivまたはspanを使用してコンテンツをレイアウトから分離し、テーブルを使用しないのですか?多くの場合、divのみで適切なレイアウトを取得するには、多くのネストされたdivが必要です。

  • コードの読みやすさ
    それは逆だと思います。ほとんどの人はHTMLを理解し、CSSを理解する人はほとんどいません。

  • SEOがテーブルを使用しない方が良いのは
    なぜですか?誰かがそれであるという証拠を示すことができますか?または、テーブルはSEOの観点から推奨されないというGoogleの声明は?

  • テーブルが遅くなります。
    追加のtbody要素を挿入する必要があります。これは、最新のWebブラウザー用のピーナッツです。テーブルを使用するとページの速度が大幅に低下するベンチマークをいくつか示してください。

  • レイアウトのオーバーホールはテーブルがなくても簡単です。csZenガーデンを参照してください。
    アップグレードが必要なほとんどのWebサイトには、新しいコンテンツ(HTML)も必要です。Webサイトの新しいバージョンが新しいCSSファイルのみを必要とするシナリオは、あまりありません。Zen Gardenは素晴らしいWebサイトですが、少し理論的です。CSSの誤用は言うまでもありません。

テーブルの代わりにdivs + CSSを使用するための良い議論に本当に興味があります。


表形式のデータを表示する場合、テーブルは問題ありません。純粋にレイアウトに使用する場合は避けてください。繰り返しになりますが、時々、今は簡単な道を進み、後でそれを改善する必要があります。ソースを表示するだけで、私の意味がわかります。
2008


11
答えは簡単です。現在のCSSバージョンでは解決できない特定の問題を解決するためにテーブルが使用されている場合、それらはよく使用されています。テーブル内、つまり数百万のテーブル内にテーブルを取得し始めると、それは間違っています。いくつかの2列などをレイアウトするための時折テーブルである場合、私はチームでそれを許可しません。それはより速く、より簡単です。(私自身、常にCSSを使用しようとしますが、結局のところ、正しいセマンティックHTMLよりも配信が重要です)
AlfaTeK

1
@Camilo SOはまだ20世紀に住んでいます。ジェフはどうやらulタグの使い方を知りません。このサイトのすべてのリスト(バッジ、関連する質問、最近のタグ)をご覧ください。これらはすべて、単一の列またはで区切られた長い段落brです。
Yi Jiang

2
@Brad:いくつかの特定の詳細に応じて(それは賢いカムバックのための私の出口です;-)、DIVの使用はテーブルの乱用よりも優れています。たまたま一緒にレイアウトされたドキュメントの2つの部分は、正当にDIV要素に含まれている可能性がありますが、それらは確かに表形式のデータではありません。たまたま特定のスタイルが何であるかは問題ではありません。コンテンツは表形式かそうでないかのどちらかです。注:私はDIVitisも支持していません:)
ボビー・ジャック

回答:


496

私はあなたの議論を次々と検討し、それらのエラーを示すようにしようとしています。

コンテンツをレイアウトから分離するのは良いことですが、これは誤った議論です。クリシェ思考。

HTMLは意図的に設計されているので、それはまったく誤りではありません。要素の誤用は完全に問題外にはならないかもしれませんが(結局のところ、新しいイディオムが他の言語でも開発されています)、考えられるマイナスの影響を相殺する必要があります。さらに、<table>今日の要素の誤用に対する議論がなかったとしても、ブラウザーベンダーが要素に特別な扱いをする方法が原因で、明日になる可能性があります。結局のところ、彼らは「<table>要素は表形式のデータのみ」であることを知っており、この事実を使用してレンダリングエンジンを改善し、その過程で<table>sの動作を微妙に変更し、以前は誤用されていたケースを壊します。

だから何?上司は気にしますか?ユーザーは気にしますか?

依存します。あなたの上司は先のとがった髪ですか?その後、彼は気にしないかもしれません。彼女が有能であれば、ユーザーがそうするので、彼女は気にかけるでしょう

おそらく、私またはWebページのケアを維持する必要のある他の開発者...テーブルの保守性は低下しますか?テーブルを使用する方が、divやcssを使用するよりも簡単だと思います。

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

ちなみに、なぜdivまたはspanを使用してコンテンツをレイアウトから分離し、テーブルを使用しないのですか?多くの場合、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つでした。

別物。テーブルレイアウトにより、Webサイトの自動解析(画面スクレイピング)がはるかに困難になります。結局のところ、誰がそれをしているのかというと、これは簡単に聞こえるかもしれません。びっくりしました。問題のサービスがデータにアクセスするための代替WebServiceを提供していない場合、画面のスクレイピングは大きな助けになります。私はこれが悲しい現実であるバイオインフォマティクスで働いています。最新のWeb技術とWebサービスはほとんどの開発者に届いていないため、データを取得するプロセスを自動化する唯一の方法はスクリーンスクレイピングです。多くの生物学者がまだそのような作業を手動で行っているのも不思議ではありません。何千ものデータセット用。


139
「コーポレートレイアウトを変更すると、実際にはすべてのページが変更されることになります」-実際に、コーポレートレイアウトをすべてのページに複製することはできますか?マスターページや.netのユーザーコントロール、phpやクラシックaspのファイルなどを使用して簡単に解決できます。このような会社のレイアウトをコピーする人は誰でもa **蹴るに値します!;-)
ジョンマッキンタイア

43
申し訳ありませんが、これは本当に「空からのパイ」希望的な考えです。ユーザーは気に?いいえ。少数の見当違いの修正主義者を除いて、誰も気にしません。HTML(テーブルを含む)は、「セマンティクスとレイアウト」という比較的新しい概念よりもはるかに古くなっています。ああ、「プロのウェブ開発者の大多数があなたに反対している」のでソースをお願いします。
cletus 2009年

20
上記の誤植:セマンティクスは最初から暗示されていました。HTMLの<table>は常に表形式のデータのみを目的としており、レイアウトを目的としたものではありません(初期の頃は、テーブルの外観を変更できなかったため、レイアウトアンカーとして使用できませんでした)。実際、HTMLの初期のドラフトにはレイアウトの概念はまったくありませんでした。HTMLはレイアウト用ではなく、テキストの構造化用でした。さらに、HTMLの最初の提案は、レイアウトに影響を与えるためにタグを悪用することに対して繰り返し警告し、物理的マークアップよりも論理的マークアップを使用するよう警告しています。
Konrad Rudolph、

109
スクリーンリーダーを取得して、テーブルレイアウトのページを読み上げます。以上です。
corymathews 2009

8
@セルジオ:関連情報を編集しないでください。これ、私がそこで使用している出所のない疑わしい主張であり、それを明確にしたいと思います。あなたの編集は、私がバックアップできないという私の口の中に主張を入れました、これが事実であることが判明した場合、私は事実上嘘つきになりました。
Konrad Rudolph

290

これは同様のスレッドからの私のプログラマの答えです

セマンティクス101

最初にこのコードを見て、ここで何が悪いのか考えてください...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

もちろん問題は、自転車は車ではないということです。車のクラスは、自転車のインスタンスには不適切なクラスです。コードにはエラーはありませんが、意味的には正しくありません。プログラマーにはあまり反映されていません。

セマンティクス102

これをドキュメントのマークアップに適用します。ドキュメントで表形式のデータを提示する必要がある場合、適切なタグはになります<table>。ただし、ナビゲーションをテーブルに配置すると、<table>要素の使用目的が誤って使用されます。2番目のケースでは、表形式のデータを表示しておらず、<table>要素を使用して(誤って)表示の目標を達成しています。

結論

訪問者は気づきますか?いいえ、あなたの上司は気にしますか?多分。プログラマーとして時々手を抜くことがありますか?承知しました。しかし、私たちはすべきですか?いいえ。セマンティックマークアップを使用すると誰にメリットがありますか?あなた-そしてあなたの専門家の評判。今すぐ行って正しいことをしてください。


39
すみません、それは水を保持しません。代わりに「bike」クラスを定義するため、mybikeにcarを使用しません。"<table>"には他に何かを定義することはできません。これは、単なる意味タグではなく、コンテンツのレンダリング方法もブラウザに指示するためです。
ジミー

57
素敵なアナロジーと素晴らしい結論。なぜ誰かが上司やユーザーに強制されて正しいことをしなければならないのですか?もう自分の仕事に誇りを持っている人はいませんか?
シェルムペンドリー2008年

39
私はこれは何も説明せず、質問に答えることなく同じ主張を繰り返すだけのかなり傲慢な投稿だと思います。なぜ多くの賛成票を獲得したのか理解できませんか????
マーカス2008年

10
タークムに同意します。この反応はかなり主観的であり、実際に提起された質問には答えません。ページレイアウトにDIVを使用する必要があることに同意しますが、テーブルベースのレイアウトにWebデザイナーが混乱することは想像できません。
Richard Ev

16
@tharkun&Richard:「意味的に不正確」が主観的で何も説明しないのはなぜですか?
Vinko Vrsalovic 2008

104

明白な答え:CSS Zen Gardenを参照してください。テーブルベースのレイアウトでも簡単に同じことができると言ったら(HTMLは変更されないことに注意してください)、レイアウトには必ずテーブルを使用してください。

他の2つの重要なことは、アクセシビリティとSEOです。

どちらも、情報が表示される順序に注意を払っています。テーブルベースのレイアウトでページの2番目のネストされたテーブルの2行目の3番目のセルにナビゲーションを配置すると、ページの上部にナビゲーションを簡単に表示できません。

したがって、あなたの答えは、保守性、アクセシビリティ、およびSEOです。

怠惰にしないでください。学習が少し難しくても、正しく適切な方法で物事を行います。


24
Zen Gardenでよく使用されるトリックは、テキストを画像で置き換え、CSSでそれを定義して、HTMLから見えないようにすることです。非常に、非常に間違っています。
GvS 2008

3
申し訳ありませんが、それは正しくありません。テキストはまだHTMLのままです-これはCSSZG設計の要件の1つです。HTMLは変更しないでください。
erlando 2008

10
一部のデザインをよく見ると、一部のヘッダーのテキストはHTMLのテキストとは異なります。これは、HTMLが非表示になり、代わりに画像が挿入されるためです。(例:csszengarden.com/ ? cssfile= / 212 / 212.css&page=0、?Path?to?Achievement?)
GvS

6
すみません、divレイアウトがSEOに適しているという証拠はまったくありません。また、Google自身も、HTML検証は重要ではないと述べています。少し異なる問題ですが、検証はめったにないため、テーブルを対象としています。
DisgruntledGoat

「あなたのほとんどはプログラマーの美徳に精通しています。もちろん、3つあります。怠惰、焦り、そして傲慢です。」-ラリーウォール
inkredibl 2010

91

この重複する質問を参照してください。

あなたがそこに忘れている1つのアイテムはアクセシビリティです。たとえば、スクリーンリーダーを使用する必要がある場合は、テーブルベースのレイアウトも翻訳されません。また、政府機関で働いている場合は、スクリーンリーダーなどのアクセス可能なブラウザのサポートが必要になる場合があります。

また、質問で述べたいくつかの影響を過小評価していると思います。たとえば、あなたがデザイナーとプログラマーの両方である場合、プレゼンテーションとコンテンツをどのように分離するかについて十分に理解していない可能性があります。しかし、これらが2つの異なる役割であるショップに入ると、利点が明らかになり始めます。

あなたが何をしているのかを知っていて、優れたツールを持っているなら、CSSは本当にレイアウト用のテーブルよりも大きな利点を持っています。そして、各アイテムはそれ自体で放棄テーブルを正当化しないかもしれませんが、まとめるとそれは一般的に価値があります。


はい...確かに。重複しているようです。見逃した。約束する以外に必要なアクションは、次回はより慎重になるでしょう:-)?
Benno Richters

心配しないで。質問の数が増えるにつれて、これはますます一般的になります。私も反対票を投じなかった。最終的にはすべてが共通のソースを参照することをできるだけ確認したいだけです。
Joel Coehoorn、2008

8
私はこの答えが本当に好きです。意味的に意味のあるタグを使用することは、単なる伝統の問題ではなく、あいまいな非ブラウザー(スクリーンリーダー、スクリーンスクレイパー、さまざまなパーサー)がページ上のさまざまなオブジェクトを正しく分類できるようにします。
ファントムワトソン

6
私は誰かがこれについて言及することを望んでいました。アクセシビリティは最優先事項です!
アンドリュー、

アクセシビリティが商業的演習において最優先事項である必要があるという考えに同意することはできません。費用便益比率は実現不可能です。それは、登山店に車椅子用の傾斜路を設置するようなものです。CBRがより優れているアイテムに適用できるとんでもないリソースの無駄です。医療施設について話している場合は、車椅子の傾斜路が優先されます。同様に、私は視覚障害者に売り込まれたサイトのWebページのアクセシビリティだけに悩まされるでしょう。
ピーターウォン

54

残念ながら、CSS Zen Gardenは、優れたHTML / CSSデザインの例として使用できなくなりました。最近のほとんどすべてのデザインでは、セクションの見出しにグラフィックを使用しています。これらのグラフィックファイルはCSSで指定されます。

そのため、コンテンツをデザインから遠ざけることの利点を示すことを目的とするWebサイトは、コンテンツをデザインに組み込むという非の打ちどころのない罪を定期的に犯しています。(HTMLファイルのセクション見出しが変更されても、表示されるセクション見出しは変更されません)。

これは、DIVとCSSの厳格な宗教を擁護している人々でさえ、独自のルールに従うことができないことを示しているだけです。あなたはそれらをどれだけ忠実にフォローするかのガイドラインとしてそれを使うかもしれません。


18
あなたは、彼らがやっている意味<h1>Some Text</h1>して、そのCSSに:h1 { background-image('foo.jpg'); text-indent:-3000px }?スタイルのないhtmlで最大のセマンティック情報を保持しているため、これは正しい方法です。それとも私はあなたを誤解しました。
Karan、

9
カレン、そうだね、ジェームズ。あなたの例はわらの男です。セマンティックHTMLを変更したときに画像を変更するのを忘れるのは愚かです。ラップトップをバスに置いたままです。あなたのポイントは何ですか?
AmbroseChapel 2009年

36
@Ambrose:friggin 'サイトの要点は、コンテンツとスタイルの分離を示すことです。コンテンツとスタイルは、別の人が適切に処理する必要があります。どちらの人も、他の人が何を変更したかを「記憶」する必要はありません。
James Curran

5
S&N氏:それは問題をさらに悪化させるでしょう。新しい画像を動的に、正しいスタイルで生成する必要があります。これで、スタイル設定がCSSからビジネスレイヤーコードに移行しました。
James Curran

9
@James:コンテンツとスタイルは、常に別の人が処理できるとは限りません。コンテンツが様式化されると、コラボレーションが発生する必要があります。どのようにし<h1><img src="something.png"></h1>てより保守可能です<h1 class="something image">Something</h1>か?どちらの例でも、something.pngを更新する必要があります。しかし、2番目の例の方がはるかにアクセスしやすくなっています。
ジョシュ

48

決してこれは決定的な議論ではありませんが、CSSを使用すると、同じマークアップを使用して、メディアに応じてレイアウトを変更できます。これは素晴らしい利点です。印刷ページの場合、たとえば、印刷用ページを作成しなくても、静かにナビゲーションを抑制できます。


良い点は、CSSを使用してテーブルベースのレイアウトでセルを非表示にすることもできますが、たとえば印刷可能なバージョンでナビゲーションを抑制できますが、CSSレイアウトを使用すると、データを非表示にするだけではるかに柔軟性が高まります。
Cory House、

私は自分のアプリケーションの1つでこれを実行しました。画面に表示されているのと同じページの印刷CSSだけを使用して、「プリンタ対応」バージョンを簡単に作成できることに気付いたとき、少年は私に嬉しかったです。
Lawrence Dol、

45

レイアウト用の1つのテーブルはそれほど悪くありません。しかし、たいていの場合、1つのテーブルだけでは必要なレイアウトを得ることができません。すぐに2つまたは3つのネストしたテーブルができます。これは非常に面倒になります。

  • 読みづらいです。それは意見次第です。識別マークのないタグがネストされているだけです。

  • コンテンツをプレゼンテーションから分離することは、自分がやっていることに集中できるため、良いことです。2つを混在させると、ページが肥大化して読みにくくなります。

  • スタイルのCSSを使用すると、ブラウザでファイルをキャッシュでき、後続のリクエストがはるかに高速になります。これは巨大です。

  • テーブルはあなたをデザインに固定します。もちろん、誰もがCSS Zen Gardenの柔軟性を必要としているわけではありませんが、デザインを少しずつ変更する必要がないサイトで作業したことはありません。CSSの方がはるかに簡単です。

  • テーブルのスタイルを設定するのは難しいです。それらにはあまり柔軟性がありません(つまり、テーブルのスタイルを完全に制御するには、HTML属性を追加する必要があります)。

おそらく4年間、表形式以外のデータにテーブルを使用していません。私は振り返っていません。

Andy Budd によるCSS Masteryを読むことをお勧めします。すごいね。

ecx.images-amazon.comの画像http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg


1
私はこの本を強くお勧めします
ジェイコブT.ニールセン

ボックスモデル、セレクター、配置の良い例が含まれています。
KMån

36

コンテンツをレイアウトから分離するのは良いこと
ですが、これは誤った議論です。クリシェ思考

HTMLテーブルはレイアウトであるため、これは誤りです。コンテンツはテーブル内のデータであり、プレゼンテーションはテーブル自体です。これが、CSSをHTMLから分離することが非常に困難な場合がある理由です。コンテンツをプレゼンテーションから分離するのではなく、プレゼンテーションをプレゼンテーションから分離します!ネストされたdivの山はテーブルと同じです-それは単なる異なるタグのセットです。

HTMLをCSSから分離する際のもう1つの問題は、HTMLとCSSを互いに深く理解する必要があることです。完全に分離することはできません。HTMLのタグレイアウトは、何をしてもCSSファイルと緊密に結合されます。

テーブルとdivは、アプリケーションのニーズによって決まると思います。

職場で開発するアプリケーションでは、ピースがコンテンツに合わせて動的にサイズ調整されるページレイアウトが必要でした。私はこれをCSSとDIVを使ってクロスブラウザーで動作させるために何日も費やしましたが、それは完全な悪夢でした。私たちはテーブルに切り替えましたが、すべてうまくいきました

ただし、私たちの製品は非常に閉鎖的であり(Webインターフェイスを備えたハードウェアを販売しています)、アクセシビリティの問題は問題ではありません。スクリーンリーダーがテーブルをうまく処理できない理由はわかりませんが、それが開発者がそれを処理する必要がある方法だと思います。


6
スクリーンリーダーはテーブルを処理します。問題は、テーブルがスクリーンリーダーを処理しない方法です。テーブルベースのレイアウトでは、情報にアクセスできない方法で表示される傾向があります。右側のナビゲーションがどのようになるか考えてください。ページのかなり下にあるでしょう。
erlando 2008

OK、それは理にかなっている-ありがとう!

8
<table>または<div>がほとんどのスクリーンエージェントにデフォルトのプレゼンテーションを持っているからといって、それらをセマンティックエレメントの代わりにプレゼンテーションエレメントと見なしません。
Mark Brackett

1
具体的にはHTMLのことではなく、基本的なUIデザインの概念的なことです。テーブルは、画面上での配置方法、つまりユーザーへの表示方法を示します。それがプレゼンテーションです。

1
「私はこれを機能させるために何日も費やしました」-私が理解しようとしている何かがこれまでに数時間以上かかる場合、それをStackOverflowコミュニティに送りました。何かを正しく行う方法を知らないことは、それを正しく行わないことの言い訳にはなりません。特に私たちがすべての答えを指先で持っているとき。
DaveDev 2010

23

CSS / DIV-それは単なるデザインの男の子の仕事ですよね。DIV / CSSの問題のデバッグに費やした何百時間も、インターネットを検索して、不明瞭なブラウザーでマークアップの一部を機能させる-これは私を怒らせます。1つの小さな変更を加えると、レイアウト全体が恐ろしく間違ってしまいます。時間を費やして何かをこのように3ピクセル移動し、次に何かを2ピクセル移動して、すべてを整列させます。これはどういうわけか私には明らかに間違っているようです。あなたが純粋主義者であり、何かが「正しいことではない」という理由だけで、それをn番目の程度まで使用する必要があるという意味ではなく、すべての状況で、特にそれがあなたの人生を1000倍容易にする場合。

したがって、私は最終的に決定しました。純粋に商業的な理由で、私は最小限にとどめていますが、DIVを正しく配置するために20時間の作業が予想される場合は、テーブルを使います。それは間違っている、それは純粋主義者を動揺させるが、ほとんどの場合、それはより少ない時間を要し、管理するのにより安くなる。その後、純粋主義者を喜ばせるのではなく、顧客が望むようにアプリケーションを機能させることに集中できます。結局、彼らは請求書を支払い、CSS / DIVの使用を強制するマネージャーへの私の議論-私は顧客が彼の給料も支払うことを指摘するだけです!

これらすべてのCSS / DIV引数が発生する唯一の理由は、そもそもCSSの欠点と、ブラウザーが相互に互換性がないためであり、互換性がある場合、世界中のWebデザイナーの半分が仕事を失います。

ウィンドウフォームをデザインするときは、レイアウトした後でコントロールを動かさないでください。そのため、Webフォームでこれを実行する理由は不思議です。私はこの論理を理解できません。レイアウトを正しく開始して、何が問題なのかを確認してください。それは、デザイナーが創造性をいじるのが好きで、アプリケーション開発者が実際にアプリケーションを機能させる、ビジネスオブジェクトを作成する、ビジネスルールを実装する、顧客データのビットが相互にどのように関連しているかを確認することにもっと関心があるためだと思います。要件-あなたは知っている-現実世界のもののように。

誤解しないでください。どちらの引数も有効ですが、フォームを設計するためのより簡単でより論理的なアプローチを選択したと開発者を批判しないでください。多くの場合、divでテーブルを使用する正しいセマンティクスよりも、気にする必要のある重要な事項があります。

適例-この議論に基づいて、私はいくつかの既存のtdsとtrsをdivに変換しました。45分間いじりながら、すべてを隣り合わせに並べようとしていたので、私はあきらめました。10秒後にTDが戻る-機能-すぐに-すべてのブラウザーで、何もする必要はありません。私が理解できるようにしてください-他の方法で私にそれをやりたいと思う理由は何ですか?


この投稿にはこれ以上同意できません。私が設計に携わってから10年の間に、「サイト全体の変更を管理しやすくするためにCSSを使用する」という議論が正確であったとは思えません。
ダニエル・サボー2010年

6
サイト全体の変更を管理しやすくするものを知っていますか?MVCおよびテンプレートシステム
Jiaaro 2010年

誤解しないでください。CSSを使用していますが、レイアウトではなくスタイル(色、背景画像など)を適用するために使用しています。CSSは、スタイルのみを制御するために使用される場合、ブラウザー間でほぼ一貫しているようです。欠陥があり、大きく落ちるのは、レイアウトがブラウザ間で指定および実装される方法です。ASP.NET MasterPagesがDIVで確実に機能するように試みたことがありますか?そのほとんど不可能です!
Tim Black

21

レイアウトは簡単です。CSSでヘッダーとフッターを使用して動的な3列のレイアウトを実現する方法について記事が書かれているという事実は、それが貧弱なレイアウトシステムであることを示しています。もちろん、それを機能させることはできますが、その方法については文字通り何百ものオンライン記事があります。それが明らかに明白であるので、テーブルのある同じようなレイアウトのためのそのような記事はほとんどありません。テーブルに対して何を言っても、CSSを支持して、この1つの事実によってすべてが取り消されます。CSSの基本的な3列のレイアウトは、しばしば「聖杯」と呼ばれます。

それでも「WTF」と言えない場合は、実際にクールエイドを置く必要があります。

CSSが大好きです。素晴らしいスタイルオプションといくつかのクールな配置ツールを提供しますが、レイアウトエンジンとしては不十分です。ある種の動的グリッド配置システムが必要です。最初にサイズを知らなくても、複数の軸でボックスを整列する簡単な方法。<table>や<gridlayout>などと呼んでもかまいませんが、これはCSSにはない基本的なレイアウト機能です。

より大きな問題は、不足している機能があることを認めないことにより、CSSの熱狂者がCSSをあらゆる可能性から遠ざけていることです。CSSが基本的に世界中の他のすべてのレイアウトエンジンのようにまともな多軸グリッド配置を提供した場合、私はテーブルの使用を完全に停止します。(この問題は、W3Cを除くすべての人がすでに多くの言語で何度も解決していることにお気づきでしょうか?そのような機能が役に立ったことを他の誰も否定していません。)

はぁ。十分な通気。さあ、頭を砂に戻します。


「CSS狂信者」(あなたが言うとおり)はこの事実を知らないわけではありません。次のCSS仕様では、CSSのレイアウトに関する問題を解決するためのソリューションが1つだけではなく2つあります。テンプレートのレイアウト:w3.org/TR/css3-layoutおよびグリッドの配置:w3.org/TR/css3-gridこれは、競合する仕様を紹介していません。2つの仕様は実際には互いに補完し合っています。ただし、このコメントを書いている時点では、まだそれを実装しているブラウザーはありません。
ダンハーバート

+1:私は完全に同意します。「動作させる」必要はありません(ただし、テーブルも好きではありません)。
3lectrologos

これはまさに私の感じの100%です。私があなたに最高の答えに賛成できればいいのですが。
bobwienholt

19

508準拠(視覚障害者用のスクリーンリーダーの場合)によると、テーブルはデータを保持するためにのみ使用し、レイアウトには使用しないでください。スクリーンリーダーが異常動作するためです。またはそう言われました。

各divに名前を割り当てると、CSSを使用してそれらをまとめてスキンすることができます。彼らはあなたがそれらを必要とする方法で座るために取得するために少しだけ痛みです。


18

ここに最近のプロジェクトからのhtmlのセクションがあります:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

そして、これはテーブルベースのレイアウトと同じコードです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

そのテーブルベースのレイアウトで私が目にする唯一の清潔さは、インデントに熱心すぎるという事実です。コンテンツセクションには、さらに2つの埋め込みテーブルがあると思います。

もう1つ考える必要があるのは、ファイルサイズです。テーブルベースのレイアウトは、通常、対応するCSSの2倍のサイズであることがわかりました。私たちの高速ブロードバンドでは大きな問題ではありませんが、ダイヤルアップモデムを使用しているブロードバンドではそうです。


3
大きなファイルが害を及ぼすのは速度だけではありません。多くの企業が帯域幅の代金を支払います。適切にコーディングするだけでクライアントの帯域幅の請求額を半分に削減できれば、それは大きな利点です。
氏氏Shiny and New安宇

2
そうですが、CSSなしのレイアウトではHTMLが2倍になる可能性がありますが、DIV + CSSレイアウトを使用すると、CSSファイルのHTTPリクエストが(少なくとも)追加され、さらにファイル自体。
goldenratio 2009年

12
ただし、CSSファイルは1回だけダウンロードする必要があります。この場合、テーブル構造全体が各ページ要求で再送信されます。
user151841 2009

3
div + cssに適したデザインを選択して、テーブルベースのデザインのほうが冗長であることを示しましたか?つまり、テーブルベースのレイアウトに適したデザインを作成し、CSSでそれを複製するためにジャンプする必要があるフープを表示するのも同じくらい簡単です。
ドラえもん2010年

4
@Draemon:多分あなたは例を挙げたいですか?
ボビージャック

14

divベースのレイアウトは、管理、進化、およびリファクタリングが容易であることを付け加えたいと思います。要素を並べ替えるためのCSSのいくつかの変更とそれが行われます。私の経験から、テーブルを使用するレイアウトを再設計することは悪夢です(ネストされたテーブルがある場合はさらに)。

あなたのコードは、意味論的な観点からも意味があります。


私の夢は、CSS、DIV、TABLEを気にすることなく、提供したオブジェクト/データをページに配置するグラフィックデザイナーを
作ること

私はそのManricoを2番目に紹介します-レイアウトを構築し、固定およびパーセンテージの寸法を定義して、最小限のHTMLおよびCSSを生成できるビジュアルデザイナーは、非常に便利です。
Richard Ev

セマンティックWebの概念で私が抱えている問題は、HTML 4では語彙が非常に制限されており、主に技術文書用に設計されていることです。商業/マーケティングの目標を持つ多くのサイトには、この語彙にきちんと適合しない要素がある場合があります。HTML 5では、nav、header、footerなどのタグを使用してこの問題の一部を修正していますが、今のところ、コンテンツの解釈方法についてはほとんど何も言われていないspanなどのタグを使用しています。
Nick Van Brunt、

13

DIVの議論は私に有利ではありません。

私は言うだろう:靴が合うなら、それを履いてください。

2列または3列でコンテンツをレンダリングするための優れたDIV + CSSメソッドを見つけるのは不可能ではないにしても難しいことは注目に値します。

これは、ほとんどのレイアウトでバランスを少しテーブルに向けますが、私はそれらを使用することに罪悪感を感じていますが(おかしい理由、人々はそれが悪いと言うので私はそれらを聴こうとします)、結局のところ、実用的な見方はそれだけですTABLEを使用する方が簡単で高速です。私は時間単位で支払われていないので、テーブルは私にとって安いです。


1
すべてのブラウザーで機能するdivs + cssを使用して2列または3列のWebサイトを作成する場合は、最初から始めないでください。あなたがベースとして使用できるウェブから利用可能な多くのベアボーンテンプレートがあります。これらは通常、すべてのブラウザで正しく表示されるように最適化されていますie6 +
arturh

13

CSSレイアウトは、コンテンツが自然な順序であり、スタイルシートがなくても理にかなっている場合、一般的にアクセシビリティに優れています。また、テーブルベースのレイアウトに苦労しているのはスクリーンリーダーだけではありません。モバイルブラウザーがページを適切にレンダリングするのが非常に難しくなります。

また、divベースのレイアウトを使用すると、ヘッダー、フッター、ナビゲーションを印刷ページから除外するなど、印刷スタイルシートを使用して非常に簡単にクールなことができます-これを行うことは不可能であるか、少なくともはるかに難しいと思いますテーブルベースのレイアウト。

レイアウトからのコンテンツの分離が、テーブルよりもdivの方が簡単であると思われる場合は、CSS Zen Gardenの divベースのHTMLをご覧ください。かどうか疑問がある場合は、見て、スタイルシートを変更するとレイアウトが大幅に変更される方法を確認し、できるかどうかを検討してください。 HTMLがテーブルベースの場合と同じ種類のレイアウトを実現します...テーブルベースのレイアウトを行っている場合、CSSを使用してセル内のすべての間隔とパディングを制御することはほとんどありません(そうであれば、そもそも、フロートdivなどを使用するほうが簡単だと思うはずです)。CSSを使用してこれらすべてを制御することなく、またテーブルはHTMLで左から右、上から下の順序で指定するため、テーブルはレイアウトがHTMLで非常に固定されることを意味する傾向があります。

現実的には、divを変更せずにdivおよびCSSベースのデザインのレイアウトを完全に変更することは非常に難しいと思います。ただし、divおよびCSSベースのレイアウトを使用すると、さまざまなブロック間の間隔や相対的なサイズなどの調整がはるかに簡単になります。


13

これが激しく議論されている質問であるという事実は、W3Cが試みられるレイアウト設計の多様性を予測できないことの証拠です。意味的にわかりやすいレイアウトにdivs + cssを使用することは素晴らしいコンセプトですが、実装の詳細に欠陥があるため、実際にはクリエイティブな自由が制限されます。

私の会社のサイトの1つをテーブルからdivに切り替えようとしたところ、頭痛の種だったので、注いだ時間をすっかり捨ててテーブルに戻りました。垂直方向の配置を制御するためにdivと格闘しようとすることは、この議論が激化している限り私が揺さぶることのない大きな心理的問題で私を呪いました。

人々が単純な設計目標(垂直配置など)を達成するために複雑で見苦しい回避策を頻繁に考えなければならないという事実は、ルールが十分に柔軟でないことを強く示唆しています。仕様が十分である場合、(SOなどの)注目度の高いサイトが、テーブルやその他の回避策を使用してルールを曲げる必要があると考えるのはなぜですか?


12

レイアウトにtable要素を使用しても、表形式のデータとはほとんど関係がないのは事実です。だから何?上司は気にしますか?ユーザーは気にしますか?

Googleや他の自動化システム気を配り、それらは多くの状況で同様に重要です。セマンティックコードは、インテリジェントではないシステムで解析および処理する方が簡単です。


ええ、例えばブログの場合、エンジンはコメントをブログ投稿から分離します。想像してレイアウトが...テーブルでスタイリングされた
オマールABID

2
-1:レイアウトにテーブルを使用する場合、Googleはまったく気にしません。
トムアンダーソン

@Tom Andersonレイアウト用のテーブルの使用に問題があるからではなく、単にテーブル以外のHTMLの方がセマンティックになる傾向があるからです。
ceejayoz

8

いくつかのアプリケーションによって生成された6層のネストされたテーブルを含むWebサイトで作業する必要があり、無効なHTMLを生成する必要があったため、マイナーな変更のためにそれを修正するのは実際には3時間の仕事でした。

これはもちろんエッジケースですが、テーブルベースのデザインは維持できません。CSSを使用する場合は、スタイルを分離するので、HTMLを修正するときに、破損の心配が少なくなります。

また、JavaScriptでこれを試してください。1つのテーブルセルを別のテーブルのある場所から別の場所に移動します。div / spanがコピー&ペーストのように機能する場合の実行はかなり複雑です。

「上司は気にかけてる」

私があなたの上司だったら。あなたは気になります。;)あなたの人生を大切にするなら。



Divを使用しても、コードが魔法のように優れているとは限りません。タグの適切な意味論的使用については、多くのことが言われています。
ケントフレドリック2010

7

レイアウトの柔軟性
多数のサムネイルを含むページを作成しているとします。
DIV
各サムネイルを左にフロートしたDIVに入れると、おそらく10個が1行に収まります。ウィンドウを狭くして、BAM-それは一列に6つ、または2つ、またはいくらでも収まります。
表:
行内のセルの数を明示的に指定する必要があります。ウィンドウが狭すぎる場合、ユーザーは水平方向にスクロールする必要があります。

保守性
上記と同じ状況です。ここで、3行目に3つのサムネイルを追加します。
DIV:
それらを追加します。レイアウトは自動的に調整されます。
表: 新しいセルを3行目に貼り付けます。おっとっと!現在、アイテムが多すぎます。その行からいくつかを切り取り、4行目に配置します。現在、アイテムが多すぎます。その行からいくつかをカットします...(など)
もちろん、サーバー側スクリプトで行とセルを生成している場合、これはおそらく問題にはなりません。


7

ボートが出航したと思います。業界の方向性を見ると、CSSとオープンスタンダードがその議論の勝者であることがわかります。これは、フォームを除いて、ほとんどのHTML作業にとって、テーブルではなくdivを使用することを意味します。私はCSSの第一人者ではないので、それは難しいです。


5

また、モバイルブラウザではテーブルが適切にレンダリングされないことも忘れないでください。確かに、iPhoneには魅力的なブラウザがありますが、誰もがiPhoneを持っているわけではありません。テーブルレンダリングは、最新のブラウザーではピーナッツのように見えますが、モバイルブラウザーではスイカの束です。

私は個人的に多くの人々があまりにも多くの<div>タグを使用していることを発見しましたが、適度に、それは非常にきれいで読みやすいかもしれません。あなたは人々がテーブルよりもCSSを読むのに苦労していると述べました。おそらく真実である「コード」の観点から。しかし、コンテンツの読み取り(ビュー>ソース)に関しては、テーブルよりもスタイルシートの方が構造を理解するのがはるかに簡単です。


そこに良い点があります。ただし、IMHOのモバイルデバイスのUIは、入力制限を考慮して完全に異なる必要があります。
Manrico Corazzi 2008

真; だから私は時々別のアプローチを使い始めました。MVCモデルでは、ビューをポップアウトして、XML生データ、つまりコンテンツのみを表示します。次に、xml raw data = modelである別のMVCモデルから始めます。ビュー= html / css; コントローラ= xsl。XSLスタイルシートは、モバイルの不要なデータを削除します。
スワティ

5

あなたはテーブルに慣れているように見え、それだけです。レイアウトをテーブルに配置すると、そのレイアウトのみに制限されます。CSSを使用すると、ビットを移動したり、http: //csszengarden.com/を確認したりできます。通常、レイアウトにはネストされたdivの多くは必要ありません。

レイアウト用のテーブルがなく、適切なセマンティクスを使用することで、HTMLははるかに簡潔になり、読みやすくなります。CSSを理解できない人がCSSを読もうとするのはなぜですか?そして、誰かが自分をウェブ開発者だと思っているなら、CSSをよく理解することが不可欠です。

SEOのメリットは、最も重要なコンテンツをページの上位に配置し、コンテンツとマークアップの比率を向上させることです。

http://www.hotdesign.com/seybold/


5
  • 508コンプライアンス-スクリーンリーダーがマークアップを理解する機能。
  • レンダリングを待機しています- </table>要素の最後に到達するまで、テーブルはブラウザでレンダリングされません。

私は何年も前に、遅いコンピュータの時代に巨大なテーブルを作成したことを覚えています。IE6?IE4?思い出せませんが、確かに変わりました。もちろん、これは表形式のデータには役立ちますが、レイアウトテーブルは実際の1インチ以内にスタイル設定されるため、プログレッシブレンダリングは、新しくロードされたコンテンツに対応するためにジャンプするため、あまり役に立ちません。
ijw 2010年

5

セマンティックマークアップに関するアイデアの全体は、レイアウトを含むマークアップとプレゼンテーションの分離です。

Divはテーブルを置き換えるものではなく、コンテンツを関連コンテンツのブロックに分割する独自の用途があります(、)。スキルがなく、テーブルに依存している場合、目的のレイアウトを取得するためにコンテンツをセルに分割する必要があることがよくありますが、セマンティックマークアップを使用している場合は、マークアップに触れてプレゼンテーションを行う必要はありません。これは、静的ページではなくマークアップが生成されている場合に非常に重要です。

開発者は、レイアウトを意味するマークアップの提供を停止する必要があります。これにより、コンテンツを提示するスキルを持っている私たちの仕事を引き継ぐことができ、プレゼンテーションが変更されたときに、開発者がコードに戻って変更を加える必要がなくなります。


4

これは、「divがレイアウトよりテーブルよりも優れている」かどうかということではありません。CSSを理解している人なら、「レイアウトテーブル」を使用してデザインを簡単に複製できます。本当のメリットは、HTML要素を使用することです。非表形式のデータにテーブルを使用しない理由は、整数を文字列として保存しないのと同じ理由です。テクノロジーは、目的の目的に使用するとはるかに簡単に機能します。レイアウトにテーブルを使用する必要があった場合(1990年代初頭のブラウザの短所のため)、現在はそうではありません。


3

テーブルレイアウトを使用するツールは、レイアウトの作成に必要なコードの量が原因で、非常に重くなる可能性があります。SAPのNetweaverポータルは、デフォルトでTABLEを使用してページをレイアウトします。

私の現在のギグでの本番SAPポータルには、ホームページがあり、そのHTMLは60Kを超え、ページ内で3回、7つのテーブルに移動します。JavaScriptを追加します。16個のiframeの誤用、テーブル内に同様の問題があり、CSSが非常に重いなど、ページのサイズが5MBを超えています。

時間をかけてページの重みを下げて、帯域幅を使用してユーザーとの魅力的なアクティビティを実行できるようにすると、努力する価値があります。


3

ページレイアウトのサイドバーの前に中央のコンテンツ列がロードおよびレンダリングされるように、CSSとdivを理解する価値があります。ただし、フローティングdivを使用してロゴをスポンサーテキストに垂直に配置するのに苦労している場合は、表を使用して実際に進んでください。禅の庭の宗教は、お金に大きな影響を与えません。

コンテンツをプレゼンテーションから分離するアイデアは、アプリケーションを分割して、さまざまな種類の作業がさまざまなコードブロックに影響を与えることです。これは実際には変更管理に関するものです。しかし、コーディング標準は、コードの現在の状態を表面的な方法でしか検査できません。

「プレゼンテーションからコンテンツを分離する」ためにコーディング標準に依存するアプリケーションの変更ログは、垂直方向のサイロ全体で並行して変化するパターンを示します。「コンテンツ」への変更が常に「プレゼンテーション」への変更を伴う場合、パーティショニングはどの程度成功しますか?

コードを生産的に分割したい場合は、Subversionを使用して変更ログを確認してください。次に、最も単純なコーディング手法(div、テーブル、JavaScript、インクルード、関数、オブジェクト、継続など)を使用して、アプリケーションを構造化し、変更がシンプルで快適な方法で収まるようにします。


最初の2つの文の+1。
ショーンマクミラン

3

テーブルを使用するサイトを維持するのは大変であり、コーディングに長い時間がかかるからです。フローティングdivが怖い場合は、divでコースを受講してください。それらは理解するのが難しくなく、おおよそ100倍効率が良く、お尻の痛みが100万倍少なくなります(あなたがそれらを理解していない場合を除きますが、ちょっと、コンピューターの世界へようこそ)。

テーブルでレイアウトを行うことを検討している人は、私がそれを維持することを期待しない方が良いでしょう。これは、ウェブサイトをレンダリングするための最もお尻の方法です。私たちは今より良い代替手段を持っている神に感謝します。二度と戻らない。

最新のツールを使用してサイトを作成することによる時間とエネルギーのメリットを知らない人がいるのは恐ろしいことです。


3

一般に、テーブルはCSSよりも簡単ではなく保守も容易ではありません。ただし、テーブルが実際に最も単純で最も柔軟なソリューションであるという特定のレイアウト問題がいくつかあります。

CSSは、プレゼンテーションマークアップとCSSが同じ種類のデザインをサポートする場合には明らかに望ましいfontですが、CSSはfont-tags と同じ機能を提供するため、CSSでタイポグラフィを指定するよりも-tagsの方が優れていると主張する人はいないでしょう。はるかにクリーンな方法。

ただし、テーブルの問題は基本的に、CSSのテーブルレイアウトモデルがMicrosoft Internet Explorerでサポートされていないことです。したがって、テーブルとCSSは同等の能力を備えていません。欠けている部分は、表のグリッドのような動作で、セルの端は垂直方向と水平方向の両方に揃っていますが、セルはまだ拡張されて内容を含んでいます。この動作は、一部の寸法をハードコーディングせずに純粋なCSSで簡単に実現することはできません。そのため、デザインが堅固で壊れやすくなります(Internet Explorerをサポートする必要がある限り-他のブラウザでは、これを使用して簡単に実現できますdisplay:table-cell)。

したがって、テーブルとCSSのどちらが望ましいかという問題ではありませんが、テーブルを使用するとレイアウトがより柔軟になる特定のケースを認識することが重要になります。

テーブルを使用しない最も重要な理由は、アクセシビリティです。Webコンテンツアクセシビリティガイドラインhttp://www.w3.org/TR/WCAG10/は、レイアウトにテーブルを使用することを再度アドバイスしています。アクセシビリティが心配な場合(場合によっては法的に義務付けられている場合もあります)、テーブルが単純であってもCSSを使用する必要があります。CSSでもテーブルと同じレイアウトをいつでも作成できることに注意してください。追加の作業が必要になるだけかもしれません。


3

一部の問題がまだカバーされていないことを知って驚いたので、これまでに作成した非常に有効なすべてのポイントに加えて、ここに私の2セントを示します。

.1。CSSとSEO:

a)CSSは、コンテンツをページのどこにでも配置できるようにすることで、SEOに非常に大きな影響を与えていました。数年前、検索エンジンは「ページ上の」要素に大きな重点を置いていました。ページの上部にあるものは、下部にあるものよりもページとの関連性が高いと見なされました。スパイダーの「ページのトップ」は「コードの最初」を意味します。CSSを使用すると、キーワードの豊富なコンテンツをコードの最初に整理し、ページ内の好きな場所に配置できます。これはまだいくらか関連がありますが、ページファクターはページランキングにとってますます重要ではなくなります。

b)レイアウトをCSSに移動すると、HTMLページが軽くなり、検索エンジンスパイダーの読み込みが速くなります。(スパイダーは外部のcssファイルをダウンロードする必要はありません)。ページの高速読み込みは、Googleを含むいくつかの検索エンジンにとって重要なランキングの考慮事項です

c)SEO作業では、多くの場合、テストと変更が必要になります。これは、CSSベースのレイアウトではるかに便利です

.2。生成されたコンテンツ:

テーブルは、同等のCSSレイアウトよりもプログラムで生成する方がはるかに簡単です。

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

テーブルの生成はシンプルで安全です。自己完結型であり、どのテンプレートにもうまく統合できます。CSSで同じことを行うのはかなり難しく、まったくメリットがない可能性があります。フライトでCSSスタイルシートを編集するのは難しく、スタイルをインラインで追加することは、テーブルを使用することと同じです(レイアウトからコンテンツが分離されていません)。

さらに、テーブルが生成されるとき、コンテンツ(変数内)は既にレイアウト(コード内)から分離されているため、変更も簡単です。

これが、非常によくデザインされたWebサイト(SOなど)が依然としてテーブルレイアウトを使用している理由の1つです。

もちろん、JavaScriptを使用して結果を処理する必要がある場合、divは問題に値します。

.3。クイック変換テスト

特定のオーディエンスで何が機能するかを理解する場合、さまざまな方法でレイアウトを変更して、最良の結果が得られるものを理解できると便利です。CSSベースのレイアウトは物事をかなり簡単にします

.4。さまざまな問題に対するさまざまな解決策

「誰もがdivとCSSを知っている」ための方法であるため、レイアウトテーブルは通常dissedです。

ただし、テーブルの作成が速く、理解しやすく、ほとんどのCSSレイアウトよりも堅牢であるという事実は変わりません。(はい、CSSは同じように堅牢ですが、さまざまなブラウザーと画面解像度でネットをざっと見れば、そうではないことがよくあります)

メンテナンス、柔軟性の欠如など、テーブルには多くの欠点があります...しかし、風呂の水で赤ちゃんを投げないでください。迅速で信頼性の高いソリューションには、多くの専門的な用途があります。

しばらく前に、ユーザーのかなりの部分がCSSのサポートが本当に悪い古いバージョンのIEを使用しているため、テーブルを使用してクリーンでシンプルなCSSレイアウトを書き直す必要がありました。

私は、1つには、ひどい反応 "おいおい!レイアウト用のテーブル!"にうんざりして疲れています。

「その目的のために意図されたものではないので、このように使用するべきではない」群衆に関しては、それは偽善ではありませんか?ほとんどのブラウザで気の利いたものを機能させるために使用しなければならないすべてのCSSトリックについてどう思いますか?それらはその目的のためのものでしたか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.