テーブルの正しい雛形を教えてください。

<table>
<tr><td>aaa</td><td>bbb</td></tr>
<tr><td>ccc</td><td>ddd</td></tr>
</table>

これってダメな例なんですよね？
いつもこれでテーブルを作っています。

No.1 回答者： yambejp 回答日時： 2014/01/16 11:17

>これってダメな例なんですよね？

なぜそう思ったかによります。
特に書式としては問題ありません。

あえていえば、表ですからほとんどの場合見出しがあるはずです
それを明示的に処理するためにtheadやtbodyをわけたり、thをつかったりします
またテーブルにはsummaryをつけることが望ましいとされています。
列ごとに属性をつける場合はcolやcolgroupを設定してもよいかもしれません

<style>
table{border-collapse:collapse;}
td,th{border:1px solid #000000;}
col#col1{background-Color:#ffff00;}
col#col2{width:200px;}
</style>
<table summary="内容説明">
<col id="col1">
<col id="col2">
<thead>
<tr><th>見出し1</th><th>見出し2</th></tr>
</thead>
<tbody>
<tr><td>aaa</td><td>bbb</td></tr>
<tr><td>ccc</td><td>ddd</td></tr>
</tbody>
</table>

この回答へのお礼

ご回答ありがとうございます。

お礼日時：2014/02/02 19:38

No.2 回答者： Ogre7077 回答日時： 2014/01/16 11:30

とくに駄目な点が見つかりません

HTML仕様的にも
ブラウザ実装的にも
現実の作業効率的にも
有効な雛形だと思います。

もっと厳密な雛形にしたいなら
<table>
<caption> cap </caption>
<thead>
<tr><th> A </th><th> B </th></tr>
</thead>
<tbody>
<tr><td> A1 </td><td> B1 </td></tr>
<tr><td> A2 </td><td> B2 </td></tr>
</tbody>
</table>

もっとテキスト編集しやすい雛形にしたいなら
<table>
<thead>
<tr>
　<th> A
　<th> B
<tbody>
<tr>
　<td> A1
　<td> B1
<tr>
　<td> A2
　<td> B2
</table>

閉じタグは省略しても問題ありません
http://www.whatwg.org/specs/web-apps/current-wor …

この回答へのお礼

ご回答ありがとうございます。

お礼日時：2014/02/02 19:38

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/01/16 14:57

こんなところで聞いたって正確で正しい情報は得られない。

まず何よりも先に仕様書を調べること!!
　⇒表( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
11.2.1 TABLE要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　には、
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
と書かれている。
　　(注)?は0個または1、*は0個以上、+はひとつ以上と言う意味、|は「又は」ですから

要素 TABLEは
　CAPTION?　　CAPTION は、存在しないか１つのみ
　(COL*|COLGROUP*)　COLかCOLGROUPを０個以上--なくても良いし、いくつあっても良い
　THEAD?　　　THEADは、存在しないか１つのみ
　TFOOT?　　　THEADは、存在しないか１つのみ
　TBODY+　　　TBODYは、【ひとつ以上】すなわち必須!!
と書かれています。
　CAPTION,THEAD,TFOOTなどそれぞれの要素は、
11.2.2 表題: CAPTION要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
11.2.3 行グループ: THEAD、 TFOOT、及びTBODY要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　などに詳しく書かれています。
CAPTIONは、最初に書け!!、THEAD,TFOOTはTBODYより前・

すなわち、<table>に続いて、<tr>は書くことは出来ません。tdが置けるのは
<!ELEMENT THEAD - O (TR)+
<!ELEMENT TFOOT - O (TR)+
<!ELEMENT TBODY - O (TR)+

ですから、正式に記述すると
<table summary="この表の言葉での説明を書く" border="1">
　<caption>今月の予定</caption>
　<thead>
　　<tr>
　　　<th abbr="Sun">日曜</th><th abbr="Chu">火曜</th>・・・<th abbr="Sat">土曜</th>
　　</tr>
　</thead>
　<tfoot>
　　<tr>
　　　<th abbr="Sun">日曜</th><th abbr="Chu">火曜</th>・・・<th abbr="Sat">土曜</th>
　　</tr>
　</foot>
　<tbody><!-- TBODY開始タグは、表が本体をただ1つだけ含んでいてヘッダもフッタも含まないという場合を除き、常に必要である。 -->
　　<tr>
　　　<td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5<td><td>6</td>
　　</tr>
　</tbody>
</table>
最低限ですますなら
<table summary="この表の言葉での説明を書く" border="1">
　<tr>
　　<th abbr="Sun">日曜</th><th abbr="Chu">火曜</th>・・・<th abbr="Sat">土曜</th>
　</tr>
　<tr>
　　<td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5<td><td>6</td>
　</tr>
</table>
　※ただひとつの本体しか含まず、THEAD,TFOOTも含まないのでTBODYは省略できる。

になります。
summaryは、「表のsummary(要約)をユーザが得られるようにする。 著者は、非視覚系ユーザエージェントのユーザにも理解しやすいよう、表の内容と構造に関する要約を提供する必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　HTML5では必須でなくなりました。
border="1"は、スタイルシートを理解しないブラウザのために、通常は書いておきます。

＞これってダメな例なんですよね？
　そのマークアップ自体は、summary属性がないことをのぞき特に誤りと言うわけではありませんが、デザインや配置のために、本来表でない物をtableでマークアップするのは、文法以前に誤りです。
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

この回答へのお礼

ご回答ありがとうございます。

お礼日時：2014/02/02 19:38