ホーム > HTML講座 > HTML編 > 第8章 表を使ってみる

第8章 表を使ってみる

登録タグ: HTML タグ


今回は表(「<table>タグ」)を使ってみたいと思います。
表は1つの大きな表の枠の中に、いくつかのセル(小さな表)(今回は1つだけですが)が集まった状態になっています。

まずは表の基本形の紹介です。

<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」の両方とも、0以上の数字を入れることが出来るので、ぜひ色々試してみて下さい。
もちろん、両方を使うこともできますよ。

次回は、表のタグと、複数のセルを使用したい場合のやり方を説明したいと思います。

← 前へ | 次へ →


カテゴリー:HTML編
2011/09/11 08:31:45 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク