この項のもくじ

  1. その１
  2. その２
  3. その３
  4. ウエブサイト作製ガイド・もくじ
  5. 更新履歴
  6. ご案内・関連ページ

いつまでも、分からないとばかり云っているのでは芸がなさ過ぎる。とにかく、覚えてしまおう、ということで、調べることにしました。

参考資料

以下の資料をもとに、まとめています。

書籍

ユニバーサルHTML/XHTML
神崎正英先生の名著。分からないときには取りあえずこの本。毎日コミュニケーションズ。

サイト

テーブル要素（table,tr,td,タグ等）の概説
Chaichan-worldのコンテンツ。いつもお世話になっています。
HTML概説リファレンス
これもChaichan-Worldのコンテンツ。取りあえず、見ます。
テーブル
テーブルとアクセッシビリティ
いずれも、ごく簡単なHTMLの説明：The Web KANZAKIのコンテンツ。

このページを見るより、上記リンクを参照した方が役に立つことでしょう。

まず、基本を押さえる

二次元のデータを分かりやすく示す。ということです。まず、基本をマスターして、表を作れるようにします。

とにかく表を作る

最も基本となるタグは、<table></table>です。表の中身は全てこのタグの中に書きます。

tableはブロック要素です。テーブルの単位は行です。テーブルの行は、<tr></tr>で表します。行の中のマスを表すには、<td></td>というわけです。例を示します。

<table>
<tr> <td>列１</td> <td>列２</td> <td>列３</td> </tr>
<tr> <td>その１</td> <td>その２</td> <td>その３</td> </tr>
</table>

列１列２列３
その１その２その３

出来ました。意外に簡単です。<td>がテーブルデータ、<tr>がテーブルの行（row）ということを知っていれば、すぐ理解できるはずです。

重要な点は、各々の行<tr></tr>に含まれる<td></td>の数を揃えること。行の数はいくつあっても構いません。上の例では、それぞれに三つの<td></td>、つまり、ひとつの行当たり、セルは３つ。それが２行分あるということになります。

必須要素・属性

表の一行目は、それ以下の行の凡例などを示すのが普通です。これはデータではありませんから、一行目は<td>ではなく、<th>つまり、table headerで括ります。

表のタイトルを、<caption>表のタイトル</caption>という形にして、tableタグの中の一行目に書きます。

tableタグにsummary属性を加えて、テーブルで表そうとするデータの要約を示さなくてはなりません。これは、テーブルを表示できない環境や、読み上げブラウザを使う人に対する配慮として必須です。

<table summary="関西地区Ｊリーグ試合の予定を一列目、神戸、２列目万博、３列目長居、４列目西京極で、後期各節ごとに対戦相手などを記載">
<caption>関西地区Ｊリーグ2003年後期日程表</caption>
<tr>
<th>節</th>
<th>日付</th>
<th>神戸</th>
<th>Ｇ大阪</th>
<th>Ｃ大阪</th>
<th>京都</th>
</tr>
<tr>
<td>第１節</td>
<td>8/16,17</td>
<td>vs 市原 (17)</td>
<td>vs 大分 (17)</td>
<td>at 味スタ</td>
<td>at 柏</td>
</tr>
<tr>
<td>第２節</td>
<td>8/23,24</td>
<td>at 仙台 (24)</td>
<td>at 市原</td>
<td>vs 柏(23)</td>
<td>vs 浦和(23)</td>
</tr>
<tr>
<td>第３節</td>
<td>8/30</td>
<td>at 駒場</td>
<td>at 柏</td>
<td>vs 仙台</td>
<td>vs 磐田</td>
</tr>
</table>

関西地区Ｊリーグ2003年後期日程表
節日付神戸 Ｇ大阪 Ｃ大阪 京都
第１節 8/16,17 vs 市原 (17) vs 大分 (17) at 味スタ at 柏
第２節 8/23,24 at 仙台 (24) at 市原 vs 柏(23) vs 浦和(23)
第３節 8/30 at 駒場 at 柏 vs 仙台 vs 磐田

出来ました！

セルを結合する

セルを結合することが出来ます。

関西地区Ｊリーグ2003年後期日程表
節・日付 神戸 Ｇ大阪 Ｃ大阪 京都
第１節 8/16 　 　 at 味スタ at 柏
8/17 vs 市原 (17) vs 大分 (17) 　 　
第２節 8/23 　 at 市原 vs 柏(23) vs 浦和(23)
8/23,24 at 仙台 (24) 　 　 　
第３節 8/30 at 駒場 at 柏 vs 仙台 vs 磐田

<table summary="関西地区Ｊリーグ試合の予定を一列目、神戸、２列目万博、３列目長居、４列目西京極で、後期各節ごとに対戦相手などを記載">
<caption>関西地区Ｊリーグ2003年後期日程表</caption>
<tr><th colspan="2">節・日付</th>
<!-- colspan="2" で結合される<th>を削除 -->
<th>神戸</th>
<th>Ｇ大阪</th>
<th>Ｃ大阪</th>
<th>京都</th>
</tr>
<tr>
<th rowspan="2">第１節</th>
<td>8/16</td>
<td>　</td>
<td>　</td>
<td>at 味スタ</td>
<td>at 柏</td>
</tr>
<tr>
<!-- rowspan="2" で結合される<th>を削除 -->
<td>8/17</td>
<td>vs 市原 (17)</td>
<td>vs 大分 (17)</td>
<td>　</td>
<td>　</td>
</tr>
< tr>
< th rowspan="2">第２節</th>
<td>8/23</td>
<td>　</td>
<td>at 市原</td>
<td>vs 柏(23)</td>
<td>vs 浦和(23)</td>
< /tr>
< tr>
<!-- rowspan="2" で結合される<th>を削除 -->
<td>8/23,24</td>
<td>at 仙台 (24)</td>
<td>　</td>
<td>　</td>
<td>　</td>
< /tr>
< tr>
< th>第３節</th>
<td>8/30</td>
<td>at 駒場</td>
<td>at 柏</td>
<td>vs 仙台</td>
<td>vs 磐田</td>
< /tr>
< /table>

まず、一列目、節を示しているところはデータではなく表題なので、<th></th>としています。結合したいセルの数を、横に繋げるなら、colspan属性で、縦に繋げるなら、rowspan属性で明示します。結合される分のセルが余りますので、span 属性値よりひとつ少ない<td></td>あるいは<th></th>を削除して、１行のセルの数（<td></td>と<th></th>の合計）を揃えます。

タグの結合は、表の見栄えを良くしてデータの理解を助けますが、データの構造を乱すので、必要最小限にした方が良いようです。

ウエブサイト作製ガイドのもくじ

  1. はじめに
  2. 割と正しいHTMLを記載する方法
  3. スタイルシート
  4. テーブルをマスターする
    1. 基本を押さえる
    2. データを構造化する
    3. データの並べ方
  5. おまけ

更新履歴

oyanews/homep/creating/web_table