html - テーブルは HTML で何としてでも避けるべきですか?

Question

HTML ページでテーブルを使用することをお勧めします (CSS があるので)。

テーブルのアプリケーションは何ですか? CSS にはない表の機能/機能は何ですか?

関連する質問

score 80 · Accepted Answer

いいえ - まったくありません。ただし、表形式のデータにはテーブルを使用してください。一般的なレイアウトには使用しないでください。

ただし、結果やフォームなどの表形式のデータを表示する場合は、テーブルを使用してください。

score 71 · Accepted Answer

私はここで多数派ではないと思いますが、それでも HTML でのテーブルの使用はたくさん見られます。もちろん、はい、フォームのようなものについては、テーブルを打ち負かすことはできません. DIV を使用して、ラベルとそれに付随するフォームフィールドを整列させようとすることは確かに可能ですが、それは PITA であり、場合によってはページのサイズ変更が見苦しくなります。ここではテーブルが驚異的に機能します。

しかし、より大きな問題も考慮してください。たとえば、DIV と CSS のみを使用して、ヘッダーとフッターを含む標準的な 3 列のレイアウトを作成しようとしましたか? 繰り返しになりますが、可能性は非常に高く、例を示した約 1000 の Web サイトがありますが、それらはすべて同じ問題に悩まされる傾向があります。最初の問題は、何らかの JavaScript の支援がなければ、すべての列が同じ高さになることを決して好まないことです。2 つ目の問題は、レイアウトの変更はしばしばトリッキーなことです。なぜなら、最初からすべてを「ちょうどいい」ものにするのは少しバランスをとる行為だからです。最後に、これは最後のポイントに戻ります - 簡単ではありません。すべての DIV をレイアウトしてから、戻ってそれらの DIV を適切な位置に強制する魔法の CSS を作成する必要があります。そして、それが正しくなるまで数時間をかけて微調整します....うーん。そして、ビューアなしで HTML を見ても、最終的に CSS によってすべて再解釈されるため、ページがどのように見えるかはまったくわかりません。

次に、オプション B. テーブルを使用します。<tr> および <td> タグを入力するのに約 30 秒かかります。おそらく CSS はまったくなく、JavaScript の「fixit」も必要ありません。

確かに、テーブルには賛否両論あります。純粋主義者は、レイアウトに DIV を使用することを好むようですが、誰かがテーブルは悪だと言ったからといって、宗教的な理由で DIV を使用しないでください。あなた、あなたのページ、そして閲覧者がページを操作する方法に最適なものを使用してください。それがテーブルである場合は、それを使用します。そうでない場合は、しないでください。

score 13 · Accepted Answer

これまで誰もが、テーブルは表形式のデータにのみ使用するべきだと言っていますが、これは真実です。SO の任意のページの HTML ソースを見ると、それらが異なる考えを持っていることがわかります...

彼らの理論的根拠は、テーブルを使用する方がはるかに簡単な場合があるということだと思います。ただし、それらを避けるべき本当に優れたユーザビリティの理由がたくさんあります。

score 11 · Accepted Answer

11

于 2008-09-17T12:19:30.390 に答える

score 6 · Accepted Answer

「表のような」レイアウトを設定するのに同等の CSS だけが適切である場合は、CSS を使用したいと思います。他の人がここにリストしたこと (セルの高さが等しい、行の自動成長など) を模倣するのにかかる時間は、単に努力する価値がないことがわかりました。ほとんどの場合、テーブルをすばやくまとめるのとは対照的に、投資に対する見返りは得られません。

テーブルをどのようにレイアウトするかについては、すべてのブラウザーが正確に合意できます。バム。終わり。

これが私の CSS 愚行の通常のやり方です: CSS で表のようなレイアウトを設定してみてください。20 分以上かけて Mozilla ですべてを取得し、それを IE で開きます。これらの 2 つのブラウザー間でさらに 30 分間微調整してください。私は実際にいくつかの作業を完了する必要があるため、世界に 2 つのブラウザーしかないふりをします。

私は CSS の約束、つまり関心の分離を信じています。問題は、生産性を高める必要がある人にとって、CSS がすぐに使えるようになっていないことです。あるいは、ブラウザのレンダリングエンジンのせいかもしれません。

score 4 · Accepted Answer

CSS の利点は、デザインとレイアウトをコンテンツから切り離すことです。

<TABLE>表形式のデータがある場合は、タグを使用するのが理にかなっています。コンテンツの異なるブロックをレイアウトしたい場合は、<DIV>または<SPAN>と CSS を使用する必要があります。

score 3 · Accepted Answer

CSS2 にはテーブルに相当するものはなく、css を使用して簡単に複製することもできません。再現が難しいテーブルの特定の部分は、列の自動サイズ変更です。最初の行をページ全体で同じサイズにするのは簡単ですが、次の行を列のサイズや各セルのサイズに動的に合わせるのは難しく、実際には次のような他のスクリプト言語を使用しないと実行できません。 javascript、php など。最大幅と最小幅を使用したり、セルサイズのパーセンテージを設定したり、セル幅をハードコーディングしたりできますが、動的に成長するセルは 1 行で正常に機能します。一致しないのはその下の次の行です。

score 3 · Accepted Answer

テーブルは、表形式のデータを出力するためのものです。スプレッドシートに表示されるもの、結果の列など。

表ではなく CSS を使用するという提案は、実際には実際の表ではなかった列レイアウト用です。テーブルを完全に削除する必要があることを示唆する意図はありません。

score 3 · Accepted Answer

これらの回答をスキャンしたところ、レイアウトにテーブルが必要であり、それが HTML メールであるという実際の理由は 1 つも見つかりませんでした。

私は非常に大きな金融会社で働いており、毎月約 600 の異なる仕事を追跡しています....その多くは複数の電子メールキャンペーンです。

メールリーダーのレイアウトに css を使用することはできません。色、フォントフェイス、サイズに関連する使用可能なインライン CSS 仕様がいくつかあり、行の高さでさえかなり広く利用できますが、レイアウトには、すべての主要および最もマイナーな電子メールリーダーとしてテーブルを使用する必要があります (Outlook 97/ 03、Entourage、MSN など) は問題なく読めます。

データが含まれているかどうかに関係なく、高さ/幅が指定されていない td がある場合、テーブルの問題が発生します。そのため、「壊れた」テーブルレイアウトは通常、属性に注意を払うことで修正されます。はい... html の空白....はい、重要ではないはずの空白です。

したがって、大企業/企業で働いたり、非常に大規模なクライアントを獲得した場合は、現在のすべてのテクノロジーをドアの外に投げ出して、html テーブルハットをかぶる準備をしてください!

score 2 · Accepted Answer

それはすべて時間/労力に依存すると思います。純粋主義者は「テーブルは表形式のデータにのみ使用する」と言うかもしれませんが、私は過去にクロスブラウザーレイアウトを容易にするためにテーブルを使用しました。

私にとって、それは時間の問題です。CSS を正しく処理するために時間をかけるか、テーブルに放り込んで時間を大幅に短縮するかのどちらかです。物事がうまくいくまで、私はこのルートをたどる傾向があります。機能が整ったら、戻って CSS/HTML を磨きます。

score 2 · Accepted Answer

ここでは、テーブルアプローチを使用する必要があります。その理由は単純にコストです。十分にサポートされている CSS 中心のレイアウトへのアプローチが登場するまでは、コンテナ内のミクロではなくマクロレベルで話しているので、CSS の配置をレイアウトへの一般化されたアプローチに押し込もうとするのは非効率的です。これには、開発の小切手を書いている人の視点からアプローチする必要があります。

数年前、大手ホテルチェーンのサイトの開発と保守を請け負いました。テーブル駆動のレイアウトを採用しました。基本的なヘッダー、本文、左/右の列を持つフッター。また、グラフィック以外のボタンなどの細かい要素にも表を使用しました。チェーンの親会社は独自のサイトを維持し、レイアウトには純粋な CSS アプローチを採用しました。IE7 が登場したとき、私たちのサイトは何の変更もなく完全に機能していました。親会社のサイトはめちゃくちゃでした。全体として、彼らは合計約 1,000 時間 (ミーティング/開発/QA/ロールアウトの間) を問題の修正に費やしました。

サイトを開発するために支払われる場合、責任の一部は、将来のリスクを軽減し、将来の開発コストを最小限に抑えることです。特に、それらのコストがサイト (製品) に付加価値をもたらさない場合はなおさらです。

score 1 · Accepted Answer

これが多く出てくるのは、構造やレイアウトを作る際に CSS よりも html の表を使った方が分かりやすいからだと思います。CSS の使用はより抽象的ですが、コードを分離するのに役立ちます。

「構造」引数に対応して...定義により、データに構造を与えるhtmlテーブルを使用していないため、「表形式」として識別できます。それが CSS であろうと html であろうと、データの流れとレイアウトを制御しています。表形式であろうとなかろうと...

CSS テーブルが非常に重要である場合 (そして、私の答えがある種の炎上戦争を開始すると確信しています)、CSS を使用してレイアウトを作成するメカニズムが Visual Studio にないのはなぜですか? ああ、VS のレイアウト機能をチェックしなかったのですか。ええ、Microsoft から直接テーブルを入手できます。私は文句を言っているのではなく、それが他の世界にとって同じくらい意味があるのであれば、MS が CSS に切り替わるのを見るだろうということを指摘しているだけです。

私の意見では、あなたのプロジェクトに最も適したものを実行してください。1 ページまたは 2 ページの Web プロジェクトでは、何をするかが明らかなので、今でも html を使用しています。CSS の使用はより抽象的で、コーヒーをあまり飲んでいない朝もあります。HTML テーブルは、すぐに乱雑になる可能性があります。CSS が乱雑になるにはもう少し時間がかかりますが、そうなるでしょう。

score 1 · Accepted Answer

あなたは少し混乱するかもしれないと思います。CSS は、テーブル要素であれ 'div' であれ、HTML ドキュメントをスタイリングする方法です。

以前は、ページ全体のレイアウトを設計するために HTML でテーブルが使用されていました。複数のネストされたテーブル (通常は Dreamweaver などの WYSIWYG プログラムによって生成される) が見られることがよくあり、これはメンテナンスの悪夢につながりました。

CSS スタイルシートの導入と採用以来、表形式のデータにのみテーブルを使用することが正しいものになりました。つまり、データがテーブルとして最も自然にレンダリングされる場合は、table 要素を使用します。CSS を使用してテーブルのスタイルを設定することもできます。

ただし、この方法は既存の機能を複製するため、一般的には承認しません。要素を使用してテーブルのような構造を構築することは可能です。実際、そのようなコードを生成する Web サイトがいくつかありますが、手元にあるリンクはありません。

一部のユーザーは、テキストのみのモードで表示したり、スクリーンリーダーを使用したりする可能性があることも覚えておいてください。どちらもおそらくページを分割します (列を横ではなく縦に読むなど)。したがって、テーブルを適切に使用します。

HTH

score 1 · Accepted Answer

レイアウトにテーブルを使用する時代は終わったと信じています。簡単に言えば、テーブルはテーブルであり、他には何もありません。

今後数年間の新しい同様のフレームワークのトピックになると思うのは、新しい CSS 機能display : table、table-cell、table-rowなどをレイアウトに使用する必要があるか?? です。? :-)

score 1 · Accepted Answer

これに関する私の非常に単純で基本的な意見は、テーブルは表形式のデータのためにあるということです。あるものを別の要素の上に配置したり、別の要素の隣に配置したりするためではありません。

したがって、データのテーブルを表示する場合は、(テーブルを使用して) そうします。ページにコンテンツを配置する場合: css を使用します。

score 1 · Accepted Answer

一部のレイアウトでは、最初はテーブルを使用する方が簡単に見えるかもしれませんが、メンテナンスの時期になると css を使用する方が効果的です。何かの位置を変更したい場合や、同じレイアウトを複数の場所で使用したい場合は特にそうです。

私見、表は表を提示する場合にのみ使用する必要があります。決してレイアウト目的ではありません。

score 0 · Accepted Answer

また、テーブルを使用してページ上のアイテムを配置するというアイデアも好きではありません。しかし、これは宗教になるべきではありません-テーブルは悪いです。3列のレイアウトがあり、コンテンツとともに成長するために中央の列が必要な1つの例に遭遇しました。結局、最も単純で、必要なすべてのブラウザーでうまく機能する解決策は、テーブルを使用することでした。IMHO CSSにはまだいくつかの欠点があり、いくつかのアイデアに盲目的に固執するよりも、機能する単純なものを使用する方が良い場合があります（「テーブルは悪い...」）。

score 0 · Accepted Answer

レイアウトがやや表形式の場合は、レイアウトに使用することもできます。ブラウザウィンドウの幅に合わせて動的に調整されるテーブルとセルの機能が気に入っています。固定された幅や高さは絶対に使用しないでください。これは単に物事を台無しにするだけです。

score 0 · Accepted Answer

それは簡単です。Web ページを実際の紙の上のページと考えてください。紙に表を描く場合にのみ、Web ページで表を使用してください。

もう 1 つのヒントは、border > 0 でのみ table を使用することです。この方法では、(レイアウトではなく) テーブルが必要な場合にのみテーブルを使用します。

score 0 · Accepted Answer

ほとんどの場合、テーブルを表形式のデータのみに使用するために予約します。テーブルを使用すると、他の何よりも達成しやすい特定のレイアウトの問題があります。たとえば、垂直方向の配置と同じ高さの列です。フェンスの反対側には、複雑なデータテーブルがいくつかありましたが、テーブルが法案に適合しなかったため、フロート div を使用しました。

他のことと同様に、適切な仕事には適切なツールを使用してください。最も実用的なツールが、あなたが思っているものと異なる場合があります。とは言っても、例として挙げた例でも、レイアウトにテーブルを使用することはめったにありません。CSS を使用しなければならない問題に遭遇することは避けられないからです。あなたのマイレージは異なる場合があります。

score 0 · Accepted Answer

@toddhd、単に時間を節約するためにレイアウトにテーブルを使用することを提唱することは問題です。時間が問題になる場合は、 Blueprint CSSや960 Gridなどのフレームワークを使用して、表のないコラム形式のレイアウトをすばやく作成できます。

score 0 · Accepted Answer

テーブルは、表形式のデータを表示するために使用されます。他に追加することはあまりありません:-D

score 0 · Accepted Answer

セマンティックな方法でテーブルを使用する理由がある場合 (たとえば、表形式のデータを表示するため)、テーブルを使用します。

レイアウト作業を行うためにテーブルを使用しないでください。セマンティックマークアップを使用すると、多くの検索エンジンとアクセシビリティの利点が得られます。

score -1 · Accepted Answer

テーブルは、表形式のデータを表示しようとしている場合にのみ意味があります。それだけです。レイアウトの場合は、常に DIV を使用し、CSS の配置を調整する必要があります。

score -1 · Accepted Answer

あなたの質問は、実際には「HTML テーブルをレイアウト目的で使用するのは避けるべきですか?」というものであると仮定します。. 答えは「いいえ」です。実際、表は特にレイアウトを制御するために使用することを意図しています。表を使用してページ全体のレイアウトを制御することの欠点は、ソースファイルを手動で理解して編集することが急速に困難になることです。テーブルを使用してレイアウト全体を制御する (考えられる) 利点は、クロスブラウザーの互換性とレンダリングに関する特定の懸念がある場合です。私は HTML ソースファイルを直接操作することを好みます。CSS を使用すると、レイアウト全体にテーブルを使用するよりも簡単に作業できます。

score -4 · Accepted Answer

テーブルを使用する必要がある場合、レイアウトはおそらく最悪です。表を使用する適切に設計されたサイトを 1 つ示してください。

多くの人が「純粋主義者」という言葉を投げかけています。これはゴミです。新聞のコピーを本に印刷しますか? Excelでパンフレットをデザインしませんか？いいえ？では、なぜテーブルを使用して非表形式のデータを表示するのでしょうか?

ほとんどの場合、人々がレイアウトのためにテーブルを手放す際に直面する問題は、HTML/CSS/グッドデザイン原則を知らないことが原因です。複数列のレイアウトを垂直方向に均等に拡張するのは難しいと思うかもしれませんが、別の方法を試してみることをお勧めします。DIV は TABLE ではありません。幅の広い枠線やページの背景などを使用して偽のコラムを作成することができます。自分がやろうとしていることを実際に行うことを学ぶことに時間を費やしてください。( http://www.alistapart.comから始めるのがよいでしょう)

この質問が 2008 年に持ち上がっていることに正直驚いています。DIV は私が高校生のときに登場しました。初心者であることをやめなさい。

また、前述のように、テーブルはモバイルデバイスやスクリーンリーダーではうまく機能しません。

html - テーブルは HTML で何としてでも避けるべきですか?

関連する質問

27 に答える 27

Related

Reference