何かデータを示したいときは、長ったらしい文章で記述するよりも、表形式で示した方が理解しやすくなります。
ただし、誰しもが表を閲覧できるわけではありませんので、閲覧できない場合でもデータをわかりやすく示せるように配慮する必要があります。
表の作成については、バージョンによって大きく異なる部分があります。
ツールバーの
ボタンをクリックします。すると、次の画面が出てきます。
図1：表の挿入画面
今回は、3行3列の表を作ってみましょう。V9からは表にスタイルを適用することが可能となりましたが、今回は適用しないようにしますので、「表にスタイルを適用する」のチェックをはずしておきます。
そして、「最初の行を見出しセルにする」にチェックを入れます。
図2：表挿入後の状態
この時点でのテーブル部分のHTMLソースは以下のようになります。
<table border="1">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>では、セルに入力を行います。
| センター名 | ゲーム数 | アベレージ |
|---|---|---|
| ロードボウル | 30 | 158.0 |
| イーグルボウル | 6 | 135.5 |
と入力すると、th要素、td要素に入力した内容が入ります。HTMLソースでは以下のようになります。
<table border="1">
<tbody>
<tr>
<th>センター名</th>
<th>ゲーム数</th>
<th>アベレージ</th>
</tr>
<tr>
<td>ロードボウル</td>
<td>30</td>
<td>158.0</td>
</tr>
<tr>
<td>イーグルボウル</td>
<td>6</td>
<td>135.5</td>
</tr>
</tbody>
</table>行を追加したい場合は、ツールバーの
をクリックします。すると、現在カーソルのある行の下に新しい行が追加されます。HTMLソースの上では、tr要素と列数分のtd要素が追加されます。
ボタン右の▼をクリックした場合は、現在カーソルのある行の上下どちらに何行追加するのかを選択することが出来ます。
列を追加したい場合は、ツールバーの
をクリックします。すると、現在カーソルのある右に新しい列が追加されます。HTMLソースの上では、各行ごとにtd要素が１つずつ追加されます。
ボタン右の▼をクリックした場合は、現在カーソルのある列の左右どちらに何列追加するのかを選択することが出来ます。
表には表題もほしいですよね。表題をつけるには、table要素の属性変更画面を出します。
図3：table要素の属性変更画面
表題のところで、表示位置を選びます。選んだ部分に表題を入れるスペースが出来ます。上に表題を入れてみます。
| センター名 | ゲーム数 | アベレージ |
|---|---|---|
| ロードボウル | 30 | 158.0 |
| イーグルボウル | 6 | 135.5 |
HTMLソースでは以下のようになります。caption要素が追加されました。
<table border="1">
<caption>FUMINGのボウリングアベレージ</caption>
<tbody>
<tr>
<th>センター名</th>
<th>ゲーム数</th>
<th>アベレージ</th>
</tr>
<tr>
<td>ロードボウル</td>
<td>30</td>
<td>158.0</td>
</tr>
<tr>
<td>イーグルボウル</td>
<td>6</td>
<td>135.5</td>
</tr>
</tbody>
</table>図1の画面で、スタイル（デザイン1-A）を適用し、最初の行を見出しにして、3×3の表を挿入した直後は、以下のようになります。
図4：スタイルを適用して表を挿入した直後の状態
各セルに内容を入力して、表題をつけてみます。
| センター名 | ゲーム数 | アベレージ |
|---|---|---|
| ロードボウル | 30 | 158.0 |
| イーグルボウル | 6 | 135.5 |
HTMLソースは、以下のようになります。各セルにclassが設定されていますね。table要素にはidも設定されています。
ただ、class属性、id属性いずれも、ホームページ・ビルダー製であることがわかる「HBP」「hbp」という文字列が入ってきます。
<table border="1" cellspacing="0" cellpadding="2"
id="_HPB_TABLE_1_A_050105083206" class="hpb-cnt-tb1">
<caption>FUMINGのボウリングアベレージ</caption>
<tbody>
<tr>
<th class="hpb-cnt-tb-th1">センター名</th>
<th class="hpb-cnt-tb-th1">ゲーム数</th>
<th class="hpb-cnt-tb-th1">アベレージ</th>
</tr>
<tr>
<td class="hpb-cnt-tb-cell1">ロードボウル</td>
<td class="hpb-cnt-tb-cell2">30</td>
<td class="hpb-cnt-tb-cell2">158.0</td>
</tr>
<tr>
<td class="hpb-cnt-tb-cell1">イーグルボウル</td>
<td class="hpb-cnt-tb-cell2">6</td>
<td class="hpb-cnt-tb-cell2">135.5</td>
</tr>
</tbody>
</table>
（注：表示の都合で一部折り返しています）表にスタイルを適用した場合、HTMLと同じフォルダに外部CSSファイルが作成されます。
HTML内では、<link rel="stylesheet" href="table.css" type="text/css"
id="_HPB_TABLE_CSS_ID_">となります。
その上、table要素やlink要素のid属性の属性値の付け方が、HTMLの文法に反するものになっています。これはまずいです。
表を理解しないブラウザの場合、HTMLに記述してある順序で表示されていきます。table要素のsummary属性で表の構造を示しましょう。
summary属性は「属性の変更」画面から吐き出させることが出来ません。HTMLソース編集画面もしくは、ドキュメントアウトライナから挿入します。
| センター名 | ゲーム数 | アベレージ |
|---|---|---|
| ロードボウル | 30 | 158.0 |
| イーグルボウル | 6 | 135.5 |
<table border="1" summary="FUMINGのボウリングアベレージを示した表。
センター名、ゲーム数、アベレージの順にデータが示されている。">
<caption>FUMINGのボウリングアベレージ</caption>
<tbody>
<tr>
<th>センター名</th>
<th>ゲーム数</th>
<th>アベレージ</th>
</tr>
<tr>
<td>ロードボウル</td>
<td>30</td>
<td>158.0</td>
</tr>
<tr>
<td>イーグルボウル</td>
<td>6</td>
<td>135.5</td>
</tr>
</tbody>
</table>
（注：表示の都合でsummary要素の部分折り返しています）また、情報の構造を示すには、scape属性、header属性、axis属性を使用します。これらの属性も、HTMLソース編集画面で直接手打ちするか、ドキュメントアウトライナで挿入します。これらの属性に対応しているブラウザなら少しはわかりやすく伝わります。
実際の使い方については、The Web KANZAKI内の「セルの関係を示す属性」を参照して下さい。
リンクに関してはご自由にどうぞ。