devexp

Let me ask you a few question: When you are working on a project (website, program …), are you working on that folder directly? Are you working directly on the files of the server? Are you working without constant backups?

If your answer is yes on at least one of these questions, I advise you to take a look at subversion (SVN). I’ll give a little resume on what this is but on Wikipedia the details are described in a great way.

What is SVN?

It s a version control system for source code, web pages and documentation and by using trunks, branches and tags you get a complete file backup system.
Before you start digging in to this kind of system, you need to understand the differences between trunk, branch and tags.

We are using tortoiseSVN to do all the SVN actions like committing, merging, tagging, exporting. It is based on Subversion and provides us a nice interface to work with this system. Off course, in Eclipse (the program we use to edit our programs and websites) subversion is integrated. (I think there is a subversion system for Dreamweaver on the market)
At any time you can go back to previously saved versions of your file. Isn’t that a super advantage and a must for everyone???

I recommend this system to everyone, it might cost you a little bit of time to get into it but it is necessary.

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.