Moving from Tables to CSS

Step 1: Moving from Tables to CSS styled Tables

Take a look at the following table:

Banner
Side Nav Content

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.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“To iterate is human, to recurse divine” - L. Peter Deutsch