テーブル・枠線の種類

枠線の種類

テーブル枠線の種類

下記のサンプルでは、枠線の太さは2pxです。 border-width: 2px;

none 枠無し	<table style="border-style:none" bgcolor="#eeeeee"> <tr> <td>枠無し</td> </tr> </table>
solid 実線	<table style="border-color: #b4d46e; border-style: solid; border-width: 2px;" width="150" bgcolor="#eff9db"> <tr> <td>実線</td> </tr> </table>
dotted 点線	<table style="border-color:#996699; border-style:dotted; border-width:2px;" width="150" bgcolor="#eeeeee"> <tr> <td>点線</td> </tr> </table>
dashed 破線	<table style="border-color:#996699; border-style:dashed; border-width:2px;" width="150" bgcolor="#eeeeee"> <tr> <td>破線</td> </tr> </table>

二重線にする場合は、枠線の太さを3px以上にしないと表示されません。
border-width: 3px;

double 二重線

<table style="border-color:#996699; border-style:double; border-width:3px;" width="150" bgcolor="#eeeeee"> <tr> <td>二重線</td> </tr> </table>

下記のサンプルは、枠線の太さは5pxです。 border-width: 5px;

groove へこんで見える線	<table style="border-color:#996699; border-style:groove; border-width:5px;" width="150" bgcolor="#eeeeee"> <tr> <td>へこんで見える線</td> </tr> </table>
ridge 浮き上がって見える線	<table style="border-color:#996699; border-style:ridge; border-width:5px;" width="150" bgcolor="#eeeeee"> <tr> <td>浮き上がって見える線</td> </tr> </table>
inset 内側がへこんで見える線	<table style="border-color:#990033; border-style:inset; border-width:5px;" width="150" bgcolor="#eeeeee"> <tr> <td> 内側がへこんで見える線</td> </tr> </table>
outset 内側が浮いて見える線	<table style="border-color:#990033; border-style:outset; border-width:5px;" width="150" bgcolor="#eeeeee"> <tr> <td>内側が浮いて見える線</td> </tr> </table>

テーブルに２色の枠線 かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル




★skip ページtop