Tables. A Guide of When and Where.
Wednesday, March 17th, 2010The face of the matter is, tables are the most misunderstood, misused, and consistently debated tools a web designer faces on a daily basis. There are times when using a table can be a time effective, logically sound solution to help layout lots of information, and then there are elements that don’t necessarily need tables, but can be solved with a single div tag with a float statement.
This will split the good from the bad, the useful from the wasteful, and the logical from the down right confusing.
Quick & Efficient
You can save a ton of time coding out lots of information with tables. Having worked in several fast-paced design firms, it’s all about making deadlines and efficiency. While you’re skimming through css blogs looking for the best way to code a community form, your boss will be wondering why you’re taking so long to finish, when you could just simply make a table, set it to the right attributes via style-sheet, make the appropriate number of rows and columns, and voila! You’re done in under 20 minutes with minimal to no browser errors. A Table can be a quick way to solve a layout that contains multi-columned information, such as a community form and a large list of information.
Reliability & Consistency
One of the best things about tables is their consistency between all browsers, no matter how much information you place in it or what way you do it, you can count on it to look the same no matter what browser you’re using.
The Right Way To Do It
Make sure that before you use a table, type this in your style-sheet:
td {
text-align:left;
vertical-align:top;
}
What this insures is that when you place a div in a table, that the div id will be aligned at the top and left of that column. After you have that in your style sheet, say you want to make a 4 columned, 5 row chat example:
First make the table
Create the divs inside the table
Now set the border of the table to border=”0″
Make sure to properly margin your divs and you’re done in record time!
The Bad Thing About Tables
Tables are the first construction tools used to create websites since the internet opened to the public, therefore they’re looked down upon and considered outdated to most designers and developers. If you haven’t noticed, the code isn’t pretty. If you’re sharing development of a website with a fellow developer, make sure to label your tables with comment tags! And lastly, don’t use tables for the container of the actual website. The reason being is because you can accomplish that easily with CSS. Never use tables for the actual construction of your website’s layout, unless you have no other option, strictly use tables for organization of data.
Like I said in the beginning of this post, Using tables is a highly debated subject, so i want you to do just that. Tell me why I’m wrong, and why. The main purpose of this post is to help both beginners and experienced designers to consider tables every once in a while. Just because huge CSS galleries (to this day I still don’t understand) reject beautifully made websites because they contain a single table, don’t sacrifice time and convenience over an opinion.




Casey is a great young talent. His desire to learn, and determination to come up with the best solution makes him an asset to any team.�