テーブルに２色の枠線を引くことができます

２色の枠線

２色の枠線のテーブルを作るには？

bordercolorlight、bordercolordark という属性を使って明るい色と暗い色の２色を設定し、２色の枠線のテーブルを作ります。
注）bordercolordark, bordercolorlightは Internet Explorerのみが対応しています

２色の枠線

<table bordercolorlight="１番目の色" bordercolordark="２番目の色" border="5" >
<tr>
<td>２色の枠線</td>
</tr>
</table>

春 夏 秋 冬 枠 線 border="5" で立体的な枠線ができます。	<table bordercolorlight="#6666ff" bordercolordark="#0000ff" border="5"width="150"> <tr> <td>春</td> <td>夏</td> <td>秋</td> </tr> <tr> <td>冬</td> <td>枠</td> <td>線</td> </tr> </table>
春 夏 秋 冬 枠 線 border="1" では平面	<table bordercolorlight="#6666ff" bordercolordark="#0000ff" border="1"width="150"> <tr> <td>春</td> <td>夏</td> <td>秋</td> </tr> <tr> <td>冬</td> <td>枠</td> <td>線</td> </tr> </table>
２色の枠線 border="3"	<table bordercolorlight="#cc0099" bordercolordark="#cc99cc" border="3" width="150"> <tr> <td>２色の枠線</td> </tr> </table>

bordercolordark bordercolorlight と罫線のスタイル　inset　outset を組み合わせることができます。すっきりして色合いもきれいです。
inset outset を単独で使用した場合と比較して下さい。

inset 内側がへこんで見える線	<table bgcolor="#f4f4f4" style="border-style:inset; border-width: 5px;" bordercolordark="#6666ff" bordercolorlight="#ccccff" width="150"> <tr> <td>内側がへこんで見える線</td> </tr> </table>
outset 内側が浮いて見える線	<table bgcolor="#f4f4f4" style="border-style:outset; border-width:5px;" bordercolordark="#cc0099" bordercolorlight="#cc99cc" width="150"> <tr> <td>内側が浮いて見える線</td> </tr> </table>

テーブル枠線の種類 かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル




★skip ページtop