PCソフトウェア＞CSSで＜ＴＡＢＬＥ＞タグ中のセル単位で罫線の設定をする

HTML CSSで、＜TABLE＞タグ中の、セル単位で罫線の色・種類・太さの指定をする方法について書く。

①CSSの記述方法について

書式1
ｂｏｄｅｒ：｛線種｝　｛線の太さ｝　｛線の色｝；

セルの周囲全ての罫線について指定する
周囲の罫線を別々に指定するには、書式2・書式3を使用する
各パラメーターの間は、半角スペースで区切る
パラメーターの記述は順不同
記述例＞ｂｏｄｅｒ：ｓｏｌｉｄ　10ｐｘ　#020304；

---

書式2
ｂｏｄｅｒ－｛ボーダー位置｝：｛線種｝　｛線の太さ｝　｛線の色｝；

ボーダー位置の罫線について、まとめて個別に指定する
各パラメーターの間は、半角スペースで区切る
パラメーターの記述は順不同
記述例＞ｂｏｄｅｒ-ｔｏｐ：ｓｏｌｉｄ　10ｐｘ　#020304；

---

書式3
ｂｏｄｅｒ－｛ボーダー位置｝－ｓｔｙｌｅ：｛線種｝；
ｂｏｄｅｒ－｛ボーダー位置｝－ｗｉｄｔｈ：｛線の太さ｝；
ｂｏｄｅｒ－｛ボーダー位置｝－ｃｏｌｏｒ：｛線の色｝；

ボーダー位置の罫線について、線種・線の太さ・線の色を個別に指定する
記述例＞ｂｏｄｅｒ-ｔｏｐ－ｓｔｙｌｅ：ｓｏｌｉｄ；

---

パラメーターの説明

●ボーダー位置
top[上]、bottom[下]、left[左]、right[右]のいずれか

●線種(赤色・10pxの例)

none	ボーダー非表示・太さ0・他の指定を優先(初期値)
hidden	ボーダー非表示・太さ0・当指定を優先
solid	1本線
		．．．．．．．．．．．
double	2本線
		．．．．．．．．．．．
groove	立体的に窪んだ線
		．．．．．．．．．．．
ridge	立体的に隆起した線
		．．．．．．．．．．．
inset	上と左のボーダーが暗く、下と右のボーダーが明るい線
		．．．．．．．．．．．
outset	上と左のボーダーが明るく、下と右のボーダーが暗い線
		．．．．．．．．．．．
dashed	破線
		．．．．．．．．．．．
dotted	点線
		．．．．．．．．．．．

●線の太さ
数値で指定(px、em、ex)
キーワードで指定(thin=細い、medium=普通、thick=太い)

●線の色
数値で指定(#000000)
カラーネームで指定(red、green、blueなど)

②CSSの記述

記述例＞

.keisena{
 boder-top:none;
 boder-bottom-style:solid;→セルの下側に実線表示
 boder-bottom-color:red;→罫線の色は、赤
 boder-left:none;
 boder-right:none
}

.keisenb{
 boder-top:none;
 boder-bottom:none;
 boder-bottom:none;
 boder-left:none;
 boder-right:none
}

注意＞
セルaとセルbに、それぞれkeisenaとkeisenbを、class指定したとして、

セルaとセルbの間に線を引く場合、セルbの上側の線のスタイルを非表示にする。
1つのセルのみの指定では、思ったように線が表示されないので、同時に周囲のセルへの指定も必要。

③CSSの適用

HTMLソース中の＜ｔａｂｌｅ＞タグの、設定するセルに、それぞれclass指定を行ってゆく。

<table border="1">
<tbody>
 <tr>
  <td class="keisena">aaaa</td>
 </tr>
 <tr>
  <td class="keisenb">bbbb</td>
 </tr>
 <tr>
  <td>ccccc</td>
 </tr>
</tr>
<tbody>
</table>

++