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;
}
