「CSS/table」テーブルborderの属性

<TABLE>にborder属性を指定するには、<head>～</head>の中に<style>～</style>に指定するか、直接<TABLE>に書き込み2つの方法があります。

<style type="test/css">
td {
   border:1px solid black; 
     
   /*1px :ボーダーラインの太さ
     solid :ボーダースタイル
     black :ボーダーの色*/
</style>

CSS

▼　1つのボーダーを表示するに順番はありません。下記はボーダー属性を使って作ったCSSテーブルの一例です。

<style type="test/css">
table {
   margin-left:10px;
   border-collapse:separate;
   border-spacing: 3px;
}
 
th.sample {
   text-align:center;
   border:double 3px blue; 
   width:150;
   background-color:pink;
}
 
td.sample1{
   text-align:center; 
   border:2px solid red; 
   text-color:gray;
   width:100;
}
 
td.sample2{
   text-align:right; 
   border:3px dotted red; 
   text-color:gray;
   width:100;
}
</style>

TABLEタグ

▼　以下のように、HTMLタグ内にCSSスタイルを直接記述することもできます。

<table>
　<tr>
　　<th class="sample">年齢</th>
　　<td class="sample1">28</td>
　</tr>
　<tr>
　　<th style="border:5px outset pink;">身長</th>
　　<td class="sample2">172</td>
　</tr>
</table>

下記のテーブルが出来上がります。

年齢	28
身長	172

border-style:の値

下記属性のサンプルはこちらClick!

solid	1本線で表示されます。
double	2本線で表示されます。
hidden	ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は、hidden が優先されます。
groove	立体的に窪んで見えるような線で表示します。
ridge	立体的に線が突起して表示されます。
inset	ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。
outset	ボーダーで囲まれた領域全体が立体的に突起起したように表示されます。
dotted	点線で表示されます。
dashed	破線で表示されます。
none(初期値)	ボーダーは表示されず、線幅も0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。