もくじ

テーブル

テーブルの用途

テーブルは表のことです。

tableをページのレイアウトのために使うことは避けます。レイアウトはCSSを使っておこないます。昔はブラウザの能力が低かったので table を使うことも多かったのですが、過去のものになりました。

もちろん内容的に表の構成をしているものは積極的に table で表現してかまいません。

ここでは表の基本的な構造を理解します。

普通の表

table 内のデータの並べ方

例えば次のような表を考えます。

動物 鳴き声 好物
いぬ わんわん ほね
ねこ にゃー こたつ
うま ひひーん にんじん

これを実現するためのデータの並べ方です。

<table>
<tr><td>動物</td><td>鳴き声 </td><td>好物 </td></tr>
<tr><td>いぬ</td><td>わんわん</td><td>ほね </td></tr>
<tr><td>ねこ</td><td>にゃー </td><td>こたつ</td></tr>
<tr><td>うま</td><td>ひひーん</td><td>にんじん</td></tr>
</table>

全体を table タグで挟み、行ごとに tr タグで挟み、項目を td タグで挟みます。tr は table row の略。td は table data の略です。

table はそのままでは罫線が入りません。スタイルシートで td のボーダーとして指定します。

もちろん次のように並べてもかまいません。項目の足りない行があると表示が乱れます。そうならないように、状況に応じてわかりやすく並べる方がいいでしょう。

<table>
<tr>
<td>動物</td>
<td>鳴き声</td>
<td>好物</td>
</tr>
<tr>
<td>いぬ</td>
<td>わんわん</td>
<td>ほね</td>
</tr>
<tr>
<td>ねこ</td>
<td>にゃー</td>
<td>こたつ</td>
</tr>
<tr>
<td>うま</td>
<td>ひひーん</td>
<td>にんじん</td>
</tr>
</table>

罫線の引き方

ブラウザにもよりますが、普通罫線はなしになります。

最低限の指定の罫線

最低限の指定で線を引くには td に対して border を指定します。

動物鳴き声 好物 
いぬわんわんほね 
ねこにゃー こたつ
うまひひーんにんじん

線の色や太さは好みで指定してかまいません。

td{
  border:solid 1px #cccccc;
  }

昔の罫線

デフォルトで隙間があります。理由はわかりませんがスタイルシートがなかった時代からこのとおりでした。昔の罫線をスタイルシートで再現すると次のようになります。

動物鳴き声 好物 
いぬわんわんほね 
ねこにゃー こたつ
うまひひーんにんじん

tableの罫線は全体を囲む罫線です。outset,inset は罫線の種類です。

table{
  border:outset 2px #000000;
  }
td{
  border:inset 1px #000000;
  }

隙間なし罫線

td 間の隙間を無くするには、

動物鳴き声 好物 
いぬわんわんほね 
ねこにゃー こたつ
うまひひーんにんじん

table に border-collapse:collapse;を指定します。collapse は潰れるという意味。分けるのは border-collapse:separate;です。

table{
  border-collapse:collapse;
}
td{
  border:solid 1px #999999;
}

隙間なし罫線で周りがちょっと太い

周りがちょっと太いのも締まった感じになります。

動物鳴き声 好物 
いぬわんわんほね 
ねこにゃー こたつ
うまひひーんにんじん

table に 太めのborderを指定します。

table{
  border-collapse:collapse;
  border:solid 3px #999999;
}
td{
  border:solid 1px #999999;
}

隙間を利用して背景色を使う

デフォルトで隙間があるので、線の代わりに背景に色をつける方法もありますが、印刷する場合に背景色を印刷しない場合があるので同色の罫線を入れることをお勧めします。

動物鳴き声 好物 
いぬわんわんほね 
ねこにゃー こたつ
うまひひーんにんじん
td{
  background-color:#00cccc;
  border:solid 1px #00cccc;
  }

paddingも使う

背景色と文字の間に余裕をもたせるには、paddingが使えます。

動物鳴き声 好物 
いぬわんわんほね 
ねこにゃー こたつ
うまひひーんにんじん
td{
  background-color:#00cccc;
  padding:2px;
  }

table のページ内のレイアウト

table は h1 や p と同様にブラウザのウィンドウ内に四角い領域を確保して表示されます。しかしその振る舞いは微妙に違います。

左寄せにしてマージンをとるのは簡単です。CSSで margin を指定します。ただし、divやpでは左右のマージンを10%にすれば間の80%が幅になりますが、tableの場合は幅が内部のデータの幅にあわせられます。

tableの横幅のちがい

上記のtableとpには次のようにスタイルを指定しています。

table{
  margin:1% 10% 1% 10%;
  border:solid 1px red;
  }
p{
  margin:1% 10% 1% 10%;
  border:solid 1px #aa00ff;
  }

課題 ファイル名 table.html

上記のような表を含むページを作ってください。表の内容はなんでもかまいません。行と項目の関係を理解するために、行数と列数(1行内の項目数)は例と同じにせず、多少増やしてください。

もちろん、目次からのリンク、目次へ戻るリンクをつけてください。

できあがりのファイルの様子(html5)

<!DOCTYPE html>
<html>

<head> 
<meta charset="utf-8">
<title>テーブル</title>
<style type="text/css">
td {
    border :solid 1px #00cccc;
}

</style>
</head>

<body>
<p><a href="index.html">もくじ</a></p>
<h1>テーブル</h1>

<!-- ここにテーブルを入れる -->

</body>
</html>