Test Start

This is a layout table with two levels of nesting. Tables should only be used to display data in rows and columns.
CSS should be used for visual layout.
Properties to use instead:
Note: Height could also be used.
  • float
  • clear
  • width
  • margin
  • border
  • padding

Test End

Rule References

Rule Pass IDs Fail IDs
Rule 36 none
  • id1

Calculations

No calculations for test 85

Test Description

  • This test contains a layout table with two levels of nested layout tables.

Test Markup

User Agent Implementation

No user agent implementation information.

HTML Source Code


<div class="wrapper">
   <table id="id1" class="container" border="1">
      <tbody>
      <tr>
         <td>
            This is a layout table with two levels of nesting.
         </td>
         <td>
            Tables should only be used to display data in rows and columns.
         </td>
      </tr>
      <tr>
         <td>
            CSS should be used for visual layout.
         </td>
         <td>
         <table class="nested" border="1">
         <tbody>
         <tr>
            <td>
              Properties to use instead:
              <table class="nested" border="1">
                 <tbody>
                 <tr>
                    <td>
                       Note: Height could also be used.
                    </td>
                 </tr>
                 </tbody>
              </table>
            </td>
            <td>
               <ul>
                  <li>float</li>
                  <li>clear</li>
                  <li>width</li>
                  <li>margin</li>
                  <li>border</li>
                  <li>padding</li>
               </ul>
            </td>
         </tr>
         </tbody>
         </table>
         </td>
      </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.container {
   border: 1px solid black;
   background-color: #fff;
   border-collapse: collapse;
}
table.container td {
   padding: 5px 10px;
}
table.nested {
   margin: 0;
}