XHTMLの<table>について教えてください。

質問

XHTMLの<table>について、皆様の知識を貸してくださいm(_ _)m
一応調べはしましたが、もし基礎の基礎みたいな質問をしてたらすみません。

【質問】
(1)、XHTMLのtableに、captionって使っていいの？
(2)、<th>って、一番上の<tr>～</tr>間以外に使ったら駄目？もしくは、使ってもいいが好ましくない？
(3)以下、サンプルソースみたいな使い方はしてもいいのでしょうか・・・？

【サンプルソース】
<table>
<caption>色の心理効果について</caption>
<tr>
<th>赤の心理効果</th>
<th>青の心理効果</th>
<th>黄色の心理効果</th>
</tr>
<tr>
<td>気持ちを前向きにさせる</td>
<td>集中力を高める</td>
<td>集中力を発揮させる</td>
</tr>
<tr>
<th>緑の心理効果</th>
<th>桃の心理効果</th>
<th>紫の心理効果</th>
</tr>
<tr>
<td>リラックスさせる</th>
<td>幸せ・優しい気持ち</td>
<td>高貴・神秘的</td>
</tr>

……以下繰り返し

</table>

以上です。
知識不足で恥ずかしいかぎりですが何卒よろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

XHTMLのバージョンが分かりませんが、XHTML1.0は、HTML4.01をそのままXMLにしたものですから、HTML4.01の仕様書--ただしstrict!!--を確認するのが良いです。
<table>要素には、summary属性が必須です。
<table>要素には、次の要素が入ることが出来ます。
　<caption>　任意 * 必ず<table>の次ぎ
　<col>または<colgroup>の何れか 任意 *
　<thead>　　任意 *
　<tfoot>　　任意 *
　<tbody>　　ひとつ以上必須 +
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1 )

です。
<tbody>要素には tr要素のみひとつ以上 +

<tr>要素は、(TH|TD)+ ですから、thかtdをひとつ以上

th要素にはabbr属性が必須!!

よって厳密に書くと
<table summary="なんたらの表">
　<caption>コーヒーの摂取量</caption>
　<thead>
　　<tr>
　　　<th abbr="性別">性別</th>
　　　<th abbr="朝">朝</th>
　　　<th abbr="昼">昼</th>
　　</tr>
　</thead>
　<tbody>
　　<tr>
　　　<th abbr="男">男</th>
　　　<td>1杯</td>
　　　<td>２杯</td>
　　</tr>
・・・
とか、
(1)、XHTMLのtableに、captionって使っていいの？
　　つかえます。
(2)、<th>って、一番上の<tr>～</tr>間以外に使ったら駄目？もしくは、使ってもいいが好ましくない？
　　一番上にするなら、<thead></thead>にしましょう。長大な表を表示したり印刷するとよくわかる。
　　<th>だろうが<td>だろうが良いですが、基本的にはtheadでしょう。
(3)以下、サンプルソースみたいな使い方はしてもいいのでしょうか・・・？

<table summary="色の心理効果">
　<caption>色の心理効果について</caption>
　<tbody><!-- 表本文の一つ目 -->
　　<tr>
　　　<th abbr="赤">赤の心理効果</th>
　　　<th abbr="青">青の心理効果</th>
　　　<th abbr="黄">黄色の心理効果</th>
　　</tr>
　　<tr>
　　　<td>気持ちを前向きにさせる</td>
　　　<td>集中力を高める</td>
　　　<td>集中力を発揮させる</td>
　　</tr>
　</tbody>
　<tbody><!-- 表本文の二つ目 -->
　　<tr>
　　　<th abbr="緑">緑の心理効果</th>
　　　<th abbr="桃">桃の心理効果</th>
　　　<th abbr="紫">紫の心理効果</th>
　　</tr>
　　<tr>
　　　<td>リラックスさせる</th>
　　　<td>幸せ・優しい気持ち</td>
　　　<td>高貴・神秘的</td>
　　</tr>
　</tbody>
</table>

と書けばよいだけですけど・・・文書構造だけを落ちがないようにマークアップする。ソンだけです。
　そうすれば
table tbody th:first-child th,
table tbody th:first-child td{ border-top:double 3px red;}
とかスタイルシートで指定できる。

　わざわざややこしい、XHTMLでなくて、よりトレンドなHTMLにすれば楽です。
<table summary="色の心理効果">
　<caption>色の心理効果について</caption>
　<tbody><!-- 表本文の一つ目 -->
　　<tr>
　　　<th abbr="赤">赤の心理効果
　　　<th abbr="青">青の心理効果
　　　<th abbr="黄">黄色の心理効果
　　<tr>
　　　<td>気持ちを前向きにさせる
　　　<td>集中力を高める
　　　<td>集中力を発揮させる
　<tbody><!-- 表本文の二つ目 -->
　　<tr>
　　　<th abbr="緑">緑の心理効果
　　　<th abbr="桃">桃の心理効果
　　　<th abbr="紫">紫の心理効果
　　<tr>
　　　<td>リラックスさせる
　　　<td>幸せ・優しい気持ち
　　　<td>高貴・神秘的
</table>
と書ける。いずれHTML5になるのでね。
※HTML5では、tableのsummary属性はなくります。
※TH要素のabbrは必須でなくなります。

お礼

返信おそくなりましてすみません、16時提出でバタバタとしていたもので、
翌日のお礼となりましたm（_ _）m

ご丁寧にありがとうございます、大変参考になりました。
ご指摘どおりのソースへと変更し、同時にテーブルへの理解がよりいっそう深まりました＾＾

感謝です！
ありがとうございます。

回答No.1

Tacosan

DTD を読めばわかる.
(1) OK
(2) 使ってもいい
(3) これはダメなところがある.