1. Home
  2. HTMLタグ
  3. テーブルタグ
  4. 表の背景色を指定する

表の背景色を指定する


<table bgcolor=""></table> <tr bgcolor=""></tr> <td bgcolor=""></td>


table要素tr要素td要素th要素bgcolor="" を追加すると、表の背景色を指定できます。



<table bgcolor="#cccccc"></table>


■表全体の背景色を指定する場合

<table bgcolor="#cccccc"></table>

table要素bgcolor="" を追加します。

■行単位で背景色を指定する場合

<tr bgcolor="#cccccc"></tr>

tr要素bgcolor="" を追加します。

■セル単位で背景色を指定する場合

<td bgcolor="#cccccc"></td>

td要素(th要素)bgcolor="" を追加します。


属性 説明
bgcolor="" 背景色を指定

上記の属性は、HTML 4.01では非推奨とされています。(Strict DTDでは使用できません)

色の指定は、ハッシュ( # )で始まる6桁のカラーコードか、redやgreen、whiteといったカラーネームで行います。詳細についてはカラーチャートのページをご覧ください。

メモ

この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例

■表全体の背景色を指定した例


<table border="3" bgcolor="#e3f0fb">
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3
データセル3-1 データセル3-2 データセル3-3

■行単位で背景色を指定した例


<table border="3">
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr bgcolor="#ffffc0">
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3
データセル3-1 データセル3-2 データセル3-3

■セル単位で背景色を指定した例


<table border="3">
<tr>
<td>データセル1-1</td>
<td bgcolor="#c0ffc0">データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td bgcolor="#c0ffc0">データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td bgcolor="#c0ffc0">データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3
データセル3-1 データセル3-2 データセル3-3

■上記を全て指定した例


<table border="3" bgcolor="#e3f0fb">
<tr>
<td>データセル1-1</td>
<td bgcolor="#c0ffc0">データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr bgcolor="#ffffc0">
<td>データセル2-1</td>
<td bgcolor="#c0ffc0">データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td bgcolor="#c0ffc0">データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>

表示例

データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3
データセル3-1 データセル3-2 データセル3-3

テーブルタグ

ページの先頭へ