HTML & CSS - テーブルの背景色を指定する

テーブルの背景色を指定する

テーブルの背景色を指定するには、CSS の background プロパティで定義します。background プロパティには、背景色や背景画像などを指定することができます。

<table>
  <caption> 表のタイトル </caption>
  
  <thead>
    <tr>
      <th> 見出しセル </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> データセル </td>
    </tr>
  </tbody>
  
</table>
テーブルの背景色を指定する - HTML
/* テーブル全体の背景色を指定する場合 */
table{
    background: #e4f5f7;
}
テーブルの背景色を指定する - CSS

背景に画像を指定する場合は、CSS を以下のように記述します。

/* テーブル全体の背景画像を指定する場合 */
table{
    background: url("../img/bg.png");
}
テーブルの背景色を指定する - CSS

見出し行にだけ背景色を指定する場合は、CSS を以下のように記述します。

/* 見出し行だけ背景色を指定する場合 */
thead{
    background: #e4f5f7;
}
テーブルの背景色を指定する - CSS

テーブルの背景色を奇数行と偶数行で塗り分けたい場合は、CSS を以下のように記述します。

/* 偶数行だけ背景色を指定する場合 */
tbody tr:nth-child(2n){
    background: #ecfafc;
}
テーブルの背景色を指定する - CSS

関連記事