表は作れるようになりました。もう少し、気を遣って、判りやすい表にします。デザインを作る上でも構造化は重要です。
表でデータを並べるからには、構造化は必須です。そうすることによって、スタイルシートで適切なデザインが可能になり、データの理解を大いに助けるでしょう。逆に、構造化されているからこそ、表に整理できる訳です。
ここに出てきた、<col>、<colgroup>、<tbody>、<thead>、<tfoot>、および、rowspan、colspan属性は、表のデータをまとめて、構造を分かりやすくするためのものです。これらのタグや属性を使って、日程表をもう少し凝った、実用的なものにしてみます。
これまた意外と簡単。まず、いくつかのタグを追加して、行を構造化してみます。
次に、列の構造化というか、タグで括ってまとめます。使うタグは、<colgroup>と<col>です。
<col>の方は、空要素です。<caption></caption>の次の行に書いて、表の中の列の構造を示します。ともに、id、またはclass属性を付けます。
<colgroup>にはspan属性でいくつの列を括るのか明示するか、あるいは、括りたい列の数だけ<col>を並べます。span属性の数、<col>の数の合計が<tr>に含まれる<td>あるいは<th>の合計数に一致する必要があります。
例では、一列目と２列目がスケジュール、<colgroup id="schedule">３列目から６列目までがチーム<colgroup id="team">を示していますので、そのように記載します。また、それぞれの列も<col id="kobe">の様に記述してゆきます。<colgroup>の中に、<col>を書かないときは、いくつの列をグループ化するか、span属性で示します。
<colgroup id="schedule" span="2"></colgroup>
各々の行は、日付を示していますので、<tr id="1st_wk_sat">（第一節の土曜日）のようにid属性を付けることにします。
<table summary="関西地区Ｊリーグ試合の予定を一列目、神戸、２列目万博、３列目長居、４列目西京極で、後期各節ごとに対戦相手などを記載">
<caption>関西地区Ｊリーグ2003年後期日程表 (sample_4)</caption>
<colgroup id="schedule">
<col id="clause">
<col id="date">
</colgroup>
<colgroup id="team">
<col id="kobe">
<col id="gamba">
<col id="cerezo">
<col id="kyoto">
</colgroup>
<thead>
<tr>
<th>節</th>
<th>日付</th>
<th>神戸</th>
<th>Ｇ大阪</th>
<th>Ｃ大阪</th>
<th>京都</th>
</tr>
</thead>
<tfoot>
<tr><td colspan="6"><a href="http://www.j-league.or.jp/record/j1_2nd/index.html">Ｊリーグオフィシャルサイト</a>でご確認下さい。</td>
</tr></tfoot>
<tbody id="august">
<tr id="1st_wk_sat">
<th>第１節</th>
<td>8/16</td>
<td></td>
<td></td>
<td>at 味スタ</td>
<td>at 柏</td>
</tr>
<tr id="1st_wk_sun">
<th>第１節</th>
<td>8/17</td>
<td>vs 市原 </td>
<td>vs 大分 </td>
<td></td>
<td></td>
</tr>
<
tr id="2nd_wk_sat">
<
th>第２節</th>
<td>8/23</td>
<td></td>
<td>at 市原</td>
<td>vs 柏</td>
<td>vs 浦和</td>
<
/tr>
<
tr id="2nd_wk_sun">
<
th>第２節</th>
<td>8/24</td>
<td>at 仙台 </td>
<td></td>
<td></td>
<td></td>
<
/tr>
<
tr id="3rd_wk_sat">
<
th>第３節</th>
<td>8/30</td>
<td>at 駒場</td>
<td>at 柏</td>
<td>vs 仙台</td>
<td>vs 磐田</td>
<
/tr>
<
/tbody><!-- end of "august" -->
<
tbody id="september">
<
tr id="4th_wk_sat">
<
th>第４節</th>
<td>9/6</td>
<td>vs清水</td>
<td>vs浦和</td>
<td>at磐田</td>
<td>at東京Ｖ</td>
<
/tr>
<
tr id="5th_wk_sat">
<
th>第５節</th>
<td>9/13</td>
<td>vs東京Ｖ</td>
<td></td>
<td>vs京都</td>
<td>atＣ大阪</td>
<
/tr>
<
tr id="5th_wk_sun">
<
th>第５節</th>
<td>9/14</td>
<td></td>
<td>at清水</td>
<td></td>
<td></td>
<
/tr>
<
tr id="6th_wk_sat">
<
th>第６節</th>
<td>9/20</td>
<td>atＧ大阪</td>
<td>vs神戸</td>
<td>at東京Ｖ</td>
<td>vs名古屋</td>
<
/tr>
<
tr id="7th_wk_tue">
<
th>第７節</th>
<td>9/23</td>
<td>vs横浜</td>
<td>vs東京Ｖ</td>
<td>at名古屋</td>
<td>at鹿嶋</td>
<
/tr>
<
tr id="8th_wk_sat">
<
th>第８節</th>
<td>9/27</td>
<td>at大分</td>
<td>at横浜</td>
<td>vs鹿嶋</td>
<td>vs東京Ｆ</td>
<
/tr>
<
/tbody><!-- end of "september" -->
<
/table>
| 節 | 日付 | 神戸 | Ｇ大阪 | Ｃ大阪 | 京都 |
|---|---|---|---|---|---|
| Ｊリーグオフィシャルサイトでご確認下さい。 | |||||
| 第１節 | 8/16 | at 味スタ | at 柏 | ||
| 第１節 | 8/17 | vs 市原 | vs 大分 | ||
| 第２節 | 8/23 | at 市原 | vs 柏 | vs 浦和 | |
| 第２節 | 8/24 | at 仙台 | |||
| 第３節 | 8/30 | at 駒場 | at 柏 | vs 仙台 | vs 磐田 |
| 第４節 | 9/6 | vs清水 | vs浦和 | at磐田 | at東京Ｖ |
| 第５節 | 9/13 | vs東京Ｖ | vs京都 | atＣ大阪 | |
| 第５節 | 9/14 | at清水 | |||
| 第６節 | 9/20 | atＧ大阪 | vs神戸 | at東京Ｖ | vs名古屋 |
| 第７節 | 9/23 | vs横浜 | vs東京Ｖ | at名古屋 | at鹿嶋 |
| 第８節 | 9/27 | at大分 | at横浜 | vs鹿嶋 | vs東京Ｆ |
とりあえず、表を作って、ある程度の構造化が出来たところで、改めて表に関するタグ、属性などをおさらいしておきます。今まで触れていない属性もいっしょにまとめます。参考資料は、HTML概説リファレンス、テーブル要素の概説（ともにChaichan-worldのコンテンツ）です。
取りあえず、並べてみます。
もう少し勉強してから、スタイルシートによるデザイン法を続けます。
oyanews/homep/creating/web_table2