how to show data in grid/thumbnails

Question

How to show data from database in grid/thumbnails like this Or something like this jsFiddle. I am using spring/jsp technologies. Right now i am showing it in a table like this.

In JSP

<table class="pdtTable"  border="1" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <th>Product Name</th>       
    </tr>
   <c:forEach items="${productList}" var="product" >
    <tr>
        <td><a href="details${product.id}"> ${product.productName}</a></td>
        </tr>    
   </c:forEach>
    </table>

Answer 1

Use the varStatus attribute in your forEach loop and use it to check (using the modulo operator) if you need to start or close a row.

<table class="pdtTable"  border="1" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <th>Product Name</th>       
  </tr>
  <c:forEach items="${productList}" var="product" varStatus="status">
    <c:if test="${status.index % 3 == 0}"><tr></c:if>
    <td><a href="details${product.id}"> ${product.productName}</a></td>
    <c:if test="${status.index % 3 == 2}"></tr></c:if>
  </c:forEach>
</table>

This can leave your table row unclosed, so you need to build a check for that.

A better solution would be using CSS and syle a list of items using float for example:

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: yellow;
}

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>