練習 23
23-1-1. 23-1.html にならい、次の横棒グラフをつくれ。
23-2-1. 23-2.html にならい、23-01.html を % 表示とする横棒グラフにせよ。
23-3-1. 次のアンケート結果表をつくれ。各 % での最大値は 15em で統一する。
<![CDATA[
解答
23-1-1.
23-01.html
------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>アンケート結果</TITLE>
<STYLE type="text/css">
TABLE {border: 1px solid black; background-color: Beige}
CAPTION,TR {font-size: 0.8em}
COL.Bar {padding-left: 0.4em}
TD.K1 {border-left: 26.2em solid RoyalBlue}
TD.K2 {border-left: 12.6em solid Red}
TD.K3 {border-left: 8.7em solid Orange}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="アンケート結果" Cellspacing="8">
<CAPTION>今回の提案を支持しますか？</CAPTION>
<COL><COL Class="Bar">
<TR><TD>支持する<TD Class="K1">262 人
<TR><TD>支持しない<TD Class="K2">126 人
<TR><TD>どちらとも<TD Class="K3">87 人
<TR><TD Colspan="2">いえない
</TABLE>
</BODY>
</HTML>
23-2-1.
23-02.html
---------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>アンケート結果</TITLE>
<STYLE type="text/css">
TABLE {border: 1px solid black; background-color: Beige}
CAPTION,TR {font-size: 0.8em}
COL.Bar {padding-left: 0.4em}
TD.K1 {border-left: 15.00em solid RoyalBlue}
TD.K2 {border-left: 7.20em solid Red}
TD.K3 {border-left: 4.93em solid Orange}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="アンケート結果" Cellspacing="8">
<CAPTION>今回の提案を支持しますか？</CAPTION>
<COL><COL Class="Bar">
<TR><TD>支持する<TD Class="K1">55.2 %
<TR><TD>支持しない<TD Class="K2">26.5 %
<TR><TD>どちらとも<TD Class="K3">18.3 %
<TR><TD Colspan="2">いえない
</TABLE>
</BODY>
</HTML>
23-3-1.
23-03.html
---------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML Lang="ja">
<HEAD>
<META Http-Equiv="Content-Type" Content="text/html; charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<TITLE>食に関するアンケート</TITLE>
<STYLE type="text/css">
BODY {text-align: center; background-color: Cyan}
TABLE#Zen {border: 1px solid black; background-color: Moccasin}
TABLE {border: 1px solid black; background-color: Beige}
CAPTION {font-size: 0.9em; letter-spacing: 0.2em; padding-bottom: 0.6em}
TR {font-size: 0.9em}
COL.Bar {padding-left: 0.4em}
TD {text-align: left}
TD.S1 {border-left: 15.00em solid RoyalBlue}
TD.S2 {border-left: 9.85em solid Red}
TD.S3 {border-left: 8.94em solid Orange}
TD.S4 {border-left: 6.10em solid HotPink}
TD.T1 {border-left: 15.00em solid RoyalBlue}
TD.T2 {border-left: 3.96em solid Red}
TD.T3 {border-left: 3.45em solid Orange}
TD.T4 {border-left: 2.06em solid HotPink}
TD.U1 {border-left: 15.00em solid RoyalBlue}
TD.U2 {border-left: 8.62em solid Red}
TD.U3 {border-left: 7.26em solid Orange}
TD.U4 {border-left: 1.66em solid HotPink}
TD.V1 {border-left: 15.00em solid RoyalBlue}
TD.V2 {border-left: 7.98em solid Red}
TD.V3 {border-left: 6.88em solid Orange}
TD.V4 {border-left: 5.77em solid HotPink}
</STYLE>
</HEAD>
<BODY>
<TABLE Summary="食に関するアンケート" Cellspacing="10" Id="Zen">
<CAPTION Class="Top">食に関するアンケート</CAPTION>
<TR><TD>
<TABLE Summary="好きなラーメンの種類" Cellspacing="8">
<CAPTION>好きなラーメンの種類</CAPTION>
<COL><COL Class="Bar">
<TR><TD>醤 油<TD Class="S1">37.6 %
<TR><TD>豚 骨<TD Class="S2">24.7 %
<TR><TD>味 噌<TD Class="S3">22.4 %
<TR><TD>塩<TD Class="S4">15.3 %
</TABLE></TD>
<TD><TABLE Summary="おにぎりの具" Cellspacing="8">
<CAPTION>好きなおにぎりの具</CAPTION>
<COL><COL Class="Bar">
<TR><TD>鮭<TD Class="T1">61.3 %
<TR><TD>おかか<TD Class="T2">16.2 %
<TR><TD>昆 布<TD Class="T3">14.1 %
<TR><TD>梅干し<TD Class="T4"> 8.4 %
</TABLE>
</TD></TR>
<TR><TD>
<TABLE Summary="カレーの辛さ" Cellspacing="8">
<CAPTION>好きなカレーの辛さ</CAPTION>
<COL><COL Class="Bar">
<TR><TD>中 辛<TD Class="U1">46.1 %
<TR><TD>甘 口<TD Class="U2">26.5 %
<TR><TD>辛 口<TD Class="U3">22.3 %
<TR><TD>激 辛<TD Class="U4"> 5.1 %
</TABLE>
</TD>
<TD>
<TABLE Summary="寿司ねた" Cellspacing="8">
<CAPTION>好きな寿司ねた</CAPTION>
<COL><COL Class="Bar">
<TR><TD>と ろ<TD Class="V1">42.1 %
<TR><TD>いくら<TD Class="V2">22.4 %
<TR><TD>う に<TD Class="V3">19.3 %
<TR><TD>あわび<TD Class="V4">16.2 %
</TABLE></TD></TR>
</TABLE>
</BODY>
</HTML>
]]>