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.
Comments