MB-Support

パソコン初心者のサポートページ

表(テーブル)の背景色を指定する方法 table bgcolor

 表の背景色を指定するには <table> の中に bgcolor="カーラーコード・カラーネーム" を書きます。<table> 内で指定が無い時、背景色は白になります。



表の背景色を指定する bgcolor="カラーコード or カラーネーム"

表の背景色を指定するには <table> タグに bgcolor="カーラーコード・カラーネーム" を入力します。 <table> タグで指定が無い時、背景色は透明になります。 カーラーコード


bgcolor="red" の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" bgcolor="red">
  <tr>
   <td width="200">ホームズの思い出</td> 
   <td width="200">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セルの背景色を指定する bgcolor="カラーコード or カラーネーム"

セルの背景色を指定するには、<td> タグに bgcolor="カーラーコード・カラーネーム" を入力します。 <td> タグで指定が無い時、背景色は透明になります。

bgcolor="red" の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td width="200" bgcolor="red">ホームズの思い出</td> 
   <td width="200">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

bgcolor="red" と bgcolor="#FFFF55" の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td width="200" bgcolor="red">ホームズの思い出</td> 
   <td width="200" bgcolor="#FFFF55">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

さらに table の背景色を黒に設定した場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" bgcolor="black">
  <tr>
   <td width="100" bgcolor="red">ホームズの思い出</td> 
   <td width="200" bgcolor="#FFFF55">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


エクセル風なテーブル

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="270">
  <tr bgcolor="#DFDFDF">
   <td width="30"> </td>
   <th width="60">A</th>
   <th width="60">B</th>
   <th width="60">C</th>
   <th width="60">D</th>
  </tr>
  <tr>
   <th width="30" bgcolor="#DFDFDF"><center>1</th>
   <td width="60"> </td>
   <td width="60"> </td>
   <td width="60"> </td>
   <td width="60"> </td>
  </tr>
  <tr>
   <th width="30" bgcolor="#DFDFDF"><center>2</th>
   <td width="60"> </td>
   <td width="60"> </td>
   <td width="60"> </td>
   <td width="60"> </td>
  </tr>
  <tr>
   <th width="30" bgcolor="#DFDFDF">3</th>
   <td width="60"> </td>
   <td width="60"> </td>
   <td width="60"> </td>
   <td width="60"> </td>
  </tr>
 </table>
</body>
</html>

ブラウザ




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項