There are two schools of thought when it comes to the structuring of a web page via HTML. First there is the method that uses tables to position everything on the page. On more complicated layouts this often leads to tables nested within other tables. The second methodology takes advantage of the <div> tag. Everything that can be accomplished with one can be accomplished with the other, so it really comes down to a preference of which methodology do you prefer to “think in”.

What follows is a very simple “Hello World” example. Both code snippets produce the same page when viewed through a web browser. The code for both methodologies is provided (tables first, followed by the div style).

As you can see in the example the div code is much simpler and more elegant. Again, this is not always the case but was in this case since it was written first. While both of these examples have been very simple and straightforward it is not hard to take the concepts and apply them to much larger and more complicated structures.

<table>
  <tr>
     <td>
       Hello World!
     </td>
     <td>
       Hello World!
     </td>
   </tr>
</table>

<div style="float:left; margin:0px 119px 0px 3px;">Hello World!</div>
<div style="float:left;">Hello World!</div>

We will step through the code that utilizes tables first. The table was created with a fixed width however the table data elements were not given widths and thus defaulted to 50%. This provides the large amount of whitespace between the two “Hello Worlds”. The div code appears to be a bit more complex upon first inspection but is very simple as well. Within the style declarations in both div tags we encounter “float:left;”, this code puts both “Hello Worlds” on the same line. The closing div tag will automatically put all code below it on a new line. Therefore it is necessary to float the elements to get them on the same line. The white space between the two “Hello Worlds” is then created by the margin declarations.

The previous example may give the impression that it easier and more elegant to code using the table structure. The code appears much cleaner and has less attributes need to achieve the same output. However that is not the truth. I merely appear that way since I coded the table version first and then had to play with the div version to make it match. To illustrate this point I will do it the opposite way for the next example; code the div version first and then make a table version match it.

<div style="width:350px;">
  <div>
    Hello Earth!
  </div>
  <div style="float:right;">
    Hello Earth!
  </div>
</div>

<table width="356px" style="margin-left:-3px;">
  <tr>
    <td colspan="2">
      Hello Earth!
    </td>
   </tr>
  <tr>
    <td style="text-align:right;" colspan="2">
      Hello Earth!
    </td>
  </tr>
</table>

As you can see in the example the div code is much simpler and more elegant. Again, this is not always the case but was in this case since it was written first. While both of these examples have been very simple and straightforward it is not hard to take the concepts and apply them to much larger and more complicated structures.