Informative Image Example: Data Chart

Image: Data Chart

HTML Example

HTML Source Code

<img src="images/ex-data1.png" alt="Graphs charting open value, close value, and volume of trade of a dummy stock over 10 days" />
<div id="datachart_link"><a href="info-example-chart-data2.html">Data set of the dummy stock values</a></div>

Text Equivalent: Text Data Table

HTML Example

Date Open High Low Close Volume
07/29/2008 135.28 143.35 128.77 141.92 225,199
07/28/2008 157.96 165.84 132.64 133.65 239,152
07/27/2008 161.84 166.58 151.25 155.92 194,900
07/26/2008 159.48 160.54 158.11 159.62 275,738
07/25/2008 153.06 159.88 149.63 157.26 390,306
07/24/2008 152.31 159.15 148.33 151.75 208,164
07/23/2008 147.22 152.41 141.97 150.68 445,032
07/22/2008 145.23 152.64 135.92 145.38 625,197
07/21/2008 150.95 159.63 141.77 143.57 584,398
07/20/2008 155.76 156.94 140.04 149.66 390,611

HTML Source Code

<table id="data_chart_example" cellspacing="0">
  <tr id="headers">
    <th id="date">Date</th>
  <th id="open">Open</th>
  <th id="high">High</th>
  <th id="low">Low</th>
  <th id="close">Close</th>
  <th id="volume">Volume</th>
  </tr>
  
  <tr class="data">
    <th id="07292008" headers="date">07/29/2008</th>
  <td headers="07292008 open">135.28</td>
  <td headers="07292008 high">143.35</td>
    <td headers="07292008 low">128.77</td>
  <td headers="07292008 close">141.92</td>
  <td headers="07292008 volume">225,199</td>
  </tr>
  <tr class="data">
    <th id="07282008" headers="date">07/28/2008</th>
  <td headers="07282008 open">157.96</td>
  <td headers="07282008 high">165.84</td>
    <td headers="07282008 low">132.64</td>
  <td headers="07282008 close">133.65</td>
  <td headers="07282008 volume">239,152</td>
  </tr>
  <tr class="data">
    <th id="07272008" headers="date">07/27/2008</th>
  <td headers="07272008 open">161.84</td>
  <td headers="07272008 high">166.58</td>
    <td headers="07272008 low">151.25</td>
  <td headers="07272008 close">155.92</td>
  <td headers="07272008 volume">194,900</td>
  </tr>
  <tr class="data">
    <th id="07262008" headers="date">07/26/2008</th>
  <td headers="07262008 open">159.48</td>
  <td headers="07262008 high">160.54</td>
    <td headers="07262008 low">158.11</td>
  <td headers="07262008 close">159.62</td>
  <td headers="07262008 volume">275,738</td>
  </tr>
  <tr class="data">
    <th id="07252008" headers="date">07/25/2008</th>
  <td headers="07252008 open">153.06</td>
  <td headers="07252008 high">159.88</td>
    <td headers="07252008 low">149.63</td>
  <td headers="07252008 close">157.26</td>
  <td headers="07252008 volume">390,306</td>
  </tr>
  <tr class="data">
    <th id="07242008" headers="date">07/24/2008</th>
  <td headers="07242008 open">152.31</td>
  <td headers="07242008 high">159.15</td>
    <td headers="07242008 low">148.33</td>
  <td headers="07242008 close">151.75</td>
  <td headers="07242008 volume">208,164</td>
  </tr>
  <tr class="data">
    <th id="07232008" headers="date">07/23/2008</th>
  <td headers="07232008 open">147.22</td>
  <td headers="07232008 high">152.41</td>
    <td headers="07232008 low">141.97</td>
  <td headers="07232008 close">150.68</td>
  <td headers="07232008 volume">445,032</td>
  </tr>
  <tr class="data">
    <th id="07222008" headers="date">07/22/2008</th>
  <td headers="07222008 open">145.23</td>
  <td headers="07222008 high">152.64</td>
    <td headers="07222008 low">135.92</td>
  <td headers="07222008 close">145.38</td>
  <td headers="07222008 volume">625,197</td>
  </tr>
  <tr class="data">
    <th id="07212008" headers="date">07/21/2008</th>
  <td headers="07212008 open">150.95</td>
  <td headers="07212008 high">159.63</td>
    <td headers="07212008 low">141.77</td>
  <td headers="07212008 close">143.57</td>
  <td headers="07212008 volume">584,398</td>
  </tr>
  <tr class="data">
    <th id="07202008" headers="date">07/20/2008</th>
  <td headers="07202008 open">155.76</td>
  <td headers="07202008 high">156.94</td>
    <td headers="07202008 low">140.04</td>
  <td headers="07202008 close">149.66</td>
  <td headers="07202008 volume">390,611</td>
  </tr>
</table>