≡ Menu

CSS Table

Read an email from Sitepoint about using the not so popular CSS table command to create multi-column Web design. The reason why it’s not popular with CSS (Cascading Style Sheet) designers because Microsoft Internet Explorer does not support this table layout command. But this is going to change. IE 8 will be more compliance with industry standards and will support the CSS table layout command.

With CSS table, you can create table layout as simply as HTML table-based layout. Here’s a sample CSS codes to display a 3-column Web design.

#body {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
  }
#navigation, #content, #sidebar {
  display: table-cell;
  }
#navigation {
  width: 200px;
  }
#content {
  width: 66%;
  }
#sidebar {
  width: 33%;
  }

And the Web page looks like this in Safari Web browser:

css_table_001.jpg

You can visit Sitepoint to view the actual source codes at this URL:

http://www.sitepoint.com/examples/3col.html

Note that this “live” Web page contain IE 7 hack CSS codes to work around the restrictions of IE 7 and earlier versions.


#body {
  overflow: visible;
  width: 100%;
  }
#navigation {
  border-bottom-width: 1px;
  border-right-width: 0;
  margin-bottom: 1em;
  width: auto;
  }
The Ultimate CSS Reference
#navigation h2 {
  margin: 0;
  }
#navigation ul {
  margin: 0;
  text-align: center;
  }
#navigation li {
  display: inline;
  margin: 0 0.5em;
  }
#content {
  float: left;
  width: 60%;
  }
#sidebar  {
  float: left;
  width: 30%;
  }

Get the Sitepoint’s CSS book: The Ultimate CSS Reference

{ 0 comments… add one }

Leave a Comment