ヘッダー・コニファロゴお問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ:ツール紹介やプログラム集・htmlで、細くてきれいな枠線の表組を作る(2)


htmlで、細くてきれいな枠線の表組を作る(2)

htmlのみで細くてきれいな枠線の表組を作る

thead01 thead02 thead03 thead04
セル01 セル02 セル03 セル04
セル05 セル06 セル07 セル08

● cssを使わず、htmlのみで細くてきれいな枠線の表組を作る場合、cellspacingを"1"にして、枠線の色になるbgclorをtableタグに設定します。

右の例の場合は#cccに、tdのbgcolorを#fffにしています。 thのbgcolorは、#efefef。paddingなどを設定するため、便宜上一部にcssを使っていますが、基本的にはhtmlのみで作ることができます。

tableタグのソース
 <table width="360" border="0" cellspacing="1" cellpadding="0">

逆に、cellspacingなどを使わず、cssだけで同じ細くてきれいな枠線の表組を作成

thead01
thead02
thead03
thead04
セル01 セル02 セル03
セル04
セル05 セル06 セル07 セル08

● cellspacing、cellpaddingなどをcssに置き換えます。cellspacingはセルとセルの隙間を指定するプロパティなので、上の場合は、"1"を指定して、隙間からtable全体のbgcolorがのぞいている形で枠線(border)を実現していました。

cssで単にtdやthにborderを指定すると、となりあったtdやthのborderが二重になってしまい、細い罫線にはなりません。そこでtableタグにborder-collapse: collapseを指定して、境界線の重なりを一つにしてしまいます。次にtd、thに1ピクセルのborderを指定します。

tableタグのソース
 <table class="table08" width="360">
cssのソース
table.table08 { border-collapse: collapse;}
table.table08 td { border: 1px solid #ccc; background:#fff; padding: 4px;}
table.table08 th { border: 1px solid #ccc; background:#efefef; padding: 4px;}

隙間のある枠線の表組を作る

thead01 thead02 thead03 thead04
セル01 セル02 セル03 セル04
セル05 セル06 セル07 セル08

● 隙間のある表組は、隙間の無い表組より簡単です。htmlを利用する場合は、cellspacing="3"などと隙間のサイズを指定してやります。borderはhtmlでborder="1"などとするとあまりきれいではないので、cssでtd、thに指定します。

thead01
thead02
thead03
thead04
セル01 セル02 セル03
セル04
セル05 セル06 セル07 セル08

● cssだけで作る場合は、tablenにセルとセルを重なり合わせない指定border-collapse:separate;と、隙間のサイズのborder-spacing:3pxを指定します。
ただし、古いバージョンのIEは、border-spacingに対応していないようなので、古いバージョンのIEに対応させる必要がある場合は、上のcellspacing="3"を使った方が無難かもしれません。

cssだけで作る場合のtableのソース
table.table10 {border-collapse: separate; border-spacing:3px;}
table.table10 td { border: 1px solid #ccc; background:#fff; padding: 4px;}
table.table10 th { border: 1px solid #ccc; background:#efefef; padding: 4px;}

細くてきれいな枠線の表組を作る・関連ページ

→ htmlで、細くてきれいな枠線の表組を作る(1)


 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.