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

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

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

表組みのhtmlタグ

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

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

表組み用のCSS

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