ページマークアップで非常に多くのHTMLテーブルが使用されるのはなぜですか?


8

私はウェブ開発に乗り込もうとしているので、HTML、CSS、JavaScriptの学習を始めました。私はJavaScriptで本当にうまくやっていますが、私の命を救うためにHTMLとCSSで何かを作ることはまだできません。改善するためのいくつかの場所やヒントを尋ねるつもりでしたが、質問が何度も尋ねられ、削除されるだけであることを知っているので、他の人のWebサイトのソースを表示するだけだと思いました。

私が見続けるのは、左と右のテーブルです。テーブルを使用する正当な理由はありますか?



良い理由の1つは、あなたが本当にうんざりしているチームにいるのに、誰もがあなたよりも政治的権力があり、1998年に好まれるレイアウトスキームを好む理由を説明する新しいアイデアに誰もが偏執していることです。
Erik Reppen 2013年

回答:


16

表形式のデータをレイアウトするため。

ここでは、テーブルとcssコンテナーのどちらを選択するを自問するためのいくつかの質問を示します。

表は表形式のデータ用です。限目。

<table>タグはありません悪。一部の人々が考えたり言ったりしても、CSSの目的はそれを決して使用しないことではありません。ただし、セマンティックHTMLの原則の帰結として、レイアウトにはテーブルを使用しないでください。ここでも、強調のために、独自の段落として、

レイアウトにテーブルを使用しないでください。ずっと。

テーブルが正しい選択であるかどうかを判断できない場合は、次の質問を自問してください。

  • 「情報の行または列は共通の属性を共有していますか?」
  • 「行または列の順序を変更しても、それでも意味がありますか?」
  • 「テーブルの軸を転置した場合(行を列に、その逆の場合)、それでも意味がありますか?」

上記に対する答えが一般的に「Hrm ...私はそうではない」である場合、テーブルを使用するべきではありません。

さらに説得力が必要な場合は、「セマンティックHTML + CSSと比較してテーブルが悪い(レイアウトの場合)理由」を参照してください。


2
@WeekendWarrior:確かに同意しない。NFLゲームの統計情報など、CSSソリューションをハッキングnしてn行グリッドごとに表形式の列を表示するのはなぜですか?それはまさにテーブルが使用されるべき場所です。おそらく、CSSグリッドレイアウトが(少なくとも各リリースのいくつかのリリースでクロスブラウザがサポートされるようになれば)いつかそれを置き換えるでしょうが、まだありません。
Demian Brecht

@Demian「レイアウト用のテーブル」と彼は言った。彼が表形式のデータを含めるつもりはなかったと私は確信しています。
Rein Henrichs、2011

テーブルは、並列翻訳オペラlibrettoに適していますか?[1行に1つのテーブル行を使用] このようなことは正確には「表形式のデータ」ではありませんが、テーブルを使用すると、テキストが十分に拡大されて一部の行が折り返された場合でも、元の言語の行と翻訳の関連付けが維持されます。
スーパーキャット2014

9

表形式のデータだけでなく、ページレイアウトとして使用されるテーブルを意味すると仮定します...

CSSを使用するのがいらいらしているため、表が表示されています(確かに、数年前よりも明らかに少なくなっています)。ある時点で、仕事を終わらせなければなりません。CSSを使用してそれを「正しく」行うには、無限の手間と実験が必要です。一方、テーブルは直感的に把握できます。

(CSSを使用して)正しく実行し、CSSでの生活を無駄にしたくない場合は、いくつかの異なるレイアウトで解決し、テンプレートWebサイトから一部のCSSを削除することが最善の妥協策です。テンプレートを出発点として使用します。CSSをゼロから始めることは、フラストレーションのレシピです。


4
「仕事を終わらせる」ための+1。私はUIデザイナーではなく、開発者です。私は確かに機能的でやや魅力的なUIを設計できますが、UIデザイナーよりもはるかに長くかかります。テンプレートとスタイルをデザインしたばかりのチームの人に何をあげればいいのか心配する必要はありません。
AJC 2011

1
CSS もっとシンプルだったかもしれないと思いざるを得ません。この不必要な複雑さと「ピクセルパーフェクト」なリファレンス実装の欠如により、ブラウザーベンダーによる実装が不十分/一貫性を欠き、全世代のWeb開発者が「理解できない」ことになりました。
アンジェロ

1
以前は、テーブルが唯一の方法であったボックスモデルの「解釈」がありました。たとえば、FORM要素はスタイル設定できませんでしたが、IEで(デフォルトのマージン/パディング付きの)ボックスを生成しました。余分なスペースを取り除く唯一の方法は、TABLEとTRの間でFORMを絞ることでした。完全に標準に反していますが、機能する唯一の方法でした。
SF。

@Angelo:問題は、CSSが「イライラする」ことだけではありませんでした。歴史的には、テーブルを使って簡単にできる多くのことを行うことができませんでした。main-text-plus-sidebarレイアウトのようなシンプルなもの。サイドバーは利用可能な幅の10%ですが、少なくとも140px幅(特定のロゴグラフィックの幅)は、テーブル[IIRC、setテーブルの幅を100%に、メイン列の幅を指定せずに、サイドバー列の幅を10%に設定します。140pxグラフィックに対応する必要がある場合、列の幅は10%を超えます])。CSSが最初にそれを実行できるのはいつですか?
スーパーキャット2014

8

テーブルベースのレイアウトは、HTMLの学習を始めたばかりの人にとって、純粋なCSSレイアウトよりも簡単に学習できます。また、昔は、CSSを確実に使用できず、すべてのブラウザーで動作させることができませんでした。したがって、2000年までのほぼすべてのHTMLチュートリアルでは、レイアウト専用のテーブルを使用していました。そのHTMLコードの多くは(ソースの表示を介して)他のサイトに渡され、多くの人々がそれらのチュートリアルから学び、CSSレイアウトの学習に煩わされませんでした。

CSSを学ぶ前に、テーブルでレイアウトを始めれば大丈夫だと言います。初心者レベルの違いはせいぜいわずかです。1年か2年の経験がなければ、どちらでも非常に複雑なレイアウトを作成することはできません。そのため、それほど大きな違いはありません。画面から何かを得て、関心を維持するために表から始め、ゆっくりとCSSを読み続けます(これは長期的には明らかに優れています)。「Designing with Web Standards」の日にCSS-Zealotに戻ったことがありますが、それは、独り言で優れていることが楽しかったからです。


6
私はあなたを怒らせませんが、同意しません。テーブルを使ったレイアウトの学習は必ずしも簡単ではありません(私にとってはそうではありませんでした)。さらに重要なことに、「テーブルの方法」からCSSの方法への移行は、最初から正しく学習することよりも困難です。
MattBelanger、2011

1

ブラウザが問題です。何がベストプラクティスであり、誰もが同意したことにもかかわらず、間違ってコーディングされていたとしても、テーブルのないブラウザーでWebサイトを一貫して見栄えよくすることは非常に困難でした。それは意味論と関係があります。これは、HTMLで学ぶ最も重要なことであり、タグの意味の意味です。学ぶのに最適な場所は、Educator.comがHTMLビデオについて持っている最初の5つほどのビデオです。これらはすべてHTML5を念頭に置いて行われ、セマンティクスとは何か、なぜ重要なのかを説明しています。


私が言及するのを忘れていた、ブラウザが追いついてきた。誰もIE6を使用しなくなったため、テーブルはその価値よりも面倒なものになり、正しい方法で実行することが実際に簡単になりました。したがって、「表形式のデータ」で作業しているのでない限り、テーブルは忘れてください。「表形式のデータ」の意味がわからない場合は、先ほど紹介したビデオをご覧ください。
フィリップジェームズ

残念ながら、企業やヘルスケアの世界では、まだIE6を使用している驚くほど多くの人がいます
CdMnky

「HTMLで学ぶ最も重要なこと」は、ちょっと主観的です。私はWebアプリケーション開発の世界にいるので、HTMLセマンティクスは実際にはほとんどの場合、私にとってはまったく無意味です。SEO機能を必要とするサイトを構築している場合はそうではありません。
Graham
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.