HTML ではテーブルを何としても避けるべきでしょうか?

https://stackoverflow.com/questions/82391

01-07-2019
|

質問

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

テーブルの用途は何ですか?CSS にはないテーブルの機能/能力は何ですか?

関連する質問

解決

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

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

他のヒント

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

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

さて、選択肢B。テーブルを使用してください。30 秒ほどかけて <tr> タグと <td> タグを入力します。おそらく CSS や JavaScript 'fixit' はまったく使用せず、HTML を見るだけでどのようになるか正確にわかります。

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

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

彼らの論理的根拠は次のとおりだと思います時々テーブルを使用する方がはるかに簡単です。ただし、ユーザビリティ上、これらを避けるべき理由がたくさんあります。

用以外表形式のデータ, 、残念ながら、テーブルを作成したい場合は依然として必要です。 フレキシブル 複雑なフォームなどのグリッドレイアウトを、ブラウザー間で互換性のある方法で実現します。

CSS2 は、 table 要素経由表示プロパティ, 、しかしこれは IE6 または IE7 ではサポートされていません.

ただし、ほとんどの基本的なフォームレイアウトでは CSS で十分です。

CSS に相当するものが「テーブルのような」レイアウトを設定するのに便利であれば、私はぜひ CSS を使用したいと思います。他の人がここに挙げているもの（セルの高さを均等にする、行の自動成長など）を模倣するのにかかる時間は、労力に値しないと思います。ほとんどの場合、すぐにテーブルをまとめるのとは対照的に、投資に対する利益は得られません。

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

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

私は CSS の約束を信じています。関心事の分離。問題は、生産性を高める必要がある人にとって、CSS がゴールデンタイムに対応できる状態になっていないことです。あるいはブラウザのレンダリングエンジンが原因かもしれません。

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

表形式のデータがある場合は、 <TABLE> 鬼ごっこ。コンテンツのさまざまなブロックをレイアウトしたい場合は、次を使用する必要があります <DIV> または <SPAN> そしてCSS。

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

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

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

これらの回答に目を通したところ、レイアウトに表が必要である現実的な理由、つまり HTML メールが見つかりませんでした。

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

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

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

したがって、もしあなたが大企業/企業で働いている場合、または非常に大規模なクライアントを獲得した場合は、現在のテクノロジーをすべて捨てて、HTML テーブルの帽子をかぶる準備をしてください。

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

私にとって、それは時間の使い方の問題です。CSS を正しく理解するために時間を費やすことも、表に放り込んで CSS に費やす時間を大幅に短縮することもできます。私は物事が軌道に乗るまではこの方法で進むことが多いです。機能が完成したら、戻って CSS/HTML を磨きます。

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

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

サイトの開発で報酬を得ている場合、特にそのコストがサイト (製品) に価値を付加しない場合、将来のリスクを軽減し、将来の開発コストを最小限に抑えることが責任の一部となります。

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

したがって、データのテーブルを表示したい場合は次のようになります。そうします（テーブルを使用して）。ページ上にコンテンツを配置する場合:CSSを使用します。

少し混乱しているかもしれないと思います。CSS は、テーブル要素であっても「div」であっても、HTML ドキュメントのスタイルを設定する方法です。

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

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

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

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

HTH

私は、レイアウトにテーブルを使用する時代は終わったと信じており、そう願っています。簡単に言えば： テーブルはテーブルであり、それ以外の何ものでもない.

今後数年間、同様の新たな炎上戦争のトピックになると私が考えているのは次のとおりです。新しい CSS 機能を使用する必要がありますか画面: テーブル, テーブルセル, テーブル行 等レイアウト用？？?:-)

これがよく出てくるのは、構造やレイアウトを作成するときに CSS よりも HTML テーブルを使用した方が理解しやすいからだと思います。CSS を使用すると、より抽象的になりますが、コードを分離するのに役立ちます。

「構造」引数に応じて...定義上、「表形式」として識別できるようにデータに構造を与える HTML テーブルを使用していません。CSS であっても HTML であっても、データのフローとレイアウトを制御することになります。表形式であろうとそうでなければ...

CSS テーブルがそれほど重要であるなら (そして、私の答えはある種の炎上戦争を引き起こすと確信しています)、なぜ Visual Studio には CSS を使用してレイアウトを作成するメカニズムがないのでしょうか?ああ、VS のレイアウト機能を確認しなかったのですか?はい、テーブルは Microsoft から直接入手できます。私は文句を言っているのではなく、それが世界の他の国々にとっても同じくらい意味があるのであれば、MS は CSS に切り替えるはずだということを主張しているだけです。

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

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

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

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

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

レイアウト作業にテーブルを使用しないでください。セマンティックマークアップによって得られる検索エンジンとアクセシビリティの利点は数多くあります。

表形式データのみに使用するためにテーブルを予約することは、ほとんどの場合機能します。レイアウトの問題の中には、他のものよりもテーブルを使用する方がはるかに簡単に解決できるものもあります。たとえば、垂直方向の配置と同じ高さの列です。フェンスの向こう側には、テーブルが要件に適合しないため、float div を使用してきた複雑なデータテーブルがいくつかありました。

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

また、表を使用してページ上の項目を配置するというアイデアも好きではありません。しかし、これが宗教になってはいけません。テーブルは良くありません。私は、3 列のレイアウトを使用しており、コンテンツに応じて中央の列を拡大する必要があるという例に遭遇しました。最終的に、最も単純で必要なすべてのブラウザで適切に動作する解決策は、テーブルを使用することでした。私の考えでは、CSS にはまだいくつかの欠点があり、場合によっては、何らかのアイデア (「テーブルは悪い...」) に盲目的に従うよりも、機能するシンプルなものを使用した方が良い場合があります。

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

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

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

@toddhd さん、時間を節約するためだけにレイアウトにテーブルを使用することを推奨するのは違法行為です。時間が問題である場合は、次のようなフレームワークを使用して、テーブルなしの列形式のレイアウトをすばやく作成できます。ブループリントCSS または 960グリッド.

設計を開始したときにブラウザがどのような機能を備えていたかに依存するようです。テーブルのみが機能していたときに使い始めた場合は、それを知っているので、おそらく常にそれを使用したいと思うでしょう。あるいは、ブラウザが CSS をレンダリングできるようになった後でも、それを好んで使用していた場合は...

簡単だしやり方はわかっているからといって、同じことを何度もやり続けるのは好きではありません。それは退屈です。私は、使い方がわからない、または学ぶ時間がないと考えて何かを無視するよりも、新しいテクニックを学びたいと思っています。

私は表を使うのが好きではありません。理解できません。異質で不快に思えますが、それは私が 2005 年から始めたからです。また、私は手作業でコーディングすることを好むため、テンプレートを吐き出すためにデザインプログラムを使用しません。

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

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

テーブルを使用する必要がある場合、レイアウトが最悪になる可能性があります。テーブルを使用する、うまく設計された 1 つのサイトを見せてください。そうすれば、テーブルを使用しないサイトも 1,000 個お見せします。

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

レイアウトのためにテーブルを手放す際に人々が直面する困難は、ほとんどの場合、HTML/CSS/グッドデザインの原則に対する彼ら自身の無知の結果です。複数列のレイアウトを垂直方向に均等に広げるのは難しいかもしれませんが、別の方法を試してみることもできます。DIV は TABLE ではありません。幅広の枠線やページの背景などを使用して擬似的な列を作成できます。自分がやろうとしていることを実際に実行する方法を学ぶのに時間を費やさないと、永遠に有用なスキルを持たない人とみなされることになります。(http://www.alistapart.com 良いスタートになるでしょう）

この質問が 2008 年に浮上していることに正直驚きました。DIVは私が高校生のときに登場しました。初心者になるのはやめてください。

また、上で述べたように、テーブルはモバイルデバイスやスクリーンリーダー上では非常に失敗します。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow