CSSを使用したストライプ状のテーブルの作成方法

方法1: nth-child() 擬似クラスを使用する方法

table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

この方法では、偶数番目の行に背景色を適用しています。

方法2: nth-of-type() 擬似クラスを使用する方法

table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-of-type(even) {
  background-color: #f2f2f2;
}

この方法も、偶数番目の行に背景色を適用しますが、他の要素も考慮して行を数えます。

方法3: class を使用する方法

table {
  width: 100%;
  border-collapse: collapse;
}
.striped {
  background-color: #f2f2f2;
}

この方法では、ストライプ状の背景色を適用したい行に対して、class="striped" を指定します。

これらの方法を使用することで、ストライプ状のテーブルを作成することができます。適切な方法を選んで、デザインに応じたストライプ状のテーブルを実装してみてください。

以上が、CSSを使用してストライプ状のテーブルを作成する方法のいくつかです。