Faster page loading
Table-based layouts are notorious for having an extraneous amount of junk markup. In case you're unaware, Wikipedia defines markup as:
a set of annotations to text that describe how it is to be structured, laid out, or formatted.
Pertaining specifically to web design, markup is the XHTML/HTML code used to structure, lay out, and format the design of a website. So, why are table-based layouts accused of containing junk markup? The easiest way to answer this question is to show a live example of a web page marked up using tables versus that very same web page marked up using CSS. Sitepoint.com already put together a very nice example, so rather than creating our own, we'll just reference theirs.
First, view the source code contained within their table-based layout. This page has 245 lines of code. Notice within the markup there are an obscene number of instances of:
- td align
- td width
- bgcolor
- width, height
- br (line break)
- font tags (font face, color, size)
- cellpadding, cellspacing, border
The biggest drawback to using tables is that both the content (text, images) and visual information (layout, positioning, text sizes, etc) are contained within the same HTML, PHP, or ASP file. One of the biggest advantages to migrating from a table-based layout to a CSS-based layout is the fact that the content is stored within the HTML, PHP or ASP file and the visual information is stored within a CSS file(s).
Next, view the source code contained within Sitepoint.com's CSS-based layout. This page has 170 lines of code. However, Sitepoint.com decided to include the style sheet information internally rather than externally in a .CSS file. Had the style sheet information been included in a separate .CSS file, then this page would only have around 45 - 50 lines of code - about 5 times less than what the same table-based layout had. Wow!
Note: When a style is applied to more than one page, make sure to use external CSS style sheets rather than including the style information internally (on the same page as the content). Internal style sheets are only appropriate if there is one page using the style information. For more on internal and external style sheets visit w3schools.com.
Lets take a look at the code used within the CSS example. As you can see, junk markup found within table-based layouts are replaced in CSS layouts. These replacements include:
- divs replace tables as the main structural elements
- no more height, width, cellpadding, cellspacing, border, bgcolor, font tags; all layout information is contained separately within the CSS stylesheet
- h1, h2 tags replace font tags for headings
- br tags are eliminated
A load time that could make you cringe
When comparing the load time of the table-based layout versus the load time of the CSS-based layout, the table layout took 2 - 4 times longer for the page to load (.25 - .4 seconds versus .1 - .12, respectively). Although we're talking about milliseconds in this particular example, it doesn't matter. People hate waiting for websites to load. It might just be those extra milliseconds that make an impatient visitor choose to point to a quicker website with similar content.