You can create a freemarker template for use as your layout. In the template you will want to embed your complex logic as well as your styling.
Here is an example of a layout template that I have been using on a current project.
<#include "../common/commonStyles.ftl">
<#if document.visuallyImpaired>
<link rel="stylesheet" type="text/css" href="css/visuallyImpaired/devLetterLayout.css" media="all" />
<#else>
<link rel="stylesheet" type="text/css" href="css/devLetterLayout.css" media="all" />
</#if>
<table class="headerTable">
<tbody>
<#if document.visuallyImpaired>
<tr>
<td class="visImpairedTitle">
<#include "title.ftl">
</td>
</tr>
</#if>
<tr>
<td class="headerSideColumn">
<#include "bannerImage.ftl">
</td>
<td class="headerCenterColumn">
<#if !document.visuallyImpaired>
<#include "title.ftl">
</#if>
</td>
<td class="headerSideColumn">
</td>
</tr>
<tr>
<td class="letterDate">
<#include "letterDate.ftl">
</td>
</tr>
</tbody>
</table>
In your main template you will use the <#assign>
tags for your variables and the <#include>
tags to pull in the .ftl
templates you created.
You can also break out some of your logic into separate templates to keep your source page clean. Just put an <#assign>
and <#include>
in your <#list>
.
For the number of columns I haven't found anything elegant yet, but you can do something like <#assign columnCount=x>
and then <#include "tableColumn" + columnCount + ".css">
to limit the amount of changes you need to add.
You could even assign a local variable using <#local>
and implement a counter to determine the number of columns you have if the table is created dynamically each time.