第8章 表を使ってみる
今回は表（「<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 17:31:45 更新