Test Start

Browser Statistics for October, 2010
Browser Usage
Internet Explorer 29.7 %
Firefox 44.1%
Chrome 19.2%
Safari 3.9%
Opera 2.2%

Data is from www.w3schools.com

Test End

Rule References

Rule Pass IDs Fail IDs
Rule 9 none
  • id1
  • id2
  • id3
  • id4
  • id5

Calculations

No calculations for test 82

Test Description

  • This test contains a complex data table.
    * The headers attribute of the td elements point to IDs not found on the page.

Test Markup

User Agent Implementation

No user agent implementation information.

HTML Source Code


<div class="wrapper">
   <table id="id1" class="statsTable" border="1" summary="Browser Statistics for October, 2010. Data is from www.w3schools.com">
      <caption>Browser Statistics for October, 2010</caption>
      <tbody><tr>
         <th id="browser" class="heading">Browser</th>
         <th id="statistic" class="heading">Usage</th>
      </tr>
      <tr>
         <th id="IE" class="rowHead">Internet Explorer</th>
         <td id="id1" headers="IE stat">29.7 %</td>
      </tr>
      <tr>
         <th id="Firefox" class="rowHead">Firefox</th>
         <td id="id2" headers="Firefox stat">44.1%</td>
      </tr>
      <tr>
         <th id="Chrome" class="rowHead">Chrome</th>
         <td id="id3" headers="Chrome stat">19.2%</td>
      </tr>
      <tr>
         <th id="Safari" class="rowHead">Safari</th>
         <td id="id4" headers="Safari stat">3.9%</td>
      </tr>
      <tr>
         <th id="Opera" class="rowHead">Opera</th>
         <td id="id5" headers="Opera stat">2.2%</td>
      </tr>
      <tr>
         <th colspan="6" id="reference" class="rowHead"><p class="reference">Data is from <a href="http://www.w3schools.com/browsers/browsers_stats.asp">www.w3schools.com</a></p></th>
      </tr>
      </tbody>
   </table>
</div>

CSS Code


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.statsTable {
   width: 20em;
   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;
}

p#reference {
   margin-top: 2px;
   font-size: 80%;
}
.odd {
   background-color: #ffffee;
}
.even {
   background-color: #fff;
}

Javascript Source Code


// 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();
});