table「表組み」のスタイル：css Tips3

前回は、CSSでフォントサイズを指定する際のコツのようなものを
CSSのコードのテンプレートなどを記載し、ご紹介いたしました。

私の場合、やはり意識するのはスマートフォン！！

PCで作成をおこなっておりますので、PCでの読みやすさの表現は、
比較的簡単に記載できるものの、スマートフォンの場合は、読みやすさなどを意識して、
実機で確認をおこないながら、スタイルの作製をすることを注意しています。

また、読みやすさを考慮して記載する場合、
複数のサイトを見比べてみることも重要なように思います…。

それでは今回はッ、

・tableのスタイルバリエーション
・1pxで質感を高めるボーダー
・セルが多い場合に有効なゼブラ

上記について記載していこうと思います…。

tableのスタイルバリエーション

table「表組み」は、文字情報を分かりやすく整理して表示するために有効な方法だと思います。

さまざまなウェブサイトを作成する際は、表組みのスタイルのバリエーションをマスターしておくと、
非常に役立つことと思います。

今回は、いくつかのtable「表組み」のスタイルのサンプルとしてテンプレートでご紹介。
また、それに必要になるCSSプロパティをご紹介します。

以前はレイアウトの為にも使われていたtable要素

CSSの進化によって現在ではレイアウト用途にあまり使われることの無くなったtable。

最近ウェブ制作を始めた人にとってはtableやスペーサーGIFでレイアウトするといっても
意味が分からないものと思います。

レイアウトの為に使われることはなくなってきましたが、
table本来の役割である表組みとしての用途では頻繁に使用することと思います。

表組みは大量の文字情報を整理して分かりやすく表示させるためには有効な方法といえます。

今回コチラでは、実際のウェブ作成時にデザインのテンプレートとして使えそうなtableの
スタイルを記載してみたいと思います。

なお、ここで使用するサンプルでは「border-spacing:0;」を使用していますが、
border-spacingをあえて使用する理由は以下の２点になります。

①隣接するセルのボーダーを2本隣り合わせて表示するスタイルの表では、
border-collapseプロパティの値はcollapseではなくseparateとなります。
このとき隣接ボーダー同士の間をあけない為に「border-spacing:0;」が必要になります。

②隣接するセルのボーダーを1本にまとめるスタイルの表では、「border-collapse:collapse;」
とすればborder-spacingプロパティを使う必要が無くなります。
しかし、Firefoxの古いヴァージョンでは「border-collapse:collapse;」のときに、
ボーダーがずれるバグがあります。
これを回避するために「border-collapse:separate;」および「border-spacing:0;」の
方法を記載しました。

<!– HTML –>
<table cellspacing="0" class="style1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
</tr>
<tr>
<td>車</td>
<td>トヨタ</td>
<td>日産</td>
<td>スバル</td>
</td>
「以下省略」

※頻繁に使用する基本パターンの表組みスタイル。
ありふれたスタイルサンプルだが見やすい。

<!– CSS –>
table.style1 {
border-collapse: separate;
border-spacing: 0;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
table.style1 th {
background: #4c5482;
color: #fff;
font-weight: normal;
}
table.style1 th,table.style1 td {
padding: 5px;
text-align: center;
border-top: 1px solid #333;
border-left: 1px solid #333;
}

1pxで質感を高めるボーダー

各セルの左と上に1pxのラインを入れ、立体感があるような効果を表現してみます。

細かな違いですが、クライアントからウェブ制作を請け負っていると、
このような細部の違いを理解してくれているクライアントは意外に多くいるように思います。

CSSはサンプルのとうりになります。

ポイントは、「border-collapse: separate;」とすることで隣接するセルのボーダーを重ねず
並べて表示し、さらに「border-spacing: 0;」として、それぞれのボーダーの間をあけずにくっつけています。

table要素では上下左右に#333のボーダーを指定し、th要素とtd要素では左と上は#fffのボーダー、
右と下は#333のボーダーを指定しています。

<!– HTML –>
<table cellspacing="0" class="style2">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
</tr>
<tr>
<td>車</td>
<td>トヨタ</td>
<td>日産</td>
<td>スバル</td>
</td>
「以下省略」

※頻繁に使用する基本パターンの表組みスタイル。
ありふれたスタイルサンプルだが見やすい。

<!– CSS –>
table.style2 {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #333;
}
table.style2 th {
background: #4c5482;
color: #fff;
font-weight: normal;
}
table.style2 th,table.style2 td {
padding: 5px;
text-align: center;
border-top: 1px solid #fff;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #fff;
}

セルが多い場合に有効なゼブラ

大量のセルが並ぶ大きな表の場合、左側のtdから遠いセルの値が、
どの見出しに対応する値なのか分かりにくくなる事があります。

このような場合は、ゼブラ型の配色にすると、上下のセルと区別しやすく分かりやすくなります。

CSS3のnth-childを使用すれば奇数もしくは偶数番目のtr要素のみに背景色を指定することも可能ですが、
今回は、奇数番目のtr要素にclassを付与して背景色を指定しています。

<!– HTML –>
<table cellspacing="0" class="style3">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
</tr>
<tr>
<td>車</td>
<td>トヨタ</td>
<td>日産</td>
<td>スバル</td>
<td>三菱</td>
<td>ダイハツ</td>
<td>メルセデス</td>
<td>BMW</td>
</tr>
<tr class="color1">
<td>バイク</td>
<td>スズキ</td>
<td>ホンダ</td>
<td>カワサキ</td>
<td>ヤマハ</td>
<td>ヨシムラ</td>
<td>ハーレー</td>
<td>ドゥカティ</td>
</tr>
「以下省略」

<!– CSS –>
table.style3 {
border-collapse: separate;
border-spacing: 0;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
table.style3 th {
background: #4c5482;
color: #fff;
font-weight: normal;
}
table.style3 th,table.style3 td {
padding: 3px;
text-align: center;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
table.style3 .color1 td {
background: #96a6ff;
}