テーブルヘッダーに色を付けるにはどうすればいいですか?

HTML テーブルヘッダーの色付け方法

この記事では、HTML の <th> タグを使用して、テーブルヘッダーに色を付ける方法について説明します。

bgcolor 属性

<th> タグの bgcolor 属性は、テーブルヘッダーセルの背景色を設定するために使用されます。色の指定には、カラーネーム、16 進数コード、RGB 値を使用できます。

色の指定方法

カラーネーム: 英語の色名を使用して色を指定できます。例: red, green, blue
16 進数コード: # 記号の後に、赤、緑、青の成分をそれぞれ 00 から FF の範囲で指定します。例: #FF0000 (赤), #00FF00 (緑), #0000FF (青)
RGB 値: rgb(red, green, blue) の形式で、赤、緑、青の成分をそれぞれ 0 から 255 の範囲で指定します。例: rgb(255, 0, 0) (赤), rgb(0, 255, 0) (緑), rgb(0, 0, 255) (青)

例

下記の例では、bgcolor 属性を使用して、テーブルヘッダーの背景色を赤、緑、青に設定しています。


<table border="1">
  <tr>
    <th bgcolor="red">商品名</th>
    <th bgcolor="green">価格</th>
    <th bgcolor="blue">在庫数</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>50</td>
  </tr>
</table>

上記のコードを実行すると、以下のようなテーブルが表示されます。

商品名	価格	在庫数
りんご	100円	50

Q&A

Q1: bgcolor 属性は非推奨とされていますが、他に方法がありますか？

A1: はい、bgcolor 属性は非推奨となっており、代わりに CSS を使用することをお勧めします。CSS を使用することで、より柔軟にテーブルのスタイルを制御できます。

Q2: CSS を使用してテーブルヘッダーに色を付けるにはどうすればよいですか？

A2: th 要素に対して background-color プロパティを設定することで、テーブルヘッダーに色を付けることができます。

css th { background-color: lightblue; }

Q3: 複数のテーブルヘッダーに異なる色を付けるにはどうすればよいですか？

A3: 各 <th> 要素に個別にクラスを割り当て、それぞれのクラスに対して background-color プロパティを設定することで、複数のテーブルヘッダーに異なる色を付けることができます。

```css .header-1 { background-color: lightblue; }

.header-2 { background-color: lightgreen; } ```

```html

商品名	価格
りんご	100円

```