Tables vs DIVs - Reasons why DIVs are better.

Tables are still heavily used by web designers to create layouts for websites. Honestly, I feel that for simple layouts, you could definitely get away with using tables, but even for a simple website, a code base using Tables will be sloppier compared to a DIV based implementation.

Why does that matter?

Speaking from experience, I find that if you are working on a team with other designers or if you are taking over a project. It is always nice to have a sense of conformity. If I saw a layout using DIVs which were organized by ID, I could quickly familiarize myself with the layout and easily make changes in the CSS file if needed. Typically DIVs are labeled by ID, so you can easily make changes in the CSS file referencing the ID as well as understand what the DIVs purpose is, assuming the designer uses understandable IDs such as "Wrapper", "LeftColumn", etc...

With tables, I am not saying the same is not feasible, but when a layout gets more complicated, you could find yourself getting lost in a mess of (tr) and (td) tags . Not to mention, if a user modifies rowspan and colspan attributes for a table, the code may not flow as logically to you and you may get lossed trying to define column and row locations. Additionally, with complicated layouts, Table based layouts usually have tables inside of tables, this just makes it even more messy and difficult to navigate through.

Lastly, with tables you will find that your source files will have many more lines of code opposed to a DIV layout and will be more difficult to make adjustments to as the site layout evolves. With DIVs, you have a more semantically correct code base that reads like a resume, you can easily make adjustments to a layout as it evolves, and you will have much cleaner, concise source files. Not to mention, other developers you deal with will have an easier time working with your source files.

Keywords: Tables vs DIVs

Submit a Comment



Posted on: Dec 5, 2010 9:01 pm

DAMN, I'm going back over this I was a idiot back then :P , UL and OL ordered and unordered lists LI is just to create a new line in the list. I'll have to experiment sometime with divs and see if I can't get a whole website done with divs instead of implementing tables.


Posted on: Oct 15, 2008 9:25 pm

you should use ul, ol, and li for lists


Posted on: Oct 14, 2008 5:11 pm

blah I wasnt thinkin right, Div`s are nice but Tables are the way to go if your creating a list or a menu on a webpage


Posted on: Oct 9, 2008 3:52 pm

I think you meant preferences. But anyways, DIVs are actually more professional and industry standard opposed to tables, which are meant for spreadsheet like data. Many developers use them to return multiple rows queried from a database.


Posted on: Oct 9, 2008 3:35 pm

This is also an opinion yes tables are nice and more professional, But everybody has preferations