Take a look at the following table:

Now lets take a look at some traditional HTML that might have been used to create this monstrosity:

<table align="center" cellpadding="10" cellspacing="1" border="0" bgcolor="#000000" width="80%" height="200">
 <tr>
  <td height="60px" valign="middle" colspan="2" bgcolor="#ffffff">Banner</td>
 </tr>
 <tr>
  <td width="30%" valign="top" bgcolor="#ffffff">Side Nav </td>
  <td valign="top" bgcolor="#ffffff">Content</td>
 </tr>
</table>

How we can improve this by using a CSS styled Table? First the HTML:

<table id="main" cellspacing="1">
 <tr>
  <td id="banner" >Banner</td>
 </tr>
 <tr>
  <td id="side">Side Nav </td>
  <td>Content</td>
 </tr>
</table>

And now the CSS:

#main {
	width:80%;
	height:200px;
	background:#000;
	margin:auto;
}

#main td{
	background:#fff;
	vertical-align:top;
	padding:10px;
}

#banner {
	height:60px;
	vertical-align:top;
}

#side {
	width:30%
}
/* CSS Document */

So what did we do?

• Gave Table and individual Cells an id
• Moved all widths and heights into CSS
• Moved all text alignments into CSS
• Controlled background colours with CSS
• Aligned Table in the centre using margin:auto

The results are exactly the same, but there are significant advantages to using the CSS styled Table. These are:

• Reduced Markup: The amount of HTML now used is considerably reduced, improving download time and SEO.
• Valid Markup: The code will now validate correctly as all deprecated attributes have been removed from the HTML.
• Site Consistency: Because the table is now styled by an external CSS there is a better chance for consistency across a website where all tables link to this one CSS file. This means no more changing column widths going from page to page.