横線だけで構成する表組みをデザインする

border-collapaseプロパティは、セルのボーダーをどのように表示するか指定するためのプロパティである。多くのブラウザではデフォルトが「saparate」になっており、各セルのボーダーが分離して表示される。「collapase」を指定するとボーダーが結合されて一本の線になる。

これを利用してcollapseによるシンプルな表組みをつくろう。デザインの手順はとても簡単である。
「border-collapse:collapse」の指定のあと、<th>タグと<td>タグに対して「border-top」、「border-bottom」を指定すれば水平線だけの表組みを表現できる。

あとは、セル領域の背景色や文字色などのバランスを見ながら、カラーリングを行っていく。表の内容にもよるが過度なデザイン表現は避けたほうがよいだろう。
また、テーブルは下からtable、colgroup（列のグループ）、col(列）、thead、tfoot、tbody（行のグループ）、tr（行）、th、td（セル）の各要素が順に積み重なる段階構造になっている。セルのボーダーを指定する際に意識しておきたい。表のデザインはモジュール化して再利用しやすいのでCSSテンプレートなどを作成しておくとよい。

デザインサンプル

TABLE DESIGN SAMPLE
	header	header	header
name-1	data1-1	data1-2	data1-3
name-2	data2-1	data2-2	data2-3
name-3	data3-1	data3-2	data3-3

TABLE DESIGN SAMPLE
	header	header	header
name-1	data1-1	data1-2	data1-3
name-2	data2-1	data2-2	data2-3
name-3	data3-1	data3-2	data3-3

TABLE DESIGN SAMPLE
	header	header	header
name-1	data1-1	data1-2	data1-3
name-2	data2-1	data2-2	data2-3
name-3	data3-1	data3-2	data3-3

サンプルCSSコード

.bc1 th,.bc1 td { padding: 0.4em 1em;
　　　　border-top: 1px solid #000;
　　　　border-bottom: 1px solid #000; }
.bc1 th { border-bottom: 3px solid #000; color: #666; }
.bc2 th,.bc2 td { padding: 0.4em 1em;
　　　　border-top: 1px solid #064;
　　　　border-bottom: 1px solid #064; }
.bc2 th { border-bottom: 2px solid #064;
　　　　background: #dfd; color: #466; }
.bc3 th,.bc3 td { padding: 0.4em 1em;
　　　　border-top: 1px solid #d60;
　　　　border-bottom: 1px solid #064; }
.bc3 th { border-bottom: 2px solid #064;
　　　　background: #dfd; color: #d60; }
.bc1 th,.bc1 td {
　　　　border-top: 1px solid #064;
　　　　border-bottom: 1px solid #064;}
.bc1 th { background: #dfd; color: #466; }
.bc2 th,.bc2 td {
　　　　border-top: 1px solid #046;
　　　　border-bottom: 1px solid #046; }
.bc2 th { background: #ddf; color: #466;}
.bc3 th,.bc3 td {
　　　　border-top: 1px solid #d60;
　　　　border-bottom: 1px solid #d60; }
.bc3 th {background: #fd9;
　　　　color: #a40; }

スタイルシートデザインガイド