Step away from the table...moving from <table> to <div> in your templates

Apex templates can be somewhat daunting when we go and look at them in the builder...lots of HTML and tags and bears oh my! So lets look at creating a simple region template that will move us away from table tags and to div tags. WAIT!!! Why would I want to do this? Flexibility...a div structure will give you more control over the elements inside it than a table structure...Now apex will still generate some table structures by default, but we can at least encapsulate a region to start.

Lets look at the default reports region for theme 20:

<table class="t20ReportRegion t20Region" id="#REGION_STATIC_ID#" border="0" cellpadding="0" cellspacing="0" summary="" #REGION_ATTRIBUTES#>
<thead><tr><th class="t20RegionHeader" id="#REGION_STATIC_ID#_header">#TITLE#</th></tr></thead>
<tbody id="#REGION_STATIC_ID#_body">
<tr><td class="t20ButtonHolder">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE#
#CREATE##CREATE2##EXPAND##COPY##HELP#</td></tr>
<tr><td class="t20RegionBody">#BODY#</td></tr>
</tbody>
</table>

hmmm....lets move it to this:

<div class="region1" id="#REGION_STATIC_ID#">
<div class="topHolder">
<div class="regionHeader" >#TITLE#</div>
<div class="buttonHolder">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT#
#CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
</div>
<div class="regionBody" id="#REGION_STATIC_ID#_body">#BODY#</div>
</div>

Just a bit better...lets look at it in depth.

First we start with the <table> tags. We can easily move this to a <div> tag that will hold everything within the region. We do this with <div class="region1" id="#REGION_STATIC_ID#">. With the class we can apply stylesheets that will give our div a real personal look and feel. (More on that later) Next we add a div to hold all the header elements. Here we use <div class="topHolder">. Again, we give it a class and in here we pretty much move all the title and button elements.

<div class="regionHeader" >#TITLE#</div>
<div class="buttonHolder">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT#
#CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
</div>

Next on to the body div. Really simple stuff here...

<div class="regionBody" id="#REGION_STATIC_ID#_body">#BODY#</div>

We use the #BODY# tag inside a div with the class regionBody. So now that we have this lets take a look at it in practice.

Not all that exciting...so lets put a border around the region and have it be 200px in size. The width can either be fluid (using %) or rigid (setting to 200px).

.region1 {
      border:1px solid;
      width:200px;

}

Lets also add a bit to the title...maybe underline it and increase the font size, bold.

.regionHeader {
      font-size:16px;
      font-weight:bold;
      text-decoration:underline;
}

It now looks like this:

Its getting there...what's next? Anything really. Add a background gradient, pad the body for spacing. Go wild. Don't know CSS? No problem. There are many CSS editors that will help you on your way. (I use CSSEdit for the mac). Ill leave you with an example I did for a client. Again, anything is possible!