Blog

Tables in Web Design

Attention: open in a new window.

Blog

Over the past decade, a battle has been waged over the use of tables in the layout of web pages. If you load your website in a browser, and look at the Page Source from your browser's View menu, and all the sections of your webpage are inside [table], [tbody], [tr], [th], or [td] tags, the layout for your site is based in HTML tables.

In the late 1990's, it was this type of design that changed the web from a text and image medium to one where the user experience could actually be 'designed' by controlling the layout of different sections of the page inside tables.

Alas, the web moved forward with the introduction of Cascading Style Sheets (CSS) and those tables were able to be reproduced with CSS code, including the physical position of old table 'cells', internal padding and margins, background and border color, style and weight, etc..

In the 10 years that have followed, the debate has raged as to whether CSS should replace tables, or the basic table layout format shouldn't be fixed if it "ain't" broke. Here's our take.

Tables still work, but CSS works better in most cases.

It is well known by experienced websmiths that tables are less efficient, meaning they take longer to load and take up more bandwidth (more expensive) than their CSS equivilents.For example, look at the following examples:

With Tables:

[table width="100% align="center" bgcolor="#FFFFFF" border="1" bordercolordark="#666666" bordercolorlight="#CCCCCC" cellpadding="3" cellspacing="5"]

[tr id="content row"]

[td align="justify" width="50%"] Content1 [/td]

[td align="left"width="50%"] Content2 [/td]

[/tr]

[/table]

With CSS:

[div id="page"]

[div id="content1"] Content1 [/div]

[div id="content2"] Content2 [/div]

[/div]

The table design uses 270-odd characters, and the CSS version uses about 100 - a saving in load time (and bandwidth usage) of about 63%!

Tables are more time-consuming (more expensive) to maintain since each one must be maintained separately, are not as flexible except for boxy designs unless you use nested tables - which are a distinct design no-no, do not always work similarly across all types of platforms, and can negatively effect Search Engine Optimization.

So why use tables for layouts at all? Well, sometimes it's just easier. If you require a simple box layout for only a few pages, either tables or CSS will equally do the trick. However, if your website needs (or you want) a more advanced layout, have different types of content spread across the site, or want to maximise the efficiency and SEO of your site, then CSS is the way to go.

Tables will not go away any time soon (if they ever do) because of the tens of thousands of websites out there that use them. On the other hand, most of those sites do not rank on the first page of a Google search.

My answer, and the preferred method at ScottBinnie.com is to use CSS. Although there can be a bit more up-front cost in timeand aggrivation in order to satisfy the needs of all the various browsers, maintenance and modifications are much faster (cheaper) and as the web moves forward, CSS will likely become more capable whereas HTML tables will remain static in their ability.

Scott

Bookmark

Email This

Trackback(0)

TrackBack URI for this entry