There has been a lot of speculation recently around using Tables in modern web design. I’d like to set the record straight.

Long ago in the beginning of HTML even before CSS; tables were created for the single purpose of holding tabular data, it wasn’t for a while that people began using tables to design their entire web layout. Unfortunately many people took tables to a strange extreme that has given them a bad name. It is because of this that some say tables kill web standards, are inefficient, waste bandwidth, and are impossible to maintain.

This is not true.

The web is essentially grid based with few exceptions, every html element that isn’t driven by flash or javascript boils down to being a box, a square. Hence why css web layouts refer to the box layout to understand html positioning and spacing.

Everything is a box and therefore everything is designed in a sort of grid. Even with carefully placed div elements you are just adding more boxes to our two dimensional grid based screen.

While there are many work arounds and methods to create fluid dynamic designs with div’s one thing that is lacking is how they work together. Yes we can intelligently decide which div’s are within the other and how we name them, however they never truly work together in unison. They aren’t directly aware of the other’s presence unless you are using parent and child relations in css.

A well designed table can use, for example, three rows and one-to-three columns depending on your layout. That’s it, for a standard site you are done. It is my belief that when writing a table to manage your design if you need another nested table you are doing it wrong. Use colspans and rowspans, they are very much backwards compatible and easy to understand. When you are done you may find that you’ve created less td (table data) cell’s than you would have created div boxes.

HTML and CSS coding is as much of an art as the design itself is. Look at your web design and think about the barebones of what you need to make the design happen. What people forget is that tables are entirely css friendly. In fact I encourage you to place only the tags with a class or ID in your html code and keep all of your style in an external css document just as you would if you were using div’s. Style your div’s with some simple thought and you’ll be amazed how fast a design comes together because all td table data cell’s and rows work together to create one simple grid defined by you to display your design.

Keep in mind even during the design phase of your website that no matter what you are working with a two dimensional grid. That’s what the web is, and although you can create fancy graphics with 3D and rounded edges when you are looking at the html and stylesheet you are still writing code for a grid. Tables are made to create grids, plain and simple. Think of the columns and rows you will need and don’t overdo it! You can still have div’s, paragraphs, lists, and more inside where your content belongs. If you find yourself creating four or more table rows you may find you are doing it wrong, or if you have four or more columns you are doing it wrong. Keep it simple and make it work, use CSS in conjunction with your tables and allow your cells to flow with eachother in one solid working grid. If you feel you need a nested table, rethink your design and replan your attack. Just know that tables are your friend and when you take the time to understand them they will be a valuable asset to your web designs.