330758 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

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.