表の背景色を設定しよう
● 表の背景色を指定しよう
テーブルに背景色を指定してみましょう
使い方によって レイアウトを綺麗に整理することができます
私がこのHPで HTMLタグの説明に使っている緑色の部分も
この方法を使って2います
では さっそくやってみましょう
まず テーブル全体に背景色を指定するには
<table bgcolor="色"> で 指定します
<table bodor="1" bgcolor="#ffff99" width="350">
<tr>
<td align="center">テーブル1</td>
<td align="center">テーブル2</td>
<td align="center">テーブル3</td>
</tr>
<tr>
<td align="center">テーブル4</td>
<td align="center">テーブル5</td>
<td align="center">テーブル6</td>
</tr>
</table> |
すると 下のようになります
テーブル1 |
テーブル2 |
テーブル3 |
テーブル4 |
テーブル5 |
テーブル6 |
次に 上の横一列だけ 背景色を指定してみます
<tr bgcolor="色" で 横一列の背景色を指定することができます
<table bodor="1" width="350">
<tr bgcolor="#ffff99">
<td align="center">テーブル1</td>
<td align="center">テーブル2</td>
<td align="center">テーブル3</td>
</tr>
<tr>
<td align="center">テーブル4</td>
<td align="center">テーブル5</td>
<td align="center">テーブル6</td>
</tr>
</table> |
すると 下のようになります
テーブル1 |
テーブル2 |
テーブル3 |
テーブル4 |
テーブル5 |
テーブル6 |
では 前回の セルの連結した状態ではどうなるでしょうか?
テーブル1と テーブル4を連結した場合を考えてみましょう
<tr> ~ <tr> で 囲まれた部分を色指定してますので
こんな感じになります
テーブル1 |
テーブル2 |
テーブル3 |
テーブル |
テーブル5 |
次は セルに背景色を指定してみましょう
<td bgcolor="色"> で セルに色を指定できます
つまり それぞれのセルを色分けすることもできます
<table bodor="1" width="350">
<tr>
<td align="center" bgcolor="#ffff99">テーブル1</td>
<td align="center">テーブル2</td>
<td align="center" bgcolor="#ffff99">テーブル3</td>
</tr>
<tr>
<td align="center">テーブル4</td>
<td align="center" bgcolor="#ffff99">テーブル5</td>
<td align="center">テーブル6</td>
</tr>
</table> |
すると 下のようになります
テーブル1 |
テーブル2 |
テーブル3 |
テーブル4 |
テーブル5 |
テーブル6 |