行数列数が多い表を眺めるとき、どの行のデータを確認しているかわかりにくくなることがあります。
人の目は横方向に視線を動かしながらデータを追うため、行の区切りが視覚的に明示されていないと、途中で別の行に迷い込んでしまいます。

この問題を解決するシンプルな方法が ストライプ（縞模様）デザイン です。
一行おきに背景色を変えるだけで、同じ行の情報を対応させやすくなります。

---

実装

HTML構造

<table>
  <thead>
    <tr>
      <th>項目</th>
      <th>値</th>
      <th>備考</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>国産</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>80円</td>
      <td>輸入</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>60円</td>
      <td>国産</td>
    </tr>
    <tr>
      <td>ぶどう</td>
      <td>200円</td>
      <td>国産</td>
    </tr>
    <tr>
      <td>キウイ</td>
      <td>90円</td>
      <td>輸入</td>
    </tr>
  </tbody>
</table>

CSS

/* 表全体の上下に罫線 */
table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

/* ヘッダーとコンテンツの間に罫線 */
th {
    border-bottom: 2px solid #000;
    padding: 0.5em 0.75em;
    text-align: left;
    background-color: #ffffff;
}

td {
    padding: 0.5em 0.75em;
}

/* ストライプ：奇数行に色をつける */
tbody tr:nth-child(odd) td {
    background-color: #B2CFE7;
}

tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

結果

上記のCSSを適用すると、以下のような表になります。

項目	値	備考
りんご	100円	国産
バナナ	80円	輸入
みかん	60円	国産
ぶどう	200円	国産
キウイ	90円	輸入

ポイント解説

border-collapse: collapse
table と各セルの境界線を結合します。これがないと罫線が二重になります。

nth-child(odd) / nth-child(even)
CSSの疑似クラスで、奇数・偶数番目の要素を選択できます。
tbody の中の tr に限定することで、ヘッダー行はストライプの対象外になります。

---

デザインのコツ

ストライプに使う色は 薄め にするのがポイントです。
濃い色を使うと文字が読みにくくなり、ストライプ自体が主張しすぎてしまいます。
上のサンプルで使っている #B2CFE7（薄い水色）のように、白と並べたときに自然に馴染む色が適しています。

また、罫線は 表の上下とヘッダー下 だけに絞るとすっきりします。
セルひとつひとつを格子状の罫線で囲むと情報量が増えて読みにくくなるため、ストライプで行を区別できている場合は不要です。