テーブルタグに下記の属性を加えるとテーブルの枠線(ボーダー)の
見栄えを変えることができます。(以下の属性はHTML4.01の規格外
の属性です。)
<table>、<tr>、<th>、<td>
共通の属性 |
属性 | 説明 |
bordercolor="色" |
枠線の色を指定します。 |
テーブルタグに指定する属性 |
bordercolorlight="色"(IE限定) |
立体的な枠線の明るい部分の色を指定します。(テーブルの
上側と左側の枠線。(tr th tdはテーブルの枠線とは逆に
セルの右側と下側の枠線の色が変わる。) |
bordercolordark="色"(IE限定) |
立体的な枠線の暗い部分の色を指定します。テーブルの
右 側と下側の枠線。(tr th tdは
テーブルの枠線とは逆にセルの上側と左側の
枠線の色が変わる。) |
■ テーブルとセルの枠線の色を指定する
テーブルの枠線の色をネービーブルーに、セルの枠線の色は
緑色に指定します。
【ブラウザ表示】
ソース
<table border="5" bordercolor="navy">
<tr bordercolor="green">
<td>セル1</td><td>セル2</td>
</tr>
</table>
■ テーブルの立体的な枠線の色を指定する
テーブルの立体的な枠線の明るい部分の色をライムに、
暗い部分の色を紫色に指定します。
←
テーブルのこの部分がbordercolorlight
の部分です。
→
テーブルのこの部分がbordercolordark
の部分です。
【ブラウザ表示】
ソース
<table border="5" bordercolorlight="lime" bordercolordark="purple">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
</table>
■ テーブルタグ、tr、tdに枠線の色やスタイルを個別に指定する
【ブラウザ表示】
枠線を立体的にしたいなら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>
■ その他の項目
・
テーブルを作る
・
横幅、高さを指定する
・
画像や背景色を指定する
・
表示位置を指定する
・
テーブルに表題をつける
・
間隔、余白を指定する
・
セルを結合する
・
行と列をグループ化する
・
枠線の表示方法を指定する
・
細い枠線のテーブル
・
テーブルを横に並べる
・
テーブルで空白を作る
HTMLタグ一覧のページに戻る
|