Test Start

Browser Statistics for 2010 by Month
2010 Internet Explorer Firefox Chrome Safari Opera
October 29.7 % 44.1% 19.2% 3.9% 2.2%
September 31.1 % 45.1% 17.3% 3.7% 2.2%
August 30.7 % 45.8% 17.0% 3.5% 2.3%
July 30.4 % 46.4% 16.7% 3.4% 2.3%
June 31.0 % 46.6% 15.9% 3.6% 2.1%
May 32.2 % 46.9% 14.5% 3.5% 2.2%
April 33.4 % 46.4% 13.6% 3.7% 2.2%
March 34.9 % 46.2% 12.3% 3.7% 2.2%
February 35.3 % 46.5% 11.6% 3.8% 2.1%
January 36.2 % 46.3% 10.8% 3.7% 2.2%

Data is from www.w3schools.com

Test End

Rule References

Rule Pass IDs Fail IDs
Rule 3
  • id1
 none

Calculations

No calculations for test 69

Test Description

  • This test contains a simple data table that uses the summary attribute to describe its purpose.

Test Markup

User Agent Implementation

No user agent implementation information.

HTML Source Code


<div class="wrapper">
  <table id="id1" border="1" summary="Browser Statistics by Month. Data is from www.w3schools.com.">
   <caption>Browser Statistics for 2010 by Month</caption>
  <thead><tr>
    <th>2010</th>
    <th>Internet Explorer</th>
    <th>Firefox</th>
    <th>Chrome</th>
    <th>Safari</th>
    <th>Opera</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th>October</th>
    <td>29.7 %</td>
    <td>44.1%</td>
    <td>19.2%</td>
    <td>3.9%</td>
    <td>2.2%</td>
    </tr>
  <tr>
    <th>September</th>
    <td>31.1 %</td>
    <td>45.1%</td>
    <td>17.3%</td>
    <td>3.7%</td>
    <td>2.2%</td>
    </tr>
  <tr>
    <th>August</th>
    <td>30.7 %</td>
    <td>45.8%</td>
    <td>17.0%</td>
    <td>3.5%</td>
    <td>2.3%</td>
    </tr>
  <tr>
    <th>July</th>
    <td>30.4 %</td>
    <td>46.4%</td>
    <td>16.7%</td>
    <td>3.4%</td>
    <td>2.3%</td>
    </tr>
  <tr>
    <th>June</th>
    <td>31.0 %</td>
    <td>46.6%</td>
    <td>15.9%</td>
    <td>3.6%</td>
    <td>2.1%</td>
    </tr>
  <tr>
    <th>May</th>
    <td>32.2 %</td>
    <td>46.9%</td>
    <td>14.5%</td>
    <td>3.5%</td>
    <td>2.2%</td>
    </tr>
  <tr>
    <th>April</th>
    <td>33.4 %</td>
    <td>46.4%</td>
    <td>13.6%</td>
    <td>3.7%</td>
    <td>2.2%</td>
    </tr>
  <tr>
    <th>March</th>
    <td>34.9 %</td>
    <td>46.2%</td>
    <td>12.3%</td>
    <td>3.7%</td>
    <td>2.2%</td>
  </tr>
  <tr>
    <th>February</th>
    <td>35.3 %</td>
    <td>46.5%</td>
    <td>11.6%</td>
    <td>3.8%</td>
    <td>2.1%</td>
  </tr>
  <tr>
    <th>January</th>
    <td>36.2 %</td>
    <td>46.3%</td>
    <td>10.8%</td>
    <td>3.7%</td>
    <td>2.2%</td>
  </tr>
</tbody></table>
<p id="reference">Data is from <a href="http://www.w3schools.com/browsers/browsers_stats.asp">www.w3schools.com</a></p>
</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#id1 {
   width: 100%;
   border-collapse: collapse;
}
table#id1 caption{
   margin: 10px;
   font-size: 120%;
   font-weight: bold;
}
table#id1 thead th {
   padding: 2px 5px;
   background-color: #f9f9f9;
   border-bottom: 2px solid black;
}
table#id1 tbody th {
   width: 10%;
   padding: 2px 5px;
   text-align: left;
   font-weight: normal;
}
table#id1 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() {
   $('#id1').alternateRowColors();
});