どのテーブルにも <th> が必要ですか?
https://stackoverflow.com/questions/2278018
-
21-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
持つ必要がありますか <th> どこかのテーブルにありますか？表に見出しがない場合でも?
テーブルには他に 3 つのタグがあります <thead> <tbody> <tfoot> テーブルフッターに何もない場合でも、すべてを使用する必要がありますか?Firefox はデフォルトでこれらすべてをコードに追加します。
それは必要ですか、 <th> 常に にある必要があります <thead>
そして、クライアントから受け取ったコンテンツに見出しがあり、その見出しがテーブルの外からのものであるがテーブルに関連している場合、その見出しをテーブルにどのように配置すればよいですか
上の表のように
<h3>Heading of table<h3>
<table>......</table>
表の見出しとして
<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>
または表のキャプションとして
<table>
<caption> Heading of table</caption>
スクリーン リーダーに適しており、意味的に正しいのはどれですか?
解決
による HTML DTD これは HTML テーブルのコンテンツ モデルです。
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ELEMENT CAPTION - - (%inline;)* -- table caption --> <!ELEMENT THEAD - O (TR)+ -- table header --> <!ELEMENT TFOOT - O (TR)+ -- table footer --> <!ELEMENT TBODY O O (TR)+ -- table body --> <!ELEMENT COLGROUP - O (COL)* -- table column group --> <!ELEMENT COL - O EMPTY -- table column --> <!ELEMENT TR - O (TH|TD)+ -- table row --> <!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
したがって、これは不正な構文です。
<thead><th>Heading of table</th></thead>
そのはず：
<thead><tr><th>Heading of table</th></tr></thead>
<th> 要素はどこにも必要ありません。これらは単に 2 つの細胞タイプの 1 つです (もう 1 つは <td>) テーブルの行で使用できます。あ <thead> 1 つ以上の行を含めることができるオプションのテーブル セクションです。
編集： に関しては なぜ 使用する <thead> 理由はいくつかあります。
- セマンティック： テーブルのコンテンツと「メタデータ」を区別しています。これは、列ヘッダーとデータ行の間を区切るために最もよく使用されます。
- アクセシビリティ: スクリーン リーダーを使用する人が表の内容を理解するのに役立ちます。
- 非スクリーンメディア: 複数ページの表を印刷すると、
<thead>各ページの上部に内容が表示されるため、何ページもめくらなくても列の意味が理解できます。 - スタイリング： CSSを適用できるのは、
<tbody>要素、<thead>要素、両方、またはその他の組み合わせ。これにより、セレクターを作成するための別のものが提供されます。 - JavaScript: これは、jQuery や同様のライブラリを使用するときによく発生します。追加情報はコードを記述する際に役立ちます。
(5) の例として、次のようにします。
$("table > tbody > tr:nth-child(odd)").addClass("odd");
の <thead> 要素は、それらの行がそのようにスタイル設定されないことを意味します。あるいは、次のようにすることもできます。
$("table > tbody > tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
と：
tr.hover { background: yellow; }
これもまた除外します <thead> 行。
最後に、これらの同じ議論の多くは、使用にも当てはまります。 <th> 要素が終わった <td> 要素:このセルはデータではなく、ある種のヘッダーであることを示しています。多くの場合、このようなセルは、 <thead> テーブルの構造と性質に応じて、セクションまたは各行の最初のセルになります。
他のヒント
<th>sを使用してください。それはあなたの通常のユーザーのための素晴らしいとスクリーンリーダーのために不可欠です。あなたはレイアウトのためにテーブルを使用している場合<th>s使用しないでください（または他の極悪非道なスキームを...）
いいえ、目を持っている必要はありません。しかし、それはあなたが番目の権利を使用しているようには見えません。一般的に、あなたは、各列に1つを持っています。正しく使用番目の簡単な例があります：
<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
また、行うことができます：
<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
答えは
はい！
表を使用して表形式のデータを表示している場合.
表形式のデータが行と列に編成されているのには理由があります。 表のセル内のデータの意味は、それが表示される列と行の意味によって定義されます。
行と列に意味を与えるセルを、データを含むだけのセルとは別に識別することが重要です。
たとえば、次の表には意味のある情報がまったく含まれていません。
34 56 90 15 45 65 85 30 50 55 70 35
行と列に名前が付けられている場合にのみ、数字が意味を持ちます。これらの名前は次を使用してマークアップされます。 <th>:
2月 5月 8月 11月 ITH ジョン・F・ケネディ IST
もちろん、これらの数字が何を意味するのかはまだわかりません。 <caption> 必要です:
選択した空港の月ごとの平均気温
2月 5月 8月 11月
ITH
ジョン・F・ケネディ
IST
最後に、測定単位、データソースなどの詳細に注意することが重要です。この種の情報は通常、テーブルのフッターに記載されます。
選択した空港の月ごとの平均気温
2月 5月 8月 11月
ITH
ジョン・F・ケネディ
IST
Temperatures in °F. Source: Publication #456 MNMO
表のタイトルが入ります <caption>. 。の <thead> そして <tfoot> セクションは、テーブルが大きくなる場合に特に便利です。見る 大きな HTML テーブルを印刷するときに改ページを処理する方法 たとえば。
使用できます <colgroups> 論理的に関連したデータをグループ化します。
あなたは最高のあなたのデータを記述したものを使用します。
<caption>は、テーブル全体を説明します。 thは通常、1つの列を記述するために使用されている（ただし、行見出しに使用することができる）単一のセルが作成されます。
thead、tfoot、およびtbody。すべて使用することができ、彼らはそのためにあることを使用した場合、すべてのオプションが提供され、そしてあなただけの1 theadと1 tfootを持っている（ただし、複数のtbodyを持つことができます。あなたは「ドン場合、多くのブラウザでは、（すべてでは？）暗黙的にそれらを追加しますトン、しかし仕様は、彼らがオプションだと言います。
thにかかわらずtrである場合のいずれかtr内に表示することができます。
<table> <tr> <td>text</td> </tr> </table>
これは私が考えることができる最小のテーブルです。
メリットはセマンティクスです。 <th>手段の T のできるの H のEADER。あなたの列のヘッダをマークアップするために使用します。一般<thead>内でます。
