html - how to show data in grid/thumbnails -

html - how to show data in grid/thumbnails -

how show info database in grid/thumbnails like this or jsfiddle. using spring/jsp technologies. right showing in table 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>

use varstatus attribute in foreach loop , utilize check (using modulo operator) if need start or close 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 table row unclosed, need build check that.

a improve solution using css , syle list of items using float example:

class="snippet-code-css lang-css prettyprint-override">ul.tiles { width: 400px; } ul.tiles li { float: left; list-style-type: none; width: 100px; height: 100px; margin: 10px; background: yellow; } class="snippet-code-html lang-html prettyprint-override"><ul class="tiles"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>

html jsp