表の作成

こづかい帳だとか、単価リストなど、二次元に表せるものは表を使うと 読み手に分かりやすく伝えることができる。表を記述するにはTABLE要素を利用する。

ここでも、TABLE要素の使い方を覚える前にHTML文書の骨格を先に作っておこう。 ファイル名は table.html とする。

C-x C-f
Find file: ~/public_html/table.html

あらかじめ作っておくHTML文書の骨格table.html

<html>
<head>
<title>Table Sample</title>
</head>

<body>
<h1>○○の表</h1>
  
</body>
</html>

TABLE要素の基本構成

もっとも簡単なTABLE要素は、内部にTR要素とTD要素を含む。

これを利用して簡単な表を作ってみよう。たとえば、次のような単純な表を 考えてみよう。

タラバガニ8本ヤドカリ類
ズワイガニ10本ズワイガニ類
花咲ガニ8本ヤドカリ類

ちいさい項目から見て行こう。横に並んでいる「タラバガニ」、「8本」、 「ヤドカリ類」はそれぞれ<td>〜</td>で括る。実際 に括ったものは次のようになる。

<td>タラバガニ</td><td>8本</td><td>ヤドカリ類</td>

この3項目全体が表の1行になるので、3つまとめて <tr>〜</tr>で括る。

<tr>
 <td>タラバガニ</td><td>8本</td><td>ヤドカリ類</td>
</tr>

上の例では3つの<td>〜</td> を1行に書いたが、これは1つの<td>〜</td> ごとに1行で書いても良い。

同様に、表の二行目と三行目も「項目を<td>〜 </td>で」、「行を<td>〜</td> で括ると次のようになる。

 <tr>
  <td>タラバガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
 <tr>
  <td>ズワイガニ</td><td>10本</td><td>ズワイガニ類</td>
 </tr>
 <tr>
  <td>花咲ガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>

最後に、表全体を<table>〜</table>タグで括っ て完成する。

<table>
 <tr>
  <td>タラバガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
 <tr>
  <td>ズワイガニ</td><td>10本</td><td>ズワイガニ類</td>
 </tr>
 <tr>
  <td>花咲ガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
</table>

もちろんこれは「表」だけの部分である。HTML文書全体は以下の通りになる。

完成したtable.html(1)

<html>
<head>
<title>Table Sample</title>
</head>

<body>
<h1>蟹の分類表</h1>

<table>
 <tr>
  <td>タラバガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
 <tr>
  <td>ズワイガニ</td><td>10本</td><td>ズワイガニ類</td>
 </tr>
 <tr>
  <td>花咲ガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
</table>

</body>
</html>

罫線

今完成した table.html を実際に表示してみよう。

http://roy.e.koeki-u.ac.jp/~自分の番号/table.html

予想に反して次のように表示されるはずである。

タラバガニ8本ヤドカリ類
ズワイガニ10本ズワイガニ類
花咲ガニ8本ヤドカリ類

通常、TABLE要素では(日本でいう)罫線は表示されない。これを表示するには <table> 要素に border 属性を指定する。

<table border="1">
("1"はいち)

table.htmlのtable要素は次のように 書き変わることになる。

<table border="1">
 <tr>
  <td>タラバガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
 <tr>
  <td>ズワイガニ</td><td>10本</td><td>ズワイガニ類</td>
 </tr>
 <tr>
  <td>花咲ガニ</td><td>8本</td><td>ヤドカリ類</td>
 </tr>
</table>

このように、開始タグの直後に付加する「単語="値"」のよう な形式の指定を属性指定という。この場合、table要素 のborder属性を1に指定している。要するに、border属性とは表の各項目を区切 る枠の太さを意味していて、その枠の太さを1にしていることになる。結果とし て表は次のようになる。

タラバガニ8本ヤドカリ類
ズワイガニ10本ズワイガニ類
花咲ガニ8本ヤドカリ類

もう一度完成した table.html を実際に表示してみよう。

http://roy.e.koeki-u.ac.jp/~自分の番号/table.html

見出し項目

タラバガニ8本ヤドカリ類
ズワイガニ10本ズワイガニ類
花咲ガニ8本ヤドカリ類

という表では、各列が何を意味するものかはっきりしない。通常表の一番上 の行には各項目の説明を入れて、

カニの種類足の本数分類
タラバガニ8本ヤドカリ類
ズワイガニ10本ズワイガニ類
花咲ガニ8本ヤドカリ類

このような、表の見出し項目を意味する要素としてthを 利用する。一番上の行は

 <tr>
  <th>カニの種類</th><th>足の本数</th><th>分類</th>
 </tr>

のように、tdと同じ使い方でthを利用する。 こうすることでそこが見出し項目であることが分かる。

練習問題

自分の取っている授業の時間割をtable要素を利用して作成せよ。 ファイル名はtable.htmlとする。翌週の木曜日を締切とする。

情報リテラシー