|
| いまさらHTML,CSS講座トップ > HTMLテンプレート インデックスページ > 枠線 ボーダー TABLE テンプレート |
|
|
本稿では、table要素の内容に枠線（ボーダー）を表示させる方法を解説します。
|
| ■ スタイルシートでの記述 |
 表 示 |
|
|
|
 ソース 例 |
|
<table style="border: 1px solid #cdcdcd;" width="200">
<tr><td>
<ul>
<li>内容 1</li>
<li>内容 2</li>
<li>内容 3</li>
</ul>
</td></tr>
|
|
| ■ 解説 |
マージン、パディング、ボーダーの関係についてはこちら
カラーコード表はこちら |
| table要素に、borderプロパティを用いて、枠線を表示させます。 |
| borderプロパティは、「border-width プロパティ（上記の値は、1px）」「border-style プロパティ（上記の値は、solid）」「border-color プロパティ（上記の値は、#cdcdcd）」をまとめて指定する事ができます。 |
| border-widthプロパティは、枠線の太さを、ピクセルで指定しています。値の1pxの数値を大きくすれば枠線が太くなります。 |
| border-widthプロパティの値「solid(べた塗り)」は、他、double（二重線）、groove（立体線*くぼみ）、ridge（立体線*隆起）、inset（へこみ）、outset（盛りあがり）なども指定できます。 |
| border-colorプロパティの値「#cdcdcd」を変更する事で、枠線の色を変更する事が出来ます。カラーコード表は上記のリンクを参照して下さい。 |
|
|
|
|
|
|
|
|
