HTML Encyclopaedia

Histograms

It is sometimes useful to display statistical and analytical results as a histogram with vertical (or horizontal) bars whose length is proportional to the quantities indicated. Such displays may well be generated in HTML by programs.

A simple coloured square (or rectangle) can be displayed using the <img> tag. This tag's height and width attributes can be used to stretch the image in either direction. This can be used to create simple histograms in conjunction with the <table> tag. Here's an example.

Daily Accesses
6611112814513116181
SunMonTueWedThuFriSat

The HTML for even this simple display requires attention to a number of details. Here's the HTML. 

<table border=5>
<tr valign=bottom><td valign=middle rowspan=3>Daily Accesses
    <td height=200><img src=green.gif height=66 width=40>
    <td><img src=green.gif height=111 width=40>
    <td><img src=green.gif height=128 width=40>
    <td><img src=green.gif height=145 width=40>
    <td><img src=green.gif height=131 width=40>
    <td><img src=green.gif height=161 width=40>
    <td><img src=green.gif height=81 width=40>
<tr><td>66<td>111<td>128<td>145<td>131<td>161<td>81
<tr><td>Sun<td>Mon<td>Tue<td>Wed<td>Thu<td>Fri<td>Sat
</table>

There are number of points to note here, especially if you are unfamiliar with certain aspects of tables.

  1. The attribute valign is set to bottom for the complete table row containing the images. HTML allows attributes to be set for every cell in a table row by setting the attribute on the <tr> tag.
  2. For the first, row spanning, cell valign is set to middle to put the text that appears at the left in the centre of the cell. Setting the alignment attributes for a cell over-rides any attributes set in the <tr> tag.
  3. The height of the table row containing the colour bars is the maximum of the heights of the individual cells as you would expect for a table. The height of the first cell has been forced to 200 using the <td> tag's height attribute, this is higher than any of the image heights so some clear space appears above every bar.