行の関係を意識したシンプルなテーブル

シンプルなテーブルです。
ごちゃごちゃさせても見にくいだけなので、料金表とか行ごとが重要になる場合はこんなものはいかがでしょうか。

CSS

.cmp_table_visual2 {
  border: 1px solid #ddd;
  width: 100%;
  text-align: left;
}
.cmp_table_visual2 td, .cmp_table_visual2 th {
  padding: 15px 15px;
}
.cmp_table_visual2 thead tr {
  background-color: #91C16D;
}
.cmp_table_visual2 thead tr th {
  color: #fff;
  text-align: center;
}
.cmp_table_visual2 tfoot {
  border-top: 1px solid #ddd;
}
.cmp_table_visual2 tbody tr th {
  font-weight: bold;
}
.cmp_table_visual2 tbody tr:nth-of-type(2n) {
  background: #f5f5f5;
}

HTML

<table class="cmp_table_visual2">
    <thead>
        <tr><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th><th>ヘッダー</th></tr>
    </thead>
    <tfoot>
        <tr><td>フッター</td><td>フッター</td><td>フッター</td><td>フッター</td><td>フッター</td></tr>
    </tfoot>
    <tbody>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
        <tr><th>見出し</th><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
    </tbody>
</table>

結果