2011年11月14日

CSSで作る横(水平)棒グラフ - 表のボーダー利用

スポンサード リンク

 表のボーダーでグラフを描く。
border-leftプロパティ

好きな松茸料理レシピ 調査結果。
焼き松茸:  200
松茸ご飯:  280
土瓶蒸し:  350
網焼き:  160
食べない:  80

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>CSSで作る横(水平)棒グラフ-表のボーダー利用</title>
 <style type="text/css">
   <!--
#tDiv{/*表を包むボックス*/
   border: 1px solid #9ca8a8; /*ボーダー*/
   background-color : linen; /* 背景色 */
   width:500px;
   padding:3px; /* 内側余白 */
       }
#cap{ /*タイトル*/
   font-weight : bold; /*太字*/
   color : teal; /* 前景色 */
   padding:3px;
   width:500px;
   text-align : center;/* 文字中央寄せ */
      }
#gTbl th{/* 見出し */
   text-align : right;
   color : darkred;
     }
/* グラフ部分 データセル(td)の左枠線: 線種(実線) 太さ 色;*/
#mTake1{ border-left:solid 200px fuchsia; }
#mTake2{ border-left:solid 280px purple; }
#mTake3{ border-left:solid 350px red; }
#mTake4{ border-left:solid 160px lime; }
#mTake5{ border-left:solid 80px blue; }
-->
</style>
</head>
<body><!--テーブルは一部省略しています。-->
<div id="cap">* 好きな松茸料理レシピ 調査結果。</div>
   <div id="tDiv">
 <table border="0" cellspacing="7" id="gTbl">
  <tr>
     <th>焼き松茸:</th><td id="mTake1"> 200</td>
  </tr>
  <tr>
     <th>松茸ご飯:</th><td id="mTake2"> 280</td>
  </tr>
  <tr>
     <th>土瓶蒸し:</th><td id="mTake3"> 350</td>
  </tr>
  <tr>
     <th>網焼き:</th><td id="mTake4"> 160</td>
  </tr>
  <tr>
     <th>食べない:</th><td id="mTake5"> 80</td>
 </tr>
</table>
  </div>
</body>
</html>
tableのボーダーでグラフを作る。
<table border="0" cellspacing="7" id="gTbl">
<tr><th>焼き松茸:</th><td id="mTake1"> 200</td></tr>

</table>

まずtableを作りcellspacing="7"(セルとセルの余白)を指定してボーダーの同士
間隔を拡げます。つぎに見出しセル"th"の横の"td"セルに"id"を付け、
スタイルを指定します。
#mTake1{ border-left:solid 200px purple; }
このセルの左側のボーダーは、sorid(実線) 200px(幅) fuchsia(色)になります。
焼き松茸:  200
これを順次、各tdセルに(幅)、(色)を変えて指定していくと棒グラフができあがります。
borderプロパティ
ボーダーの線種、幅、色の設定をおこないます。 borderプロパティ css

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
テーブル
text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
カラーコード 色見本



posted by javaScript at 15:57 | 大阪 ☀ | グラフ 電卓 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。