In the bar graph sample, the row colors
are interchanged to improve readability.
We do this by setting the background
color of individual rows to achieve the
striped effect:
Filename: age_range_bar_graph_v4.html
<HTML>
<HEAD>
</HEAD>
<!-- [7/31/2007] - Version 4 of age range -->
<!-- bar graph using table row colors. -->
<BODY>
<FONT FACE="Arial, Helvetica">
<H2>Online Learning Applications</H2>
<P>
<FONT SIZE=-1>
The age range information of AIP4 students:
</FONT>
<TABLE>
<TR BGCOLOR=LIGHTBLUE>
<TD><FONT SIZE=-1>Under 10</FONT></TD>
<TD></TD>
<TD><FONT SIZE=-1>0.0%</FONT></TD>
<TD><FONT SIZE=-1>0</FONT></TD>
</TR>
<TR>
<TD><FONT SIZE=-1>Under 20</FONT></TD>
<TD></TD>
<TD><FONT SIZE=-1>0.0%</FONT></TD>
<TD><FONT SIZE=-1>0</FONT></TD>
</TR>
<TR BGCOLOR=LIGHTBLUE>
<TD><FONT SIZE=-1>Under 30</FONT></TD>
<TD>
<TABLE>
<!-- Under 30 bar -->
<TR>
<TD HEIGHT=10 WIDTH=29.6 BGCOLOR=BLUE></TD>
</TR>
</TABLE>
<!-- End of Under 30 bar -->
</TD>
<TD><FONT SIZE=-1>29.6%</FONT></TD>
<TD><FONT SIZE=-1>8</FONT></TD>
</TR>
.
.
.
</TABLE>
</FONT>
</BODY>
</HTML>
|
|
[ View result ]
|
To create a border around the graph we use the BORDER
attribute of tables, but if we set a border on the
exisiting table, we get borders around each cell of
the table (view result).
This is not what we want. It is better to embed the existing
table inside a new one cell table with a border as follows:
Filename: age_range_bar_graph_v5.html
<HTML>
<HEAD>
</HEAD>
<!-- [7/31/2007] - Version 5 of age range -->
<!-- bar graph with surrounding border. -->
<BODY>
<FONT FACE="Arial, Helvetica">
<H2>Online Learning Applications</H2>
<P>
<FONT SIZE=-1>
The age range information of AIP4 students:
</FONT>
<TABLE BORDER=1>
<!-- Border table -->
<TR>
<TD>
<TABLE>
<!-- Start of bar graph table -->
<TR BGCOLOR=LIGHTBLUE>
<TD><FONT SIZE=-1>Under 10</FONT></TD>
<TD></TD>
<TD><FONT SIZE=-1>0.0%</FONT></TD>
<TD><FONT SIZE=-1>0</FONT></TD>
</TR>
.
.
.
</TABLE>
<!-- End of bar graph table -->
</TD>
</TR>
</TABLE>
<!-- End of border table -->
</FONT>
</BODY>
</HTML>
|
|
[ View result ]
|
To improve the appearance, we remove the spacing between cells,
correct text alignment, and set column widths as follows:
Filename: age_range_bar_graph_v6.html
<HTML>
<HEAD>
</HEAD>
<!-- [7/31/2007] - Version 6 of age range -->
<!-- bar graph. -->
<BODY>
<FONT FACE="Arial, Helvetica">
<H2>Online Learning Applications</H2>
<P>
<FONT SIZE=-1>
The age range information of AIP4 students:
</FONT>
<TABLE BORDER=1>
<!-- Border table -->
<TR>
<TD>
<TABLE CELLSPACING=0>
<!-- Start of bar graph table -->
<TR BGCOLOR=LIGHTBLUE>
<TD ALIGN=RIGHT WIDTH=90><FONT SIZE=-1>Under 10</FONT></TD>
<TD WIDTH=10></TD>
<TD WIDTH=150></TD>
<TD><FONT SIZE=-1>0.0%</FONT></TD>
<TD ALIGN=RIGHT><FONT SIZE=-1>0</FONT></TD>
</TR>
.
.
.
</TABLE>
<!-- End of bar graph table -->
</TD>
</TR>
</TABLE>
<!-- End of border table -->
</FONT>
</BODY>
</HTML>
|
|
[ View result ]
|
