 
第８章 表を使ってみる
今回は表（「<table>タグ」）を使ってみたいと思います。
表は１つの大きな表の枠の中に、いくつかのセル（小さな表）（今回は１つだけですが）が集まった状態になっています。
まずは表の基本形の紹介です。
<html>
<head>
<title>表を使ってみる</title>
</head>
<body>
<table>
<tr>
<td>これは表です</td>
</tr>
</table>
</body>
</html>
これをHTMLファイルとして保存して、そのあと、そのファイルを開いてみます。
結果はどうなりましたか？
「これは表です」と表示されただけで、特に変化は無かったと思います。
なぜそのようになったのかというと、表の「枠」を表示させなかったからです。
では、それについて説明していきます。
枠を表示させるための要素には、「cellspacing」と「border」があります。
どちらも枠を表示させることが出来ますが、微妙に違います。
またまた「百聞は一見にしかず」ということで、両者を比べてみて下さい。
<html>
<head>
<title>「cellspacing」を使ってみる</title>
</head>
<body>
<table cellspacing="1">
<tr>
<td>これは「cellspacing」です</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>「border」を使ってみる</title>
</head>
<body>
<table border="1">
<tr>
<td>これは「border」です</td>
</tr>
</table>
</body>
</html>
「cellspacing」は何も表示されていません。「border」は、枠が表示されました。
なぜ「cellspacing」は表示されないかというと、表示されていないわけではないからです。
簡単に説明すると、本当は白い枠で表示されています。
「border」の表を見て下さい。灰色で表示されています。
実は、「border」で表示させた枠が「灰色の枠」で、「cellspacing」で表示させた枠が灰色の枠の中にある「白い枠」なのです。
ちなみに、「border」で表示させた枠の色を変更することは出来ませんが、「cellspacing」で表示させた枠の色を変更することは出来ます。
では実際にやってみます。
<html>
<head>
<title>「cellspacing」を使ってみる</title>
</head>
<body>
<table bgcolor="#FF00FF" cellspacing="1">
<tr>
<td>これは「cellspacing」です</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>「border」を使ってみる</title>
</head>
<body>
<table bgcolor="#FF00FF" border="1">
<tr>
<td>これは「border」です</td>
</tr>
</table>
</body>
</html>
表の枠はもとより、表の内部まで色が変わってしまいました。
これではいけないので、表のセルの背景色を白色に変更して、枠の色だけが変わるようにします。
では実際にやってみます。
<html>
<head>
<title>「cellspacing」を使ってみる</title>
</head>
<body>
<table bgcolor="#FF00FF" cellspacing="1">
<tbody>
<tr>
<td bgcolor="#FFFFFF">これは「cellspacing」です</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<title>「border」を使ってみる</title>
</head>
<body>
<table bgcolor="#FF00FF" border="1">
<tbody>
<tr>
<td bgcolor="#FFFFFF">これは「border」です</td>
</tr>
</tbody>
</table>
</body>
</html>
ちなみに、「cellspacing」と「border」の両方とも、０以上の数字を入れることが出来るので、ぜひ色々試してみて下さい。
もちろん、両方を使うこともできますよ。
次回は、表のタグと、複数のセルを使用したい場合のやり方を説明したいと思います。 |
