廿TT

譬如水怙牛過窓櫺 頭角四蹄都過了 因甚麼尾巴過不得

メモ:htmlとスタイルシートで棒グラフを描く

追記:ちゃんとした解説がありました
3/3 棒グラフを作りたい[ホームページ作成]All About

なので以下は読む必要ないかもしれません(2013/10/30)


ふつうに画像貼った方が楽だし安定してる気がするので、以下が役に立つ日が来るかはわからない。

ソース

wikipediaからのコピペです。中でなにをやってるのかは理解してません。

<table style="border-collapse:collapse; width:100%;">
<tr style="background:#ddd">
<th colspan="5">民族構成(キルギス)</th>
</tr>
<tr style="font-size:88%; height:4px;">
<td style="padding:0 4px; white-space:nowrap;"></td>
<td style="padding:0 4px; text-align:right; white-space:nowrap;"></td>
<td style="width:100px;"></td>
<td style="padding:0 4px; width:5em; text-align:right; white-space:nowrap;"></td>
<td style="padding:0 4px; text-align:right; white-space:nowrap;"></td>
</tr>
<tr>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em;min-width:8em">キルギス人</td>
<td style="width:100px;border-left:solid 1px silver;border-right:solid 1px silver;">
<div style="background:yellowgreen; width:70.9%; overflow:hidden">&#160;</div>
</td>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em; text-align:right;">70.9%</td>
</tr>
<tr>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em;min-width:8em">ウズベク人</td>
<td style="width:100px;border-left:solid 1px silver;border-right:solid 1px silver;">
<div style="background:green; width:14.3%; overflow:hidden">&#160;</div>
</td>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em; text-align:right;">14.3%</td>
</tr>
<tr>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em;min-width:8em">ロシア人</td>
<td style="width:100px;border-left:solid 1px silver;border-right:solid 1px silver;">
<div style="background:blue; width:7.8%; overflow:hidden">&#160;</div>
</td>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em; text-align:right;">7.8%</td>
</tr>
<tr>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em;min-width:8em">その他</td>
<td style="width:100px;border-left:solid 1px silver;border-right:solid 1px silver;">
<div style="background:red; width:7%; overflow:hidden">&#160;</div>
</td>
<td colspan="2" style="padding-left:0.4em;padding-right:0.4em; text-align:right;">7%</td>
</tr>
</table>

表示

民族構成(キルギス)
キルギス人
  
70.9%
ウズベク
  
14.3%
ロシア人
  
7.8%
その他
  
7%

出典はこちら
キルギス - Wikipedia
これを見てへーこんな描き方もあるんだなーと思った。