<table border bordercolorlight="○" bordercolordark="○">　〜　</table>

テーブルの枠線の色を途中で変えて　テーブルを立体的に見せることができます。

bordercolor　で　枠線の色を指定した場合は　枠線全体が１色で指定されるのに対し、
今回の　bordercolorlight　や　bordercolordark　は　枠線の色を使い分けて
指定できますので　色の使い方によっては　立体的にみせることができるわけです。

では　ちょっとサンプルをみてみましょう。

セル１	セル２
セル３	セル４

考え方としては　このテーブルに左斜め上から　ライトが当たっていると
想像してみてください。

bordercolorlight　は　光が当たっている部分
bordercolordark　は　影になる部分　と考えると解りやすいですね。

通常の　bodercolor　との違いが理解できたでしょうか？

HTMLソースは　こんな感じです。

<table width="300" border="5" bordercolorlight="#0000FF" bordercolordark="#FF0000"> <tr> <td>セル１</td> <td>セル２</td> </tr> <tr> <td>セル３</td> <td>セル４</td> </tr> </table>

 

では　実際に立体的なテーブルを作ってみますね。

セル１ セル２ セル３ セル４	セル１ セル２ セル３ セル４
bordercolorllight　は　●#0000ff bordercolordark　は　●#000033	bordercolorlight　は　●#ff0000 bordercolordark　は　●#660000

配色のコツとしては　border　の値が大きい場合は　どんな色でも見分けがつきますが、
小さい場合は　明と暗がはっきり区別できるように　極端な色を指定したほうがいいでしょう。