https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

枠線の色やスタイルを指定する

テーブルタグに下記の属性を加えるとテーブルの枠線(ボーダー)の 見栄えを変えることができます。(以下の属性はHTML4.01の規格外 の属性です。)


<table>、<tr>、<th>、<td> 共通の属性
属性説明
bordercolor="色" 枠線の色を指定します。
テーブルタグに指定する属性
bordercolorlight="色"(IE限定) 立体的な枠線の明るい部分の色を指定します。(テーブルの
上側と左側の枠線。(tr th tdはテーブルの枠線とは逆に セルの右側と下側の枠線の色が変わる。)
bordercolordark="色"(IE限定) 立体的な枠線の暗い部分の色を指定します。テーブルの 右
側と下側の枠線。(tr th tdは テーブルの枠線とは逆にセルの上側と左側の 枠線の色が変わる。)

■ テーブルとセルの枠線の色を指定する

テーブルの枠線の色をネービーブルーに、セルの枠線の色は 緑色に指定します。

【ブラウザ表示】

セル1セル2

ソース

<table border="5" bordercolor="navy">
<tr bordercolor="green">
<td>セル1</td><td>セル2</td>
</tr>
</table>

■ テーブルの立体的な枠線の色を指定する

テーブルの立体的な枠線の明るい部分の色をライムに、 暗い部分の色を紫色に指定します。

テーブルのこの部分がbordercolorlight の部分です。

テーブルのこの部分がbordercolordark の部分です。

【ブラウザ表示】

セル1セル2

ソース

<table border="5" bordercolorlight="lime" bordercolordark="purple">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
</table>

■ テーブルタグ、tr、tdに枠線の色やスタイルを個別に指定する

【ブラウザ表示】

セル1セル2
セル3セル4
枠線を立体的にしたいならbordercolorlight="色"と bordercolordark="色"はセットで指定してください。 NNではbordercolor="色"だけの指定で立体的な枠線に なりますがIEと比べると色の見え方が異なるようです。


ソース

<table border="5" cellspacing="5" width="250" height="100"
bordercolorlight="gold" bordercolordark="navy">
<tr bordercolor="blue">
<td bordercolor="yellow">セル1</td><td>セル2</td>
</tr>
<tr>
<td bordercolor="black">セル3</td><td>セル4</td>
</tr>
</table>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

テーブルを作る
横幅、高さを指定する
画像や背景色を指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る