2014年7月6日日曜日

PCソフトウェア>CSSで<TABLE>タグ中のセル単位で罫線の設定をする

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

①CSSの記述方法について

書式1
boder:{線種} {線の太さ} {線の色};

セルの周囲全ての罫線について指定する
周囲の罫線を別々に指定するには、書式2・書式3を使用する
各パラメーターの間は、半角スペースで区切る
パラメーターの記述は順不同
記述例>boder:solid 10px #020304;


書式2
boder-{ボーダー位置}:{線種} {線の太さ} {線の色};

ボーダー位置の罫線について、まとめて個別に指定する
各パラメーターの間は、半角スペースで区切る
パラメーターの記述は順不同
記述例>boder-top:solid 10px #020304;


書式3
boder-{ボーダー位置}-style:{線種};
boder-{ボーダー位置}-width:{線の太さ};
boder-{ボーダー位置}-color:{線の色};

ボーダー位置の罫線について、線種・線の太さ・線の色を個別に指定する
記述例>boder-top-style:solid;


パラメーターの説明

●ボーダー位置
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ソース中の<table>タグの、設定するセルに、それぞれ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>

++

0 件のコメント:

コメントを投稿