mamohoのHP作成講座

mamohoのHP作成講座

表の背景色を設定しよう

● 表の背景色を指定しよう

テーブルに背景色を指定してみましょう
使い方によって レイアウトを綺麗に整理することができます私がこの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


© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: