Layout Tables Example: Four Columns

Inaccessible: Four Column Layout using a Table

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.

Other W3C documents that deal with CSS:

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

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&nbsp;2 revision&nbsp;1</strong></a> (Candidate Recommendation) contains all of CSS level&nbsp;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

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.

Other W3C documents that deal with CSS:

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

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&nbsp;2 revision&nbsp;1</strong></a> (Candidate Recommendation) contains all of CSS level&nbsp;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

HTML Example

CSS Resources

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.

Other W3C documents that deal with CSS:

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

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&nbsp;2 revision&nbsp;1</strong></a> (Candidate Recommendation) contains all of CSS level&nbsp;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