Test 86 - Layout table with one level of nested data table

<div class="wrapper">
   <table id="id1" class="container">
      <tbody>
      <tr>
         <td>
            The table to the right contains usage statistics for Internet Explorer from 2002 to October of 2010 (the most recent month from which data is available). It is clear that the popularity of Internet Explorer has rapidly decreased since the early 2000s.
         </td>
         <td>
            <table class="statsTable" border="1" summary="Usage Statistics for Internet Explorer since 2002. Data is from www.w3schools.com">
               <caption>Usage Statistics for Internet Explorer ^a</caption>
            <tbody><tr>
               <th id="year" class="heading">Browser</th>
               <th id="stat" class="heading">Usage</th>
            </tr>
            <tr>
               <th id="yr_2010" class="rowHead">2010</th>
               <td headers="yr_2010 stat">29.7 %</td>
            </tr>
            <tr>
               <th id="yr_2009" class="rowHead">2009</th>
               <td headers="yr_2009 stat">37.2%</td>
            </tr>
            <tr>
               <th id="yr_2008" class="rowHead">2008</th>
               <td headers="yr_2008 stat">46.0%</td>
            </tr>
            <tr>
               <th id="yr_2007" class="rowHead">2007</th>
               <td headers="yr_2007 stat">56.0%</td>
            </tr>
            <tr>
               <th id="yr_2006" class="rowHead">2006</th>
               <td headers="yr_2006 stat">60.6%</td>
            </tr>
            <tr>
               <th id="yr_2005" class="rowHead">2005</th>
               <td headers="yr_2005 stat">68.9%</td>
            </tr>
            <tr>
               <th id="yr_2004" class="rowHead">2004</th>
               <td headers="yr_2004 stat">76.2%</td>
            </tr>
            <tr>
               <th id="yr_2003" class="rowHead">2003</th>
               <td headers="yr_2003 stat">84.9%</td>
            </tr>
            <tr>
               <th id="yr_2002" class="rowHead">2002</th>
               <td headers="yr_2002 stat">83.4%</td>
            </tr>
            </tbody>
         </table>
         <p id="reference">^a Data is from <a href="http://www.w3schools.com/browsers/browsers_stats.asp">www.w3schools.com</a></p>
         </td>
      </tr>
      <tr>
         <td>
            <table class="statsTable" border="1" summary="Usage Statistics for Firefox since 2002. Data is from www.w3schools.com">
               <caption>Usage Statistics for Firefox ^a</caption>
            <tbody><tr>
               <th id="year" class="heading">Browser</th>
               <th id="stat" class="heading">Usage</th>
            </tr>
            <tr>
               <th id="yr_2010" class="rowHead">2010</th>
               <td headers="yr_2010 stat">44.4 %</td>
            </tr>
            <tr>
               <th id="yr_2009" class="rowHead">2009</th>
               <td headers="yr_2009 stat">46.4%</td>
            </tr>
            <tr>
               <th id="yr_2008" class="rowHead">2008</th>
               <td headers="yr_2008 stat">44.4%</td>
            </tr>
            <tr>
               <th id="yr_2007" class="rowHead">2007</th>
               <td headers="yr_2007 stat">36.3%</td>
            </tr>
            <tr>
               <th id="yr_2006" class="rowHead">2006</th>
               <td headers="yr_2006 stat">29.9%</td>
            </tr>
            <tr>
               <th id="yr_2005" class="rowHead">2005</th>
               <td headers="yr_2005 stat">23.6%</td>
            </tr>
            <tr>
               <th id="yr_2004" class="rowHead">2004^b</th>
               <td headers="yr_2004 stat">16.5%</td>
            </tr>
            <tr>
               <th id="yr_2003" class="rowHead">2003^b</th>
               <td headers="yr_2003 stat">7.2%</td>
            </tr>
            <tr>
               <th id="yr_2002" class="rowHead">2002</th>
               <td headers="yr_2002 stat">--</td>
            </tr>
            </tbody>
         </table>
         <p id="reference">^a Data is from <a href="http://www.w3schools.com/browsers/browsers_stats.asp">www.w3schools.com</a></p>
         <p id="reference">^b Firefox was identified as Mozilla prior to 2005. Statistic represents combined usage of Mozilla and Firefox</p>
         </td>
         <td>
            The table to the left contains usage statistics for Firefox. It is the most popular non-IE browser; however, statistics for the past three years suggest that its popularity may have plateaued. This may be due to Google Chrome, which has rapidly gained in popularity since its introduction two years ago. Chrome had a 19.2% market share in October of 2010.
         </td>
      </tr>
   </tbody>
   </table>
</div>

div.wrapper {
    margin: 20px;
    padding: 10px;
    overflow: visible;
    background-color: #faf7f0;
    border: 1px solid #880000;
    -webkit-border-radius: 10px; /* Safari and Chrome rounded corners */
    -moz-border-radius: 10px; /* Firefox rounded corners */
    border-radius: 10px; /* Opera rounded corners */
}
table.container td {
   padding: 5px 10px;
   width: 24em;
}
table.statsTable {
   width: 100%;
   border-collapse: collapse;
}
table.statsTable caption{
   margin: 10px;
   font-size: 120%;
   font-weight: bold;
}
table.statsTable th.heading {
   padding: 2px 5px;
   text-align: center;
   font-weight: bold;
   background-color: #f9f9f9;
   border-bottom: 2px solid black;
}
table.statsTable th.rowHead {
   width: 10%;
   padding: 2px 5px;
   text-align: left;
   font-weight: normal;
}
table.statsTable tbody td {
   width: 18%;
   padding: 2px 5px;
   text-align: right;
}
.odd {
   background-color: #ffffee;
}
.even {
   background-color: #fff;
}
p#reference {
   margin-top: 2px;
   font-size: 80%;
}

// Define a small jQuery extension to alternate table row colors
jQuery.fn.alternateRowColors = function() {
   $('tbody tr:odd', this).addClass('odd');
   $('tbody tr:even', this).addClass('even');

   return this;
};

$(document).ready(function() {
   $('table.statsTable').alternateRowColors();
});