私は古い学校の Web デザイナーであり、まだ div よりもテーブルを選択する傾向があります。特に、私たちが周りに持っている現在のブラウザー プラットフォームの量を考えると、公開 Web サイトをそのように作成する方が簡単だと思います。
div は問題なく実行できますが、クロス ブラウザで作業するとテーブルが見つけやすくなります
私が専門的なウェブサイトを運営している場合、私はそれを間違っているとみなされたり、専門的でなかったり、眉をひそめたりすることはありますか? 非標準または旧式に分類されますか?
セマンティック テーブルを使用して、レイアウトのようなグリッドを実現しています。これが間違っている (そして眉をひそめている) 理由は、主にレイアウト情報が間違った場所にあるためです。Html はセマンティクス (コンテンツなしの外観) に使用する必要があり、スタイリングは css (コンテンツなしの外観) で行う必要があります。そのため、情報が表形式の場合にのみtable タグを使用してください。
ただし、この質問は良い質問です。なぜなら、本当に優れた代替案がまだ間近に迫っているからです (以下の今後の CSS レイアウト エンジンを参照してください)。
W3C には、いくつかの今後のソリューションがあります。あなたのニーズに最も近いものは、現在、Chrome、Firefox、および Internet Explorer に実装されています ( http://dev.w3.org/csswg/css3-grid-layout )。このCSSはあなたが探しているものです。この冬、すべての人気の新しいブラウザーで利用できるようになります。したがって、今後数年間は、古い (そしてより扱いにくい) CSS を使用する必要があります (以下を参照)。
もう 1 つは CSS Flexbox ( http://www.w3.org/TR/css3-flexbox ) です。
ただし、これらの仕様は一般的な使用には新しいものですが、この種のレイアウトが正しく行われる方法です。
今日は CSS グリッドを使用して表を避けます。このコードを出発点として使用できます。
上記の例のように、すべてのブラウザーで機能する CSS を使用するのは少し手間がかかりますが、これは現在すべてのブラウザーで機能します。
お勧めしませんが、現在の HTML 5 Draft 仕様では、レイアウトにテーブルを使用できます。
レイアウト テーブルとデータ テーブルを区別する方法
おそらくレイアウトテーブル
- 値表示での role 属性の使用
- 適合しない値 0 を持つ border 属性の使用
- 値が 0 の不適合な cellspacing および cellpadding 属性の使用
おそらく非レイアウトテーブル
- キャプション、テアド、または th 要素の使用
- ヘッダーとスコープ属性の使用
- 0 以外の値を持つ border 属性の使用
- CSS を使用して設定された明示的な可視境界線
良い指標ではない
(レイアウト テーブルと非レイアウト テーブルの両方に歴史的にこの属性が与えられています)
- summary 属性の使用
参照: http://dev.w3.org/html5/spec/the-table-element.html#the-table-element
テーブルやdivを使用してWebページをレイアウトしても、簡単にアクセスできるクロスブラウザーWebサイトを作成することに関して。
しかし、 WCAG 2.0 レベル AA 準拠をターゲットにすることで、それらをアクセス可能にしようとしています。WCAG 2.0には、最高の HTML コーディング プラクティスとして、またアクセシブルな Web サイトを作成するために使用できる、HTML のテクニックの完全なセットがあります。
ガイドラインとテクニックのクイック リファレンス: WCAG 2.0 への対応方法
:-)
表は、表形式のデータ期間を表示するためにのみ使用してください。それらの他の使用は、非意味的で、間違っており、古い学校です。レイアウトに使用できる唯一のプレース テーブルは、HTML メールです...
ルールは、状況に最も意味のある要素を使用することです。これはクエンティンがほのめかしていることなので、絶対にしないでください。
<table class="header">
そして、試して避けてください：
<div class="header">
代わりに（可能な場合）以下を選択します。
<header>