Question

I’m trying to use a table to display some images, I’m allowed 3 images per row but I’m not sure how to end the table row when I have a row with less then 3 images. See the snippet below for what I’ve been trying.

Using a ul I would not have to worry about it but I’m directed to use a table. How can I make sure the last row is properly terminated ? I’m newer to jstl.

Thanks,

    <% int endTRFlag = 0; %>
    <table width="100%">
      <tr>
      <core:forEach var="imageURL" items="${actionBean.imageURLs}" varStatus="rowCounter">
         <td align="center" valign="middle">
          <div class="item">
            <a href="#"><img src="${imageURL}" alt="Photo 1" class="img" /></a> 
          </div>
         </td>
         <% endTRFlag = 1; %>
      <core:if test="${ (rowCounter.count % 3 == 0) }">
      </tr>
      <tr>
      <% endTRFlag = 0; %>
      </core:if>
      <core:if test="${ (rowCounter.count % 3 != 0) && (endTRFlag == 0)}">
      </tr>
      </core:if>

      </core:forEach>

Answer 1

In the code below, I use .index instead of .count because it is 0-based, and so will work better for modulus (0/3, 3/3, etc.). .last is true if the current element is the last element in the list. This solution does cause validation errors in Eclipse (at least Ganymede), which is annoying.

<c:forEach var="imageURL" items="${actionBean.imageURLs}" varStatus="rowCounter">
    <c:if test="${rowCounter.index mod 3 eq 0}">
        <tr>
    </c:if>
    <td>stuff</td>
    <c:if test="${(rowCounter.index+1) mod 3 eq 0 or rowCounter.last}">
        </tr>
    </c:if>
</c:forEach>