Page Links

Layout Tables Example: Four Columns

Inaccessible: Four Column Layout using a Table

The second and thrid rows of the table are the location of the linearization problem.
The headers in the second row are not in document order with the lists they are describing. The headers should be in the same cells as the lists.
The fourth row of the table is a navigation bar but there is no heading markup preceeding the links to indicate its function.

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

Books

Tools

CSS level 2 revision 1 (Candidate Recommendation) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things.
CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need.
CSS Mobile Profile 1.0 is for devices such as mobile phones and PDAs.
CSS Print Profile is still a draft. It is aimed at low-cost printers.
CSS TV Profile 1.0 is for browsers that run on television sets.

HTML Source Code

<table class="layout-example-1" width="100%" border=2" cellpadding=".25em">
  <tr>
    <td colspan="12" align="center"><b><font size="4">CSS Resources</font><b></td>
  </tr>
  <tr>
    <td colspan="3" align="center" width="20%"><b>CSS Layout Design</b></td>
    <td colspan="3" align="center" width="20%"><b>W3C CSS Resources</b></td>
    <td colspan="3" align="center" width="20%"><b>Books</b></td>
    <td colspan="3" align="center" width="20%"><b>Tools</b></td>
  </tr>

  <tr>
    <td colspan="3" valign="top">
    <ul>
      <li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
      <li><a href="http://css.maxdesign.com.au">Max Design Tutorials</a></li>
      <li><a href="http://www.unmatchedstyle.com/">Unmatchedstyle</a></li>
      <li><a href="http://www.cssbeauty.com/">cssBeauty</a></li>
      <li><a href="http://cssvault.com/">cssvault</a></li>
      <li><a href="http://www.stylegala.com">Stylegala</a></li>
      <li><a href="http://cssdrive.com/">CSS Drive</a></li>
      <li><a href="http://styleboost.com/">Styleboost</a></li>
      <li><a href="http://www.csselite.com/gallery/">CSSElite</a></li>
      <li><a href="http://www.cssimport.com/">CSS Import</a></li>
      <li><a href="http://www.webcreme.com">Web Creme</a></li>
      <li><a href="http://www.cssmania.com">CSS Mania</a></li>
      <li><a href="http://www.designshack.co.uk/">DesignShack</a></li>
    </ul>
  </td>
    <td colspan="3" valign="top">
      <ul>

        <li><a href="http://www.w3.org/TR/CSS21/"><strong>CSS level 2 revision 1</strong></a> (Candidate Recommendation) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. </li>

        <li><a href="http://www.w3.org/TR/CSS1"><strong>CSS level 1</strong></a> (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. </li>

        <li><a href="http://www.w3.org/TR/css-mobile"><cite>CSS Mobile Profile 1.0</cite></a> is for devices such as mobile phones and PDAs.</li>

        <li><a href="http://www.w3.org/TR/css-print/"><cite>CSS Print Profile</cite></a> is still a draft. It is aimed at low-cost printers.</li>

        <li><a href="http://www.w3.org/TR/css-tv"><cite>CSS TV Profile 1.0</cite></a> is for browsers that run on television sets.</li>
      </ul>

      <p>Other W3C documents that deal with CSS:</p>

      <ul>
        <li><a href="http://www.w3.org/TR/SVG11/"><cite>SVG</cite></a> contains the CSS properties for styling vector graphics.</li>
        <li><a href="http://www.w3.org/TR/CSS-access"><cite>Accessibility Features of CSS</cite></a> is a Note about how CSS can make documents more accessible.</li>
      </ul>

  </td>

    <td colspan="3" valign="top">
      <dl>
        <dt><a href="http://www.cssmastery.com/">CSS Mastery: Advanced Web Standards Solutions</a></dt>
        <dd>Author: Andy Budd</dd>
        <dd>Publisher: friendsof</dd>

        <dt><a href="http://www.peachpit.com/store/product.aspx?isbn=0321303474">The Zen of CSS Design: Visual Enlightenment for the Web</a></dt>
        <dd>Author: Dave Shea</dd>
        <dd>Publisher: Peachpit Press</dd>

        <dt><a href="http://simplebits.com/publications/bulletproof/">Bulletproof Web Design: Improving flexibility and protecting</a></dt>
        <dd>Author: Dan Cederholm</dd>
        <dd>Publisher: New Riders</dd>

        <dt><a href="http://www.transcendingcss.com/">Transcending CSS: The Fine Art of Web Design</a></dt>
        <dd>Author: Andy Clarke</dd>
        <dd>Publisher: </dd>

        <dt><a href="http://www.sensible.com/">Don't Make Me Think: A Common Sense Approach to Web Usability</a></dt>
        <dd>Author: Steve Krug</dl>
        <dd>Publisher: New Riders</dd>

        <dt><a href="http://www.principlesofbeautifulwebdesign.com/">The Principles of Beautiful Web Design</a></dt>
        <dd>Author: Jason Beaird</dd>
        <dd>Publisher: Sitepoint</dd>
      </dl>
  </td>

    <td colspan="3" valign="top">
      <ul>
        <li><a href="http://www.westciv.com/style_master/">Style Master: CSS Editor</a></li>
        <li><a href="http://www.enginsite.com/css-editor.htm">EngInSite CSS Editor</a></li>
        <li><a href="http://www.athlab.com/Astyle/">A Style CSS Editor</a></li>
        <li><a href="http://www.altova.com/features_css_editor.html">Altova CSS Editor</a></li>
        <li><a href="http://www.newsgator.com/individuals/topstyle/">TopStyle</a></li>
        <li><a href="http://www.highdots.com/css-editor/">Style Studio CSS Editor</a></li>
        <li><a href="http://www.blumentals.net/rapidcss/">Rapid CSS 2008<a></li>
        <li><a href="http://www.skybound.ca/stylizer/">Stylizer<a></li>
        <li><a href="http://www.culturedcode.com/xyle/">Xyle<a></li>
      </ul>
    </td>
  </tr>
  <tr>
    <td colspan="4" align="center" class="nav"><a href="#ex1">Inaccessible Table Layout</a></td></td>
    <td colspan="4" align="center" class="nav"><a href="#ex2">Accessible Table Layout</a></li></td>
    <td colspan="4" align="center" class="nav"><a href="#ex3">More Accessible with CSS</a></li></td>
       </ul>
    </td>
  </tr>
</table>

CSS Source Code

#content td.nav {
margin: 0;
padding: 0;
}

#content td.nav a {
  display: block;
  width: 100%;
  padding-left: .125em;
  padding-right: .125em;
  padding-top: .125em;
  padding-bottom: .125em;
  text-decoration: none;
  font-weight: bold;
}

#content td.nav a:link,
#content td.nav a:visited {
  background-color: white;
  color: blue;
}

#content td.nav a:active,
#content td.nav a:focus,
#content td.nav a:hover {
  background-color: blue;
  color: white;
}

Accessible: Four Column Layout using a Table

The first row in the previous example was removed and the title changed to a h2 heading.
The second and third rows have been merged from the previous example so that the headers are in the same cells as the lists. The table is now much simpler as a single 4 row table.
The navigation bar is converted to an unordered list and also removed from the table markup. A h2 heading was added before the list to give the navigation bar a title. CSS is used to make the list render graphically as a horizontal navigation bar.

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

CSS level 2 revision 1 (Candidate Recommendation) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things.
CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need.
CSS Mobile Profile 1.0 is for devices such as mobile phones and PDAs.
CSS Print Profile is still a draft. It is aimed at low-cost printers.
CSS TV Profile 1.0 is for browsers that run on television sets.

Books

CSS Mastery: Advanced Web Standards Solutions: Author: Andy Budd; Publisher: friendsof
The Zen of CSS Design: Visual Enlightenment for the Web: Author: Dave Shea; Publisher: Peachpit Press
Bulletproof Web Design: Improving flexibility and protecting: Author: Dan Cederholm; Publisher: New Riders
Transcending CSS: The Fine Art of Web Design: Author: Andy Clarke; Publisher:
Don't Make Me Think: A Common Sense Approach to Web Usability: Author: Steve Krug; Publisher: New Riders
The Principles of Beautiful Web Design: Author: Jason Beaird; Publisher: Sitepoint

Tools

Stylizer

Xyle

HTML Source Code

<h2 class="example2" >CSS Resources</h2>

<table class="example2" cellpadding=".25em">
  <tr>
    <td valign="top">
    <h3>CSS Layout Design</h3>
    <ul>
      <li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
      <li><a href="http://css.maxdesign.com.au">Max Design Tutorials</a></li>
      <li><a href="http://www.unmatchedstyle.com/">Unmatchedstyle</a></li>
      <li><a href="http://www.cssbeauty.com/">cssBeauty</a></li>
      <li><a href="http://cssvault.com/">cssvault</a></li>
      <li><a href="http://www.stylegala.com">Stylegala</a></li>
      <li><a href="http://cssdrive.com/">CSS Drive</a></li>
      <li><a href="http://styleboost.com/">Styleboost</a></li>
      <li><a href="http://www.csselite.com/gallery/">CSSElite</a></li>
      <li><a href="http://www.cssimport.com/">CSS Import</a></li>
      <li><a href="http://www.webcreme.com">Web Creme</a></li>
      <li><a href="http://www.cssmania.com">CSS Mania</a></li>
      <li><a href="http://www.designshack.co.uk/">DesignShack</a></li>
    </ul>
  </td>
    <td valign="top">
    <h3>W3C CSS Resources</h3>

      <ul>
        <li><a href="http://www.w3.org/TR/CSS21/"><strong>CSS level 2 revision 1</strong></a> (Candidate Recommendation) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. </li>
        <li><a href="http://www.w3.org/TR/CSS1"><strong>CSS level 1</strong></a> (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. </li>
        <li><a href="http://www.w3.org/TR/css-mobile"><cite>CSS Mobile Profile 1.0</cite></a> is for devices such as mobile phones and PDAs.</li>
        <li><a href="http://www.w3.org/TR/css-print/"><cite>CSS Print Profile</cite></a> is still a draft. It is aimed at low-cost printers.</li>
        <li><a href="http://www.w3.org/TR/css-tv"><cite>CSS TV Profile 1.0</cite></a> is for browsers that run on television sets.</li>
      </ul>

      <p>Other W3C documents that deal with CSS:</p>

      <ul>
        <li><a href="http://www.w3.org/TR/SVG11/"><cite>SVG</cite></a> contains the CSS properties for styling vector graphics.</li>
        <li><a href="http://www.w3.org/TR/CSS-access"><cite>Accessibility Features of CSS</cite></a> is a Note about how CSS can make documents more accessible.</li>
      </ul>

  </td>
    <td valign="top">

    <h3>Books</h3>

      <dl>
        <dt><a href="http://www.cssmastery.com/">CSS Mastery: Advanced Web Standards Solutions</a></dt>
        <dd>Author: Andy Budd</dd>
    <dd>Publisher: friendsof</dd>

        <dt><a href="http://www.peachpit.com/store/product.aspx?isbn=0321303474">The Zen of CSS Design: Visual Enlightenment for the Web</a></dt>
        <dd>Author: Dave Shea</dd>
    <dd>Publisher: Peachpit Press</dd>

        <dt><a href="http://simplebits.com/publications/bulletproof/">Bulletproof Web Design: Improving flexibility and protecting</a></dt>
        <dd>Author: Dan Cederholm</dd>
    <dd>Publisher: New Riders</dd>

        <dt><a href="http://www.transcendingcss.com/">Transcending CSS: The Fine Art of Web Design</a></dt>
        <dd>Author: Andy Clarke</dd>
    <dd>Publisher: </dd>

        <dt><a href="http://www.sensible.com/">Don't Make Me Think: A Common Sense Approach to Web Usability</a></dt>
        <dd>Author: Steve Krug</dd>
    <dd>Publisher: New Riders</dd>

        <dt><a href="http://www.principlesofbeautifulwebdesign.com/">The Principles of Beautiful Web Design</a></dt>
        <dd>Author: Jason Beaird</dd>
    <dd>Publisher: Sitepoint</dd>
      </dl>

  </td>
    <td valign="top">

    <h3>Tools</h3>

      <ul>
    <li><a href="http://www.westciv.com/style_master/">Style Master: CSS Editor</a></li>
    <li><a href="http://www.enginsite.com/css-editor.htm">EngInSite CSS Editor</a></li>
    <li><a href="http://www.athlab.com/Astyle/">A Style CSS Editor</a></li>
    <li><a href="http://www.altova.com/features_css_editor.html">Altova CSS Editor</a></li>
    <li><a href="http://www.newsgator.com/individuals/topstyle/">TopStyle</a></li>
    <li><a href="http://www.highdots.com/css-editor/">Style Studio CSS Editor</a></li>
    <li><a href="http://www.blumentals.net/rapidcss/">Rapid CSS 2008<a></li>
    <li><a href="http://www.skybound.ca/stylizer/">Stylizer<a></li>
    <li><a href="http://www.culturedcode.com/xyle/">Xyle<a></li>
    </ul>
  </td>
  </tr>

</table>

<div class="table-footer">
  <h2 class="hidden">Layout Examples</h2>
  <ul class="nav">
    <li><a href="#ex1">Inaccessible Table Layout</a></li>
    <li><a href="#ex2">Accessible Table Layout</a></li>
    <li><a href="#ex3">More Accessible with CSS</a></li>
  </ul>
</div>

CSS Source Code

#content h2.example2 {
   text-align: center;
   border: none;
}

#content table.example2 td {
  width: 25%;
}

#content table.example2 td h3 {
  text-align: center;
}

#content table.example2 td dl,
#content table.example2 td ul {
  margin: 0;
  padding: 0;
  margin-top: .75em;
  padding-left: 1.5em;
}

#content table.example2 td dt {
  margin: 0;
  padding: 0;
  margin-top: 1em;
  font-size: 100%;
}

#content table.example2 td dd {
  margin: 0;
  padding: 0;
  font-size: 100%;
  padding-left: .5em;
}

#content h2.hidden {
  position: absolute;
  left: -300em;
  top: -30em;
}

#content table.example2 td {
  border: black double medium;
}

#content div.table-footer ul.nav {
  margin: 0;
  padding: 0;
  text-align: center;
}

#content div.table-footer ul.nav li {
  padding-left: .125em;
  padding-right: .125em;
  padding-top: .125em;
  padding-bottom: .125em;
  display: inline;
}

#content div.table-footer  ul.nav a {
  padding-left: 2em;
  padding-right: 2em;
  padding-top: .125em;
  padding-bottom: .125em;
  text-decoration: none;
  font-weight: bold;
}

#content div.table-footer li a:link,
#content div.table-footer li a:visited {
  color: blue;
  background-color: white;
}

#content div.table-footer li a:active,
#content div.table-footer li a:focus,
#content div.table-footer li a:hover {
  background-color: blue;
  color: white;
}

More Accessible: Four Column Layout using CSS

All table markup for layout has been removed.
CSS float and clear properties are used to create column effects.

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

CSS level 2 revision 1 (Candidate Recommendation) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things.
CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need.
CSS Mobile Profile 1.0 is for devices such as mobile phones and PDAs.
CSS Print Profile is still a draft. It is aimed at low-cost printers.
CSS TV Profile 1.0 is for browsers that run on television sets.

Books

CSS Mastery: Advanced Web Standards Solutions: Author: Andy Budd; Publisher: friendsof
The Zen of CSS Design: Visual Enlightenment for the Web: Author: Dave Shea; Publisher: Peachpit Press
Bulletproof Web Design: Improving flexibility and protecting: Author: Dan Cederholm; Publisher: New Riders
Transcending CSS: The Fine Art of Web Design: Author: Andy Clarke; Publisher:
Don't Make Me Think: A Common Sense Approach to Web Usability: Author: Steve Krug; Publisher: New Riders
The Principles of Beautiful Web Design: Author: Jason Beaird; Publisher: Sitepoint

Tools

Stylizer

Xyle

HTML Source Code

  <h2 class="example3">CSS Resources</h2>

  <div class="css-col">

  <h3>CSS Layout Design</h3>

  <ul>
    <li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
    <li><a href="http://css.maxdesign.com.au">Max Design Tutorials</a></li>
    <li><a href="http://www.unmatchedstyle.com/">Unmatchedstyle</a></li>
    <li><a href="http://www.cssbeauty.com/">cssBeauty</a></li>
    <li><a href="http://cssvault.com/">cssvault</a></li>
    <li><a href="http://www.stylegala.com">Stylegala</a></li>
      <li><a href="http://cssdrive.com/">CSS Drive</a></li>
    <li><a href="http://styleboost.com/">Styleboost</a></li>
    <li><a href="http://www.csselite.com/gallery/">CSSElite</a></li>
    <li><a href="http://www.cssimport.com/">CSS Import</a></li>
    <li><a href="http://www.webcreme.com">Web Creme</a></li>
    <li><a href="http://www.cssmania.com">CSS Mania</a></li>
    <li><a href="http://www.designshack.co.uk/">DesignShack</a></li>
  </ul>

  </div>

  <div class="css-col">

  <h3>W3C CSS Resources</h3>

    <ul>
      <li><a href="http://www.w3.org/TR/CSS21/"><strong>CSS level 2 revision 1</strong></a> (Candidate Recommendation) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. </li>
      <li><a href="http://www.w3.org/TR/CSS1"><strong>CSS level 1</strong></a> (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. </li>
      <li><a href="http://www.w3.org/TR/css-mobile"><cite>CSS Mobile Profile 1.0</cite></a> is for devices such as mobile phones and PDAs.</li>
      <li><a href="http://www.w3.org/TR/css-print/"><cite>CSS Print Profile</cite></a> is still a draft. It is aimed at low-cost printers.</li>
      <li><a href="http://www.w3.org/TR/css-tv"><cite>CSS TV Profile 1.0</cite></a> is for browsers that run on television sets.</li>
    </ul>

    <p>Other W3C documents that deal with CSS:</p>

    <ul>
      <li><a href="http://www.w3.org/TR/SVG11/"><cite>SVG</cite></a> contains the CSS properties for styling vector graphics.</li>
      <li><a href="http://www.w3.org/TR/CSS-access"><cite>Accessibility Features of CSS</cite></a> is a Note about how CSS can make documents more accessible.</li>
    </ul>

  </div>

  <div class="css-col">

    <h3>Books</h3>

    <dl>
      <dt><a href="http://www.cssmastery.com/">CSS Mastery: Advanced Web Standards Solutions</a></dt>
      <dd>Author: Andy Budd</dd>
    <dd>Publisher: friendsof</dd>

    <dt><a href="http://www.peachpit.com/store/product.aspx?isbn=0321303474">The Zen of CSS Design: Visual Enlightenment for the Web</a></dt>
      <dd>Author: Dave Shea</dd>
      <dd>Publisher: Peachpit Press</dd>

    <dt><a href="http://simplebits.com/publications/bulletproof/">Bulletproof Web Design: Improving flexibility and protecting</a></dt>
      <dd>Author: Dan Cederholm</dd>
    <dd>Publisher: New Riders</dd>

    <dt><a href="http://www.transcendingcss.com/">Transcending CSS: The Fine Art of Web Design</a></dt>
      <dd>Author: Andy Clarke</dd>
    <dd>Publisher: </dd>

    <dt><a href="http://www.sensible.com/">Don't Make Me Think: A Common Sense Approach to Web Usability</a></dt>
      <dd>Author: Steve Krug</dd>
    <dd>Publisher: New Riders</dd>

    <dt><a href="http://www.principlesofbeautifulwebdesign.com/">The Principles of Beautiful Web Design</a></dt>
      <dd>Author: Jason Beaird</dd>
    <dd>Publisher: Sitepoint</dd>

    </dl>

  </div>

  <div class="css-col">

  <h3>Tools</h3>

    <ul>
    <li><a href="http://www.westciv.com/style_master/">Style Master: CSS Editor</a></li>
    <li><a href="http://www.enginsite.com/css-editor.htm">EngInSite CSS Editor</a></li>
    <li><a href="http://www.athlab.com/Astyle/">A Style CSS Editor</a></li>
    <li><a href="http://www.altova.com/features_css_editor.html">Altova CSS Editor</a></li>
    <li><a href="http://www.newsgator.com/individuals/topstyle/">TopStyle</a></li>
    <li><a href="http://www.highdots.com/css-editor/">Style Studio CSS Editor</a></li>
      <li><a href="http://www.blumentals.net/rapidcss/">Rapid CSS 2008<a></li>
      <li><a href="http://www.skybound.ca/stylizer/">Stylizer<a></li>
      <li><a href="http://www.culturedcode.com/xyle/">Xyle<a></li>
  </ul>

  </div>

  <div class="css-footer">
    <h2 class="hidden">Layout Examples</h2>
    <ul class="nav">
      <li><a href="#ex1">Inaccessible Table Layout</a></li>
      <li><a href="#ex2">Accessible Table Layout</a></li>
      <li><a href="#ex3">More Accessible with CSS</a></li>
    </ul>
  </div>

CSS Source Code

no code provided

Page Links

Layout Tables Example: Four Columns

Inaccessible: Four Column Layout using a Table

HTML Example

HTML Source Code

CSS Source Code

Accessible: Four Column Layout using a Table

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

Books

Tools

Layout Examples

HTML Source Code

CSS Source Code

More Accessible: Four Column Layout using CSS

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

Books

Tools

Layout Examples

HTML Source Code

CSS Source Code

Styling Best Practices

Text Styling

Layout Tables

Color Coding

Color Contrast

Background Images

Other Best Practices

Working Group

Bread Crumbs

Page Links

Layout Tables Example: Four Columns

Inaccessible: Four Column Layout using a Table

HTML Example

HTML Source Code

CSS Source Code

Accessible: Four Column Layout using a Table

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

Books

Tools

Layout Examples

HTML Source Code

CSS Source Code

More Accessible: Four Column Layout using CSS

HTML Example

CSS Resources

CSS Layout Design

W3C CSS Resources

Books

Tools

Layout Examples

HTML Source Code

CSS Source Code

Styling Best Practices

Text Styling

Layout Tables

Color Coding

Color Contrast

Background Images

Other Best Practices

Working Group