Dreamweaverの使い方 » Blog Archive テーブルの罫線色

テーブルの罫線色

テーブルの罫線色を変えるHTMLタグは用意されていますが、ブラウザによっては動作しない場合があります。CSSで変えるオススメの方法をお伝えします。

HTMLで罫線色を指定した時のブラウザによる違い

テーブルの罫線色のブラウザによる違い
ソースコード

/*bordercolorで表全体の罫線の色を指定*/
<table width="100" border="5" bordercolor="#0000FF">
    <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
    </tr>
</table>
<br />
/*bordercolorlightで表全体の罫線のうち左と上の色を指定*/
/*bordercolordarkで表全体の罫線のうち右と下の色を指定*/
<table width="100"  border="5" bordercolorlight="#FF0000" bordercolordark="#0000FF">
    <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
    </tr>
</table>

bordercolorはFirefox以外は正しく表示されるようですが、bordercolorlightとbordercolordarkはIE以外では表示されないようです。

CSSで太さ1pxの罫線を引く方法

テスト	テスト
テスト	テスト

CSSコードの例

table {                       /*テーブルタグについて指定*/
    border-collapse:separate; /*ボーダーを分離して表示*/
    border:0px;               /*ボーダーを0ピクセル*/
    border-spacing:1px;       /*セル間隔を1ピクセル*/
    background-color:#0000ff; /*背景色を青にする*/
}
td,th {                       /*通常セルと見出しセルについて指定*/
    padding:5px;              /*セル余白5ピクセル*/
    border:0px;               /*セルボーダー0ピクセル*/
    background-color:#ffffff; /*セル背景色を白*/
}

これで青い1pxの罫線を引く事ができます。IEでは少し太めに表示されるかもしれません。

しくみ

テーブルの背景色を青、その上にセルの色を白にして、枠線の部分ではテーブルの背景の色だけ表示しています。テーブルのbackground-colorプロパティの色を変える事により罫線の色を変えられます。