表を作ってみよう

表を用いると、テキストや画像、別の表などのデータを、行と列に配置することができます。

ただし、表の作成方法は、理解して自由に構成できるレベルになるまで非常に大変です。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、単に文書内容を整形する目的だけで表を用いるべきでないとしています。

文書の整形には表ではなくスタイルシートの利用が推奨されています。

表を構成する諸要素

表は「表」「行」「セル」という3つの基本的な要素から構成されます。

これをHTMLで記述してみましょう。次のようにエディタに入力して下さい。
ファイル名：table1.html

<html>
<head>
<title>動物分類表</title>
</head>
<body>

<table>
 <tr>
  <td>動物</td>
  <td>哺乳類</td>
  <td>鳥類</td>
 </tr>
 <tr>
  <td>動物名</td>
  <td>コウモリ</td>
  <td>ペンギン</td>
 </tr>
</table>

</body>
</html>

まず、表作成には<table></table>タグで囲みます。

tr 要素は、表の行を指定します。また、td 要素はデータを含むセルを定めます。このセルは、データを含まない「空」の状態でも構いません。

図にすると次のようになります。

まとめると次のようになります。

要素	説明
table	表形式であることを宣言する
tr	表の行を指定する
td	表のデータが入ったセルを指定する

以上のことを頭に入れておいて、ブラウザでどのように表示されるか見てみましょう。

上図では「枠線」が存在せず、想像していた表と少し違うと思った人もいることでしょう。

より表らしくレンダリングさせる

上の例に「枠線」および、見出し情報を追加してより読みやすい表を作成してみましょう。

再度、次のようにエディタに入力してみましょう。
ファイル名：table2.html

<html>
<head>
<title>動物分類表</title>
</head>
<body>

<table border="1">
 <thead>
  <tr>
   <th>動物</th>
   <th>哺乳類</th>
   <th>鳥類</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>動物名</th>
   <td>コウモリ</td>
   <td>ペンギン</td>
  </tr>
 </tbody>
</table>

</body>
</html>

表のセルは、「見出し情報」(th 要素)か、「データ」(td 要素)の、どちらかを用いることができます。多くのブラウザでは「見出し情報」は強調のために「太字」で表示されます。

また、ヘッダ(見出し)部分、ボディ(内容)部分のグループを定義するために thead 要素、 tbody 要素を用います。

要素	説明
thead	表のヘッダ部分であることを宣言する
tbody	表の内容部分であることを宣言する
th	表のセルの見出しを指定する

thead 要素、 tbody 要素を用いることで、今後は、ヘッダとフッタを固定表示したままボディ部分のみをスクロールさせることが可能になるブラウザも登場するようですが、今のところ表示に変化はありません。

「枠線」を加えるには table 要素に boder 属性を追加します。

table属性	説明
border="数字"	表全体を囲う枠線の太さを指定する

以上のことを頭に入れておいて、ブラウザでどのように表示されるか見てみましょう。

「枠線」および、見出し情報を追加されたため、より表らしく見えると思います。

表を作ってみよう