title: How to break and display one ArrayList into multiple table columns
body: <p>I have a servlet which loads a properties file and contains a list of 100 test case names into an ArrayList object. After loading the servlet forwards to a JSP which displays the list in a table. The list is long so I would like some elegant way to display it in a table so that it breaks up into, for example, three or four columns on the JSP. </p>
  
  <p>What I do now is break up the list into three sublists in the servlet:</p>
  
  <pre><code>//load properties
  Properties props = new Properties();
          ArrayList&lt;String&gt; tests = new ArrayList&lt;String&gt;();
          props.load(getServletContext().getResourceAsStream("/WEB-INF/sailcertifier.properties"));
          Pattern pattern = Pattern.compile("[A-Z]{3}-[0-9]{2}");     
          for (Enumeration&lt;Object&gt; e = props.keys(); e.hasMoreElements();) {
              String key = (String) e.nextElement();
              Matcher m = pattern.matcher(key);
              if (m.find())
                  tests.add(key);
          }
          Collections.sort(tests, new TestOrderComparator());
          confBean.setPossibleTests(tests.toArray(new String[tests.size()]));
          int third = tests.size() / 3;
          List&lt;String&gt; testSubset1 = tests.subList(0, third);
          List&lt;String&gt; testSubset2 = tests.subList(third, third * 2);
          List&lt;String&gt; testSubset3 = tests.subList(third * 2, tests.size());
          //store the bean as a request attribute
          request.setAttribute("testSet1", testSubset1.toArray(new String[testSubset1.size()]));
          request.setAttribute("testSet2", testSubset2.toArray(new String[testSubset2.size()]));
          request.setAttribute("testSet3", testSubset3.toArray(new String[testSubset3.size()]));
          request.setAttribute("testsConf", confBean);
          request.setAttribute("certProps", props);
          //forward to tests selection page
          String url = "/sailcertifier/jsp/testsSelection.jsp";
          RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(url);
          response.setContentType("application/javascript");
          try {
              dispatcher.forward(request, response);
          } catch (ServletException e) {
              e.printStackTrace();
          }
  </code></pre>
  
  <p>In the JSP I iterate through the sublists like so (adding some html elements for each case):</p>
  
  <pre><code>    &lt;table&gt;
          &lt;tr&gt;
              &lt;td style="width: 33%"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;c:forEach var="testName" items="${testSet1}"&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;label for="${testName}" id=${testName}Label&gt;${testName}&lt;/label&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName} type="checkbox" value=${testName} name="selTest"&gt;&lt;/input&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName}Run type="button" value="Run Test" name="runButtons" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName}ManPass type="button" value="Manual Pass" name="manPassButtons"/&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;div id=${testName}Status style="width:100px"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/c:forEach&gt;
                              &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td style="width: 33%"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;c:forEach var="testName" items="${testSet2}"&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;label for="${testName}" id=${testName}Label&gt;${testName}&lt;/label&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName} type="checkbox" value=${testName} name="selTest"&gt;&lt;/input&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName}Run type="button" value="Run Test" name="runButtons" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName}ManPass type="button" value="Manual Pass" name="manPassButtons"/&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;div id=${testName}Status style="width:100px"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/c:forEach&gt;
                              &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td style="width: 33%"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;c:forEach var="testName" items="${testSet3}"&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;label for="${testName}" id=${testName}Label&gt;${testName}&lt;/label&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName} type="checkbox" value=${testName} name="selTest"&gt;&lt;/input&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName}Run type="button" value="Run Test" name="runButtons" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input id=${testName}ManPass type="button" value="Manual Pass" name="manPassButtons"/&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;div id=${testName}Status style="width:100px"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/c:forEach&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I admit using three JSTL for loops is kind of ugly (haven't figured out use the full original list yet). Is there a cleaner way to handle this, by using some jquery plugin (like <a href="http://www.trirand.com/blog/" rel="nofollow">jquery grid plugin</a>) or other library (<a href="http://www.displaytag.org/1.2/" rel="nofollow">displaytag</a>?) to handle the breaking up into rows evenly for me?</p>