basic tips and tricks: 2. DIV vs. TABLE

A lot of people don’t really know when to use what kind of elements to build up an HTML page therefore I would like to take the time to explain tables and div elements.
Tables are created to display data, they are built for it and that’s the only thing they are good for. To explain this we can take a look at the elements that a table can contain. Thead (again in tags <thead></thead>) contains the header row information of a table, tfoot contains the footer or bottom row of a table and tbody contains the body or data of a table. The easy thing about tables is that you can change them very easily without breaking out of the design, the height is fit automatically and data is displayed correctly the first time you show it. Off course with a little bit of CSS you get the layout just like you want it to. For more information on this you can take a look at my earlier post (http://www.devexp.eu/?p=50)

Now what are div tags actually and why are they better to create a layout?

Div tags are nothing but logical divisions within the content of a page, they are built up with the <div> tag and make it easy to manage and style your HTML page just as you like. The cool thing about div tags is that you can name them individually, so you can affect them with CSS. As you can see the div will react a lot better with layout and give you all the possibilities you need.

The problem with tables is how unreadable and unusable they make your code. When you use a table as base to start from and create different rows and columns you will probably create other tables inside that table to display some content. And maybe you’ll end up with 3, 4 or even more tables within each other. When you have a page like that, please do take the time to look at the code and you’ll notice right away that it became very unreadable. When trying to change 1 column or 1 row you’ll see how complicated it gets. This method was very often used 3-4 years ago in web development but div tags are now getting the bigger hand in this now.

Let’s create a little example to illustrate this issue. This example will create data displayed like this:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td colspan="2">This is a Title</td>
</tr>
<tr>
<td width="50%">aaa</td>
<td width="50%">bbb</td>
</tr>
<tr>
<td colspan="2">cccc</td>
</tr>
</tbody></table>

When we try to create this same view built up with div tags you will get:

<div style="width: 100%;">This is a Title</div>
<div style="width: 50%; float: left;">aaa</div>
<div style="width: 50%; float: right;">bbb</div>
<div style="width: 100%;">ccc</div>

I guess the example makes it pretty clear, you write less code and you are very flexible while using the div tags and it makes it very readable.

When creating pages, be sure to think about your design before starting and think of tables as data displayers, not as design tools. It will ask a lot of exercising when you’re not used to work with div tags, but after a while, you’ll see all their advantages. These tags and tables are built with a cause, tag for creating divisions in your page, tables for displaying data. Don’t mix them up.