ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLタグ一覧 > テーブル

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

テーブルタグに下記の属性を加えるとテーブルの枠線(ボーダー)の 見栄えを変えることができます。(以下の属性は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>

■ その他の項目

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

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

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.