タイトル画像
サイトタイトル画像

表を作ってみよう

表を作ってみよう

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

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

【注意】
「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 要素はデータを含むセルを定めます。この セルは、データを含まない「空」の状態でも構いません。

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

tdを用いたテーブル

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

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

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

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="数字"表全体を囲う枠線の太さを指定する

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

thを用いたテーブル

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

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2000/08/10)