The Pros and Cons of Tables

When I started my job as a fulltime web designer, I discovered that my boss used tables for everything. This wasn’t that surprising considering he is a back end developer as opposed to a front end designer. I of course yelled at him (in my mind so as not to get fired) about how horrible tables are. Since then, I’ve settled more in the middle, and I figured I should offer my two cents on the debate of Tables Versus CSS for layout purposes.

First let’s take a look at the oh-so-obvious faults of tables, and why these cons are such an issue.

Con 1. Tables are incredibly rigid. Short of moving the content from one cell to another, changing the layout of anything within your table is incredibly difficult. Especially since you won’t want your layout to look like it uses a table, you’ll end up with rowspans and colspans everywhere.

Con 2. Table code can get messy. If you use tables for all your layout, then you’ll end up with nested tables all over the place. The code becomes hard to read, and almost impossible to edit.

Con 3. Tables have different default settings in different browsers. If you want your site to look the same no matter what browser your user is viewing it through, then you’ll have to go through at set padding, margin, border, et cetera to the values you want them to be. This is a hassle because of all the tags associated with tables. You’ve got table, tr, th, and td. Mind you, even if you don’t use tables, you should be setting default CSS values anyway to avoid cross-browser issues.

Con 4. Tables increase the size of your files. That’s right. Tables just often require more code. Even though the difference in load time for most people is negligable, it is still something to consider.

Alright, and now the benefits of tables, and why it is important to set aside your bias against tables and accept these pros.

Pro 1. Tables can be very helpful for certain design elements. Take rounded corners of any box for example. Though you’ll need anywhere between 1 and 8 images to make a rounded corner box (1 if the box does not need to expand, 3 if it expands in one direction, and 8 if it expands in two), tables will make the implementation of this a lot easier. Of course, you can use divs for this, but you won’t need to edit this table, just the content and images inside. Divs can float incorrectly in different browsers, ruining your rounded corner box, but the table won’t break.

Pro 2. Tables are great when you need to show… tables. That’s right, sometimes the best way to display information is in a table, and obviously the best way to implement that in the web is using… you guessed it, a table!

Pro 3. Tables make certain difficult CSS issues much easier. With tables, you can easily vertically center text, or ensure that two separate sentences of text will always appear next to each other horizontally. Obviously, there are tricks in CSS around this anyway. To vertically center a line of text, you can set the line-height to the same pixel height as the div it is in. So clearly, there is always a way around this problem.

When it comes down to it, every pro or con you find for tables doesn’t really matter. For every pro, using a little CSS magic, you can work around it. For every con, using a little effort or time can work around it too.

In the end, using floating divs is a much safer route to go for your layout. You can change the location of content very easily, your code will be cleaner, and make more sense logically when reading through it. But don’t knock down tables. Use tables for your overarching page layout (header, body, footer for example). These things won’t change as much, so tables are a clean and safe solution. Basically, tables aren’t 100% evil or amazing. Use them when appropriate, and don’t overdo it, and you’ll be just fine.

2 Responses to “The Pros and Cons of Tables”

  1. Linton Thompson says:

    This information was very helpful!

  2. Fren Dee Bee says:

    Very nice explanation. I always think of using div when it comes to layout, but your right when we can use it on header, body and footer.