Tuesday, October 23, 2007

Creating Dynamic DIV tables

While working through making a custom Facebook application (which isn't finished, but will be soon!) I wanted to use a DIV-based layout for my data, rather then the simple TABLE tags. However, it was going to be somewhat dynamic (as in, number of rows would be determined by the data). So here is how I did the creation of the table using JSTL and DIVs. Feel free to enjoy/offer your suggestions.

<div class="div_table">
<c:forEach items="${list}" var="item" varStatus="status">
<c:if test="${status.index % 3 == 0}">
<c:out value="<div style='clear:both;'></div>" escapeXml="false"/>
</c:if>

<div class="div_cell" style="float: left;">
{ put stuff here }
</div>
</c:forEach>
<c:out value="<div style='clear:both;'></div>" escapeXml="false"/>
</div>
The line:
<c:out value="<div style='clear:both;'></div>" escapeXml="false"/>
Basically is like a "new row" signal. In my case, I wanted a 3 column table.

No comments: