HTML でテーブル全体に色を付けるにはどうすればいいですか?

HTMLでテーブル全体に色を付ける方法

HTMLでテーブル全体の背景色を設定するには、カスケーディングスタイルシート（CSS）を使用します。具体的には、background-colorプロパティを使用して背景色を定義します。このプロパティは、テーブル全体、行、または単一のセルに適用できます。

テーブル全体に背景色を設定する

テーブル全体に背景色を設定するには、table要素にbackground-colorプロパティを適用します。次の例では、テーブル全体の背景色をライトグレーに設定しています。


<table style="background-color: lightgray;">
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
    </tr>
    <tr>
      <td>セル3</td>
      <td>セル4</td>
    </tr>
  </tbody>
</table>

行またはセルに背景色を設定する

特定の行またはセルに背景色を設定するには、tr要素またはtd要素にbackground-colorプロパティを適用します。次の例では、最初の行の背景色をライトブルーに、2番目のセルの背景色をライトイエローに設定しています。


<table>
  <thead>
    <tr style="background-color: lightblue;">
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル1</td>
      <td style="background-color: lightyellow;">セル2</td>
    </tr>
    <tr>
      <td>セル3</td>
      <td>セル4</td>
    </tr>
  </tbody>
</table>

関連する質問と回答

Q1: テーブルの枠線に色を付けるにはどうすればよいですか？

A1: borderプロパティとborder-colorプロパティを使用して、テーブルの枠線に色を付けることができます。例えば、<table style="border: 1px solid black;">のように指定します。

Q2: 複数のCSSプロパティをテーブルに適用するにはどうすればよいですか？

A2: セミコロン（;）で区切って、複数のCSSプロパティを指定できます。例えば、<table style="background-color: lightgray; border: 1px solid black;">のように指定します。

Q3: CSSを外部ファイルに記述して、HTMLファイルから参照するにはどうすればよいですか？

A3: <link>要素を使用して、外部CSSファイルを参照できます。例えば、<link rel="stylesheet" href="style.css">のように指定します。style.cssファイルにCSSの定義を記述します。