Click here to Skip to main content
12,758,782 members (37,052 online)
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 19 May 2011

Rendering Speeds of Web Pages using Tables versus CSS

, 11 Jun 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
There are evangelists for laying out web pages using CSS and there are evangelists for laying out web pages using Tables. Both camps might profit from this article.


There are evangelists for laying out web pages using CSS and there are evangelists for laying out web pages using <table>s. Both camps might profit from this article.


I was interested in determining if the time required by a user agent to render a web page was significantly different between web pages laid out using <table>s and those laid out using CSS. There still seems to be a lot of debate regarding rendering time, but there does not appear to be a lot of objective data. At the same time, I wanted to determine some minimal CSS that would create a three column "liquid" web page. A liquid design allows a web page to be displayed in whatever space it is given. Normally such a web page has its widths specified as percentages.

I decided to build a three column web page. In a layout defined by <table>s, this is relatively simple. However, in a layout defined by CSS, this simplicity is replaced by an increase in complexity. The major reason: unless special steps are taken, each column is independent of each other. This, in turn, means that the background of the columns may not extend to the same "bottom" across the page. In the following illustration, the body has a Lavender background and each column is colored differently, thus depicting the difficulty.

Flawed CSS layout

One method to avoid this problem is well described in Equal Height Columns with Cross-Browser CSS by Matthew James Taylor. When applied to the previous web page, it becomes:

Fixed CSS layout

This is what I wanted, so I used Taylor's method to generate the CSS web page for the experiment.

A reader pointed out that I failed to say that the CSS layout was designed not only to provide a liquid flow but also to improve Search Engine Optimization. The former is achieved by using percentage widths. The later is achieved by the rather complex CSS that places the content of the middle column first in the HTML (apparently, search engines place greater import on the first text it encounters).

The Experiment

To perform the experiment, I took the following steps:

  1. From the CSS web page derived using Taylor's method, I derived the web page using <table>s. I took care to ensure that both contained the same visual elements.

    CSS Layout Table Layout

  2. Each web page is made up of a pair of files: the HTML file and the CSS file. Each file was validated using the appropriate W3C validation service (i.e., Markup and the CSS).
  3. When the web pages were validated, I compressed the HTML and CSS files using HTML Compressor (specifically version 1.0). Once compressed, the two pairs of HTML and CSS files were placed on my yet unpublished website.
  4. I used the NetRenderer Internet site to measure the page rendering times. The tool was provided the web page address of the HTML file located on my web site. The tool was run twelve times and the rendering times (in seconds) were recorded in an Excel spreadsheet.

The Results

The raw data and the data with outliers removed are:

Raw Data Outliers Removed
Table Div Table Div
1.856 1.977 1.668 1.686
3.445 1.844 1.712 1.705
4.646 1.833 1.759 1.725
9.420 2.726 1.772 1.740
1.668 1.686 1.796 1.801
1.772 1.725 1.856 1.826
1.759 2.352 1.857 1.833
6.831 1.801 1.996 1.844
1.712 1.705
1.796 1.826
1.857 4.262
1.996 1.740
3.230 2.123 1.802 1.770

Attempting timing using the Internet may randomly inflate values due to loading. To remove that bias, I deleted the four largest values (outliers).


From the averages (bolded values) of the "Outliers Removed" column, it appears that there is little difference in the time required to render pages laid out using <table>s and those laid out using CSS.

An Observation

In developing the web pages for this article, I ended up with the following source code lengths:

Source Characters
3ColumnCSS.htm 1776
3ColumnCSS.css 1007
3ColumnTable.htm 1867
3ColumnTable.css 588

These source code lengths are not significant. But the content of the 3ColumnCSS.css file is. Consider the contents of the 3ColumnCSSWithComments.css file (included in the downloadable project files).

  border:0;                 /* This removes the border around */
                            /* the viewport in old versions of IE */
  background-color:#FFFFF0; /* Ivory */
  min-width:600px;          /* Minimum width of layout - remove */
                            /* line if not required The min-width */
                            /* property does not work in old */
                            /* versions of Internet Explorer */
  margin:0.8em 0 0.2em 0;
  margin:0.4em 0 0.8em 0;
/* Header styles */
  border-bottom:#c00 solid 3px;
.header h1,
.header h2,
.header h3
  padding:0.4em 15px 0 15px;
/* page content container */
  position:relative;        /* This fixes the IE7 overflow hidden bug */
  width:100%;               /* width of whole page */
  overflow:hidden;          /* This chops off any overhanging divs */
/* common column settings */
  width:100%;               /* width of page */
  padding:0 0 1em 0;        /* no left and right padding on columns, */
                            /* we just make them narrower instead */
                            /* only padding top and bottom is */
                            /* included here, make it whatever */
                            /* value you need */
  overflow:hidden;          /* This chops off any overhanging content */
/* 3 Column settings */
  background:#FFB6C1        /* LightPink */
.three_column .center_column
  right:25%;                /* width of the right column */
  background:#FFDAB9;       /* PeachPuff */
.three_column .left_column
  right:50%;                /* width of the middle column */
  background:#AFEEEE;       /* PaleTurquoise */
.three_column .load_first
  width:46%;                /* width of center column content (column */
                            /* width minus padding (2%) on either */
                            /* side) */
  left:102%;                /* 100% plus left padding (2%) of center */
                            /* column */
.three_column .load_second
  width:21%;                /* Width of left column content (column */
                            /* width minus padding (2%) on either */
                            /* side) */
  left:31%;                 /* width of (right column) plus (center */
                            /* column left and right padding (2%) ) */
                            /* plus (left column left padding (2%) ) */
.three_column .load_third
  width:21%;                /* Width of right column content (column */
                            /* width minus padding (2%) on either */
                            /* side) */
  left:85%;                 /* Please make note of the brackets here:*/
                            /* (100% - left column width) plus */
                            /* (center column left and right padding */
                            /* (2%) ) plus (left column left and */
                            /* right padding (2%) ) plus (right */
                            /* column left padding (2%) ) */
/* Footer styles */
  border-top:#c00 solid 3px;
.footer p
.footer .W3C_image

Herein the comments are retained, revealing, I believe, a significant complexity justifiably incurred by Taylor's method. However, those considering using CSS for web page layout should be forewarned.


Browsers Tested

Google Chrome Firefox Internet Explorer Opera Safari

All of the browsers produced the expected results for both table and CSS layouts.


  • 05/19/2011 - Original document
  • 06/11/2011 - Added a paragraph in response to a reader's comment


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United States United States
I started programming more than 42 years ago using AutoCoder and RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround between submitting a job for compilation and execution was about 3 hours. So much for the "good old days!" Today, I particularly enjoy programming real-time software. I consider myself capable in WinForms, Mobile Apps, and C# although there are occasions that I yearn to return to C and the Win32 API.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
EdMan19611-Jun-11 12:04
memberEdMan19611-Jun-11 12:04 
GeneralRe: My vote of 5 Pin
gggustafson19-Jun-11 6:32
membergggustafson19-Jun-11 6:32 
GeneralNice article Pin
Templar88730-May-11 15:53
memberTemplar88730-May-11 15:53 
GeneralRe: Nice article Pin
gggustafson30-May-11 18:13
membergggustafson30-May-11 18:13 
GeneralMy vote of 3 Pin
Programit24-May-11 2:13
memberProgramit24-May-11 2:13 
GeneralRe: My vote of 3 Pin
gggustafson24-May-11 5:47
membergggustafson24-May-11 5:47 
Generalyou missed whole lot of points.. Pin
HaBiX19-May-11 22:58
memberHaBiX19-May-11 22:58 
AnswerRe: you missed whole lot of points.. Pin
gggustafson20-May-11 4:10
membergggustafson20-May-11 4:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 11 Jun 2011
Article Copyright 2011 by gggustafson
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid