CSSで表組みを作ってみた。

htmlの表組みってかなり面倒

EXCELを使い慣れているせいもあり、htmlでの表組みは結構面倒。セルの罫線設定にはじまり、文字のセル内の位置設定や塗りの設定などなど。なので、この作業を少しでも軽減すべく、CSSに挑戦してみました。

表組みのhtmlタグ

自分なりの解釈で言うとこんな感じ

■表全体 tableで指定
■行の設定 Trで指定
■表のヘッダー設定　thで指定
■個別のセル設定　Tdで指定
■セルの結合（縦）　rowspanと書く
■セルの結合（横） collspanと書く

表組み用のCSS

表組み全体の指定 matrix01 表のワイド指定とセル同士の隙間なく隣接
ヘッダーの指定 matrix01_th ヘッダーセル内のテキスト位置や塗りの設定など
ボディ部分の指定 matrix01_td ボディセル内のテキスト位置や塗りの設定など

/*表組みのcss*/
.matrix01{
width: 50%;
border-collapse: collapse;
}
.matrix01 th{
width: 10%;
padding: 2px;
text-align: center;
font-size: 0.8em;
vertical-align: top;
color: #333;
background-color: #DED7CF;
border: 1px solid #7A7B7D;
}
.matrix01 td{
padding: 2px;
text-align: right;
font-size: 0.8em;
background-color: #fff;
border: 1px solid #7A7B7D;
}