• CSS
  • HTML
  • EXCEL
  • WINDOWS10
  • TIPS
  • MAIL

「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になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。

関連ページ一覧

「table」要素の基本的な構成 「border-collapse」の属性

スポンサーリンク

スポンサーリンク

Category

 Windows 11  Windows 10  CSS  HTML  EXCEL(エクセル)  有用なTIPs  WINDOWS  MAIL(メール)

BILLION WALLET Copyright©All rights reserved