<table>タグに関しては、様々な細かい設定が出来ます。
ｂｏｒｄｅｒというのは線の太さの設定だというところまでは、前回で書きました。
そして、下の表を見てください。中央寄せになっています。
一覧表 | 見出し１ | 見出し２ | 見出し３ |
項目１ | １１ | １２ | １３ |
項目２ | ２１ | ２２ | ２３ |
項目３ | ３１ | ３２ | ３３ |
このように中央寄せにするには、<div></div><p></p>のところでも出てきた、align="center"を使います。
また、右寄せにするには、align="right"を使います。
例によって百聞は一見にしかず。
こちらを見てください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr><td>１</td><td>２</td></tr>
</table>
<table border="2" align="center">
<tr><td>１</td><td>２</td></tr>
</table>
<table border="2" align="right">
<tr><td>１</td><td>２</td></tr>
</table>
</body>
</html>
|
これを実際に表示するとこんな感じとなります。
ところで、こんなふうに書いても同じ事ですよ。
上の物と全く同じ内容ですが、行を細かく変えただけです。
ブラウザで表示される結果は、全く同じです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr>
<td>１</td><td>２</td>
</tr>
</table>
<table border="2" align="center">
<tr>
<td>
１
</td>
<td>
２
</td>
</tr>
</table>
<table border="2" align="right">
<tr><td>１</td><td>２</td></tr>
</table>
</body>
</html>
|
◆
次に、線の色や、表の中の背景色をを指定する方法です。
線の色には、bordercolor
背景色には、bgcolor
を、使います。
これらは、テーブルタグに使用する属性です。テーブルタグの中にこのように書きます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2" bgcolor="#f0fff0" bordercolor="#008080">
<tr>
<td>
<div>線の太さは２</div>
</td>
<td>
<div>線の色は緑</div>
</td>
</tr>
<tr>
<td>
<div>背景の色は</div>
</td>
<td>
<div>薄い緑</div>
</td>
</tr>
</table>
</body>
</html>
|
<td></td>の中身を、さらに<div></div>で、囲んでもかまいせん。
実際に表示すると？
特定の枠内だけの背景色の指定もできます。
に指定すれば、その横１列すべての背景色。
に指定すれば、そこだけの背景色です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr bgcolor="#f8f8ff">
<td>この横一列は</td><td>こんな色</td>
</tr>
<tr bgcolor="#f0fff0">
<td>この横一列は</td><td>こんな色</td>
</tr>
</table>
<table border="2">
<tr>
<td bgcolor="#fffafa">ここは、こんな色</td><td bgcolor="#f8f8ff">ここは、こんな色</td>
</tr>
<tr>
<td bgcolor="#f5fffa">ここは、こんな色</td><td bgcolor="#fffff0">ここはこんな色</td>
</tr>
</table>
</body>
</html>
|
実際に表示
１２．ＨＴＭＬでホームページを作る。自分のＰＣにＨＰのファイルを作る
ＰＣ−ＰＡＲＫトップに戻る
心の話サイコロＴｏｗｎ！へ
|