Over the years as I have built websites I have always encouraged clients to get involved with the editing of the site content themselves. Its important if your site is going to be successful that you keep it updated with fresh content and don’t let the existing content go out of date. So its also important you understand how these things actually work!

The use of tables for layout always provided a relatively easy way for someone with no knowledge of actual coding to create a neat and tidy page with varied layouts.

Unfortunately with the recent introduction of ‘mobile friendly’ or ‘responsive’ design, this is no longer an option.

Why not? I really like using tables!

Tables were originally created to store data but there was a point where they could be used to build entire websites from header to footer. Due to their somewhat rigid structure a new system using a html tag called the div was created (more on that later) which allows for much more fluid layouts not defined by rows and cells.

More recently you could still use a table to create a grid within your site (built with divs) pages, just to create neat and tidy page layouts or to hold a set of data.

Now that we have to worry about screen size. Things have gotten a bit more complicated.

The problem with tables is they don’t really care how wide your screen is. If they need to take up more space, they will.

I have tried to illustrate this below.

Any attempts to squash the table down to size will either result in its content being distorted or, would require the text and images to reduce down to an unusable size.

For this reason tables are no longer a viable options and should really be avoided anywhere on your website.

Next we will look out other options for creating more exciting layouts using classes and divs.