22. 棒グラフ(縦)

CHECK POINTS
widthborder-bottombackground-colortable-layoutvertical-alignline-height
■セル・ボーダーによる縦棒

★ 実行例 [22-1]:「table-layout なし」, [22-2]:「table-layout あり」

table-layout なし
       
121231234123451234561234567
table-layout あり
       
121231234123451234561234567
■文字ボーダーによる縦棒 ★ 実行例 [22-3]:「積み重ね棒グラフ」
積み重ね棒グラフ
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98990001020304
22-3.html
<HTML> <HEAD> <TITLE>HTML 4.01 WORKBOOK</TITLE> <STYLE type="text/css"> TABLE {border: 1px solid black; background-color: Beige; table-layout: fixed} CAPTION {font-size: 0.9em} TR.Bar {vertical-align: bottom; line-height: 0px} DIV.T11 {border-bottom: 1em solid HotPink} DIV.T12 {border-bottom: 1.5em solid RoyalBlue} DIV.T21 {border-bottom: 1.2em solid HotPink} DIV.T22 {border-bottom: 2em solid RoyalBlue} DIV.T31 {border-bottom: 1.4em solid HotPink} DIV.T32 {border-bottom: 3em solid RoyalBlue} DIV.T41 {border-bottom: 1.6em solid HotPink} DIV.T42 {border-bottom: 4.5em solid RoyalBlue} DIV.T51 {border-bottom: 1.8em solid HotPink} DIV.T52 {border-bottom: 6.5em solid RoyalBlue} DIV.T61 {border-bottom: 2em solid HotPink} DIV.T62 {border-bottom: 9em solid RoyalBlue} DIV.T71 {border-bottom: 2.2em solid HotPink} DIV.T72 {border-bottom: 12em solid RoyalBlue} COL {width: 1.5em} </STYLE> </HEAD> <BODY> <TABLE Summary="積み重ね棒グラフ" Cellspacing="6"> <CAPTION>積み重ね棒グラフ</CAPTION> <COL Span="7"> <TR Class="Bar"> <TD><DIV Class="T11">&#160;</DIV><DIV Class="T12">&#160;</DIV> <TD><DIV Class="T21">&#160;</DIV><DIV Class="T22">&#160;</DIV> <TD><DIV Class="T31">&#160;</DIV><DIV Class="T32">&#160;</DIV> <TD><DIV Class="T41">&#160;</DIV><DIV Class="T42">&#160;</DIV> <TD><DIV Class="T51">&#160;</DIV><DIV Class="T52">&#160;</DIV> <TD><DIV Class="T61">&#160;</DIV><DIV Class="T62">&#160;</DIV> <TD><DIV Class="T71">&#160;</DIV><DIV Class="T72">&#160;</DIV> <TR><TD>98<TD>99<TD>00<TD>01<TD>02<TD>03<TD>04 </TABLE> </BODY> </HTML>