HTMLとCSSを使用してテーブル行の色を設定する方法

1. CSSのクラスを使用する方法: HTMLコード:

   <table>
   <tr class="row-color1">
   <td>セル1</td>
   <td>セル2</td>
   </tr>
   <tr class="row-color2">
   <td>セル3</td>
   <td>セル4</td>
   </tr>
   </table>

CSSコード:

.row-color1 {
  background-color: lightblue;
}
.row-color2 {
  background-color: lightgray;
}

この方法では、CSSのクラスをテーブルの行に適用し、各行に異なる背景色を設定します。

2. CSSのnth-childセレクタを使用する方法: HTMLコード:

   <table>
   <tr>
   <td>セル1</td>
   <td>セル2</td>
   </tr>
   <tr>
   <td>セル3</td>
   <td>セル4</td>
   </tr>
   </table>

CSSコード:

tr:nth-child(odd) {
  background-color: lightblue;
}
tr:nth-child(even) {
  background-color: lightgray;
}

この方法では、CSSのnth-childセレクタを使用して、奇数番目の行と偶数番目の行に異なる背景色を設定します。

上記の方法を使用すると、テーブルの行の色を簡単に設定することができます。適宜、好みの色や他のスタイルを適用することも可能です。