Learning DIVs

Recently, I’ve been experimenting with using DIVs instead of TABLEs for creating Region Templates in Oracle Application Express.

DIVs seem to have a lot less “moving parts” – or places where the code can become corrupted. Troubleshooting a missing <TD> tag is never a fun exercise, and by using DIVs, you can largely avoid that.

However, DIVs tend to have issues with cross-browser development. What looks great on Firefox doesn’t even render on MSIE. That alone can be a challenge to troubleshoot,

Having said all of this, I was able to take this Region Template:

<table width="100%" cellpadding="0" cellspacing="0" id="#REGION_ID#">
<tr>
<td>
 <table border="0" cellpadding="1" cellspacing="0" width="100%">
  <tr>
   <td bgcolor="#666666">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
     <tr>
      <td>
       <table border="0" cellpadding="5" cellspacing="0" width="100%">
        <tr>
         <td height="25"><span class="projectInfoRegion">#TITLE#</span><br />
           <span class="content_text">#BODY#</span></td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table width="100%" cellpadding="0" cellspacing="0">
     <tr>
      <td valign="top"><img src="/i/st/st_region_bottom_shadow.gif" width="100%" height="3"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</td>
</tr>
</table>
<br />

And reduce it to just this:

<div class="regionContainer">
<div class="regionOuterContainer" id="#REGION_ID#">
<div class="regionInnerContainer">
<div class="regionButtons">#CLOSE#</div>
<div class="regionTitle">#TITLE#</div>
<div class="regionBody">#BODY#</div>
</div>
</div>

Now keep in mind, pages built with DIVs aren’t much to look at without an associated CSS file. I used the following entries for my new Region Template:

.regionContainer
{
padding-bottom:10px; font-family:Arial; font-size:12px; margin-top:5px;
}
.regionOuterContainer
{
border-bottom:1px solid #aaa; border-right:1px solid #aaa;
}
.regionInnerContainer
{
padding:5px; border:1px solid #000;
}
.regionTitle
{
font-size:18px; font-weight:bold;  border-bottom: 1px solid #ddd;
}
.regionButtons
{
float:right;
}

CSS Zen Garden offers some pretty compelling examples of how powerful CSS-based design can truly be. Each example on the site uses the exact same HMTL. All attributes, from images to spacing, are defined in the CSS.

Adding the number of lines in the CSS (20) to the actual DIV-based HTML (8) is almost the same as the TABLE-based HMTL (32). However, the DIVs allow you to do more “cool” things, such as hiding and showing a region.

I am also finding that by using DIVs and a CSS, you have an easier way to make more site-wide changes. I can easily change the Font of that template by altering one line in the CSS file. I can also fine-tune any of the attributes of each of the DIVs by adding the appropriate directives to the respective class.

Despite their cross-browser issues, I’m finding that designing UIs using DIVs and a CSS is much more elegant than the traditional TABLE-based approach.