Site Design Techniques – Tables Vs CSS


The craft of website design is not to be taken lightly – there are many different techniques and approaches for designing the website. The prominent ones are with the use of tables and by using CSS. This article will review the differences between these approaches, including the pros and cons of each.

Tables – background

The use of tables for website design was introduced back when websites became graphic. Most computer users are familiar, more or less, with the concept of placing data in tables from the usage of Word, Excel and such.

A table enables you to define the number of rows and columns, merge and split specific cells, define measurements for each element regardless of other elements.

As soon as people had learned to hide the border, thus concealing the fact they are actually using tables, this practice gained rapid popularity.

Despite the popularity, use of tables is considered “outdated”, even though most websites still use it.

Table usage – pros and cons

As aforementioned, the biggest advantage of table usage is the intuitiveness of this practice. Placing an image next to the text is a breeze – just create a table with one row and two columns, the wide one for the text and the narrow one for the picture. Alternatively, create your own hand-made menu by creating a table with many cells in a single row or column and fill them with text, picture or even flash buttons. What if you want to design each cell separately? No problem! Tables allow that, because every cell is an independent entity, able to accept its own settings. You can set general settings for your rows, and all cells would be affected.

It’s a mixed blessing, as this separation of elements is reflected by a bloated code, making your page “heavier”. This has negative implications, such as slower access, lower search-engine rating in comparison with faster websites…

Another disadvantage is that the contents becomes an integral part of the design. You can’t modify the table without having to move the data away first. It’s tolerable when speaking of a small website, that was built with the efforts of one person, but when speaking of a larger website with many people updating it, each of them will have to learn the proper way of construction.

CSS divisions – background

The CSS language has been enjoying a rise in popularity as a supplemental language to the traditional HTML – causing it to become more and more relevant to site design.

In a nutshell, this approach introduces “containers” – usually, ‘div’ tags – and placing the contents inside these containers. If my text is placed in a container, I don’t have to touch the text to change it, I just tweak around the container’s settings.

This approach is the pinnacle of the idea that contents should be separated from its design, as the design could be changed (for example, when viewing with different, unorthodox browsers) but the contents should remain the same. For example, if I ‘teach’ my website to figure if a visitor is using a cellphone to view my website, I can guide it to load a specific design for that visitor, obviously lighter and phone-optimized, instead of hoping that the mobile browser is advanced enough to interpret my website correctly.

When working with CSS classes, there would usually be a single design file with all of the settings (one can imagine a cookbook), and each element draws only the needed setting (or, recipe) for itself.

CSS usage – pros and cons

This approach is considered the successor of the table-based design, and many modern-day designers automatically connect “table design” with the term “outdated”. This approach is more advanced and allows you to have more creative freedom – changing the way paragraphs look does not require you to change every paragraph manually, you just tweak around the very definition of a paragraph. If I want, let’s say, to have my headers bold, red and bigger, I just have to change the definition of a header in my external CSS file, and all headers will be automatically affected. This means lesser code, as the settings are saved once, which results in a faster website.

As mentioned before, using CSS allows you to use different design for any browser, making your website browser-compatible and allowing non-standard users to see your website the way you meant them to.

The biggest con is derived from the very definition of this approach – it’s a language, a state of mind to be learned. The work is unintuitive for designers who haven’t sat down and studied this craft. As opposed to the common approach of “WYSIWYG” (“What you see is what you get”), working with CSS happens “behind the curtains” by definition – writing textual design settings without being able to see the effect until the file is uploaded. It would require you to have average understanding of HTML code at the very least, and you should be prepared to work in a code-based interface, so forget about your cozy and familiar interface right away… definitely not for beginners!

Also, CSS designers must be aware that their target audience consists of users that use updated browsers only. Even though most home users already use the latest version of their favorite browser, many corporate users have not made the change yet, and are still using software that doesn’t render CSS properly.

So what’s best?

The million-dollar question.

A professional web-designer, by definition, would warmly recommend the strict use of CSS, and he will probably be right. It’s an advanced technology that grants more freedom, enhanced compatibility and makes it easier to make changes in the future.

A beginner would recommend the common terms that are familiar from computing – easy to use, intuitive, simple tables.

Most websites are still table-based, so it is highly unlikely that tables will become unsupported anytime soon. still use tables, and they do not suffer from any SEO penalty or a lacking PR…

The balance is somewhere in between, in accordance to the level of the builder.

If you’re new to this field, go ahead and use tables. It will be easy for you, and you can still reach sophisticated results with a cunning use of table placement.

If you’re an experienced designer, you will probably refrain altogether from using tables and will strictly use containers. That’s fine too, as long as you know what you’re doing – do it.

You can also compromise, and go for both. Tables can be applied with CSS styles, too! If you’re designing a website for someone, allow them to create tables, then apply a design on top of the tables.

The approaches are not in a state of war with each other, despite the fact that designers enjoy to make it look like they are.

In any case, choose what feels right for you, and express yourself best with the tools you are familiar with! Forced design always looks worse, regardless of the technology used…


Leave a Reply