ウェブ木箱：HTML講座-テーブル(表)の背景色を指定しよう

☆テーブル(表)の背景色を指定しよう - クイックガイド

腹減り日誌♪ - donguri browser　

日数	目標	結果
１７日目	３食	１０食・・・
１８日目	１食	７食・・・


		１．	背景色を指定する bgcolor


		２．	枠線を消してみよう

←前回『テーブル(表)を作ってみよう』へ

次回『テーブル(表)の大きさを指定しよう』へ→

次にテーブルの各部の背景色の指定の仕方を紹介するよ。今まで紹介した範囲内で言えば、テーブル全体の背景色を指定する事も出来るし行毎やセル毎の指定をする事ができるよ。

属性値は色の指定なのでRGB値を使うよ。テーブルのいずれの個所の指定をするにもこの属性を使うよ。ではテーブルの各部のタグ(<table>,<tr>,<td>)にこの属性をつけた時の違いを見てみよう。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
 
<!--表全体の背景色を指定-->
<table border="1" bgcolor="#ccccff">
 <tr>
  <td>データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
 
<!--行毎の背景色を指定-->
<table border="1">
 <tr bgcolor="#ccccff">
  <td>データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
 
<!--セル毎の背景色を指定-->
<table border="1">
 <tr>
  <td bgcolor="#ccccff">データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
 
</body>
</html>


		<!--から-->の間はコメントだから表示されないよ。

腹減り日誌♪ -

データ１	データ２	データ３
データ４	データ５	データ６

データ１	データ２	データ３
データ４	データ５	データ６

データ１	データ２	データ３
データ４	データ５	データ６


		違いを見比べてみてね。表示はブラウザによっても若干違うよ。

ブラウザでの表示はこちら(別ウィンドウ)

ここまでではわかりやすいようにテーブルの枠線を表示させてきたけどいろいろ応用しようと思うと結構この枠線ってのが邪魔になることもあるよね。ここでは枠線を表示させない方法を紹介するよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<table border="0">
 <tr>
  <td bgcolor="#ccccff">データ</td>
 </tr>
</table>
</body>
</html>


		背景色も同時に指定してるよ。

腹減り日誌♪ -

データ


		これだけならどうってこともないけどこれを応用するといろんなことが出来るよ。

ブラウザでの表示はこちら(別ウィンドウ)

	次は表の大きさの指定だよ。次へ→
	前回は表を作るタグの紹介だったね。 ←前へ

	テーブル編－２
	HTML講座第１９回