テーブルの枠線にそれぞれ違う色をつけるには？

表（テーブル）の枠線にそれぞれ違う色をつける

テーブルの枠線にそれぞれ違った色の指定ができます。

テーブルの枠線にそれぞれ違った色の指定ができます。 この表は 線の太さ　サイズ１、 線の種類　solid（実線）です。 ☆線の太さも指定できます。線の種類もdotted(点線)、 dashed(粗い点線) に変えられます。

上記のソース
<TABLE border="0" width="400" style=" BORDER-TOP: #0000cc 1px solid; BORDER-BOTTOM: #9966cc 1px solid; BORDER-RIGHT: #006666 1px solid; BORDER-LEFT: #FF0000 1px solid"> <TBODY> <TR> <TD>ここに文字<BR> <BR> </TD> </TR> </TBODY> </TABLE>

この表は 線の太さ　サイズ２、 線の種類　上の線がdotted(点線) 下の線がdashed(粗い点線) 左右がsolid（実線）です。

上記のソース
<TABLE border="0" width="400" style="BORDER-TOP: #0000cc 2px dotted; BORDER-BOTTOM: #9966cc 2px dashed; BORDER-RIGHT: #006666 2px solid; BORDER-LEFT: #FF0000 2px solid"> <TBODY> <TR> <TD>ここに文字<BR> </TD> </TR> </TBODY> </TABLE>


↓↓↓

左だけの枠 ここに文字	右だけの枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-LEFT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">左だけの枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-RIGHT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">右だけの枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

上だけの枠 ここに文字	下だけの枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-TOP: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">上だけの枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-BOTTOM: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">下だけの枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

上下に枠 ここに文字	左右に枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-TOP: #999999 1px solid;BORDER-BOTTOM: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">上下に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-RIGHT: #999999 1px solid;BORDER-LEFT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">左右に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

上・右に枠 ここに文字	左・下に枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-TOP: #999999 1px solid;BORDER-RIGHT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">上・右に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-BOTTOM: #999999 1px solid;BORDER-LEFT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">左・下に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

上・左に枠 ここに文字	右・下に枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-left: #999999 1px solid;BORDER-top: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">上・左に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-bottom: #999999 1px solid;BORDER-right: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#fff4f4">右・下に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

左右・上に枠 ここに文字	左右・下に枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-TOP: #999999 1px solid;BORDER-RIGHT: #999999 1px solid;BORDER-LEFT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#e5f1ff">左右・上に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-BOTTOM: #999999 1px solid;BORDER-LEFT: #999999 1px solid;BORDER-RIGHT: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#e5f1ff">左右・下に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

上下・右に枠 ここに文字	上下・左に枠 ここに文字
上記のソース <TABLE border="0" width="220" style="BORDER-RIGHT: #999999 1px solid;BORDER-BOTTOM: #999999 1px solid;BORDER-TOP: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#e5f1ff">上下・右に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>	上記のソース <TABLE border="0" width="220" style="BORDER-LEFT: #999999 1px solid;BORDER-BOTTOM: #999999 1px solid;BORDER-TOP: #999999 1px solid" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#e5f1ff">上下・左に枠<BR> ここに文字</TD> </TR> </TBODY> </TABLE>

CSSボーダースタイル CSSボーダー CSSテーブル




★skip ページtop