１行おきに色を変えた表をつくる

情報が多い表組みは、見やすさに配慮することが重要です。特に幅が広い表などは、行に沿って項目を追っているうちにいつの間にかずれてしまうことがよくあるため、表のデザインや配色には気を配りたいところです。

そうはいっても、区切りを強調するために罫線の色を濃くすると、今度は罫線が目についてしまい逆に見づらくなってしまうこともあります。 こういった場合は、ひとつおきに行の色を変えストライプ状に配色する方法が有効です。tr要素に対して１行ごとにclassを指定し、paddingプロパティとbackground-colorプロパティを使ってセルを着色しましょう。

ここではtr要素にclass="row01"とclass="row02"を交互に付加し、background-colorプロパティでそれぞれの行のスタイルを定義しています。偶数行と奇数行のコントラストが高すぎると逆に見づらくなるため、薄めのトーンに調整したりして見やすさに配慮しましょう。

デザインサンプル

ＰＣスペック比較表
CPUCeleronD 335CeleronD 346
クロック周波数2.8GHz3.06GHz
２次キャッシュ256KB256KB
チップセットSiS651 ChipsetATI社製
RedeonXpress200 /
IXP450
標準搭載メモリ512MB512MB

サンプルCSSコード

.bc { border-collapse: collapse; }
.bc th,.bc td {padding: 0.4em 1em; border: 1px solid #CCC; }
.row01 th { background-color: #dfe8f6; }
.row02 th { background-color: #bdc7d7; }
.row02 td { background-color: #e8e8e8; }

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.