Tableless Layout

Last Updated: 6/1/2012

The ability of CSS to precisely control a page's presentation allows developers to produce tableless designs that can be easily understood by a multitude of devices (e.g., web browser, mobile phone, screen reader, etc.).

Challenges disabled users face with layout tables are:

  • Navigating quickly to different sections of a page
  • Confusing layout tables with tabular data
  • Understanding the meaning of embedded content

Example


Left column content...
Right column content...
 

Tables are often used to create columns on a web page. Tables should be reserved for tabular data. Columns can easily be created using CSS.

/* CSS Columns */
.columns {clear:both;float:left;width:100%;}
.lColumn,.rColumn {float:left;width:30%;}
.rColumn {border-left:1px solid blue;padding:0 0 0 20px;}
...
<div class='columns'>
   <div class='lColumn'>
      Left column content...
   </div>

   <div class='rColumn'>
      Right column content...
   </div>
</div><!-- end .columns -->
Visual Inspection
  1. View the source of the page
  2. Verify that HTML tables are only used for tabular data
NO TEST METHOD...