テーブルを使ってみましょう。(9)

これまでは単純な表作成でした。

<table border="1">
<tr>
<td width="100">1行目1列</td>
<td width="100">1行目2列</td>
<td width="100">1行目3列</td>
</tr>
<tr>
<td width="100">2行目1列</td>
<td width="100">2行目2列</td>
<td width="100">2行目3列</td>
</tr>
<tr>
<td width="100">3行目1列</td>
<td width="100">3行目2列</td>
<td width="100">3行目3列</td>
</tr>
</table>

こうなります。

1行目1列	1行目2列	1行目3列
2行目1列	2行目2列	2行目3列
3行目1列	3行目2列	3行目3列

今回は見出しセルを入れてみましょう。

この「<td>～</td>」を「<th>～</th>」に置き換えることで、

多くのブラウザではセルの中身が太字・中央寄せとなります。

（ブラウザによっては中央寄せにならない場合があります。）



(A)1行目を見出しに置き換えます。

<table border="1">
<tr>
<th width="100">1行目1列</th>
<th width="100">1行目2列</th>
<th width="100">1行目3列</th>
</tr>
<tr>
<td width="100">2行目1列</td>
<td width="100">2行目2列</td>
<td width="100">2行目3列</td>
</tr>
<tr>
<td width="100">3行目1列</td>
<td width="100">3行目2列</td>
<td width="100">3行目3列</td>
</tr>
</table>

こうなります。

1行目1列	1行目2列	1行目3列
2行目1列	2行目2列	2行目3列
3行目1列	3行目2列	3行目3列

(B)1列目を見出しに置き換えます。

<table border="1">
<tr>
<th width="100">1行目1列</th>
<td width="100">1行目2列</td>
<td width="100">1行目3列</td>
</tr>
<tr>
<th width="100">2行目1列</th>
<td width="100">2行目2列</td>
<td width="100">2行目3列</td>
</tr>
<tr>
<th width="100">3行目1列</th>
<td width="100">3行目2列</td>
<td width="100">3行目3列</td>
</tr>
</table>

こうなります。

1行目1列	1行目2列	1行目3列
2行目1列	2行目2列	2行目3列
3行目1列	3行目2列	3行目3列

(C)縦・横それぞれに見出しを表示させます。1行目1列を空欄にするには

<br>（改行）または&nbsp;（半角スペース）を入れておきます。

<table border="1">
<tr>
<th width="100"><br></th>
<th width="100">1行目2列</th>
<th width="100">1行目3列</th>
</tr>
<tr>
<th width="100">2行目1列</th>
<td width="100">2行目2列</td>
<td width="100">2行目3列</td>
</tr>
<tr>
<th width="100">3行目1列</th>
<td width="100">3行目2列</td>
<td width="100">3行目3列</td>
</tr>
</table>

こうなります。

	1行目2列	1行目3列
2行目1列	2行目2列	2行目3列
3行目1列	3行目2列	3行目3列

「テーブルを使ってみましょう。」は、ここでひとまずお休みします。

次回再開時には、少し高度なテクニックを織り交ぜて行きますので、

テーブルを身につけようと考えている方は、ここまでを復習しておいて下さい。