How to format a table in Struts2?

Question

I need to format it in a way that show the four headers on the top and all the fields under them. but it creates extra tds and trs.

 <form name="edit" method="POST" action="edit">
          <table border="4">
              <thead><tr>
                      <td>Field1</td><td>Field2</td><td>Field3</td<td>Field4</td>            
                     </tr>
              </thead>
              <tbody>
                <s:iterator value="basket.items" var="item" status="element">
                  <tr>
                    <td> <s:textfield type="hidden" id="item[%{#element.index}].id"
                                        name="item[%{#element.index}].id" value="%{id/></td>
                    <td> <s:textfield id="item[%{#element.index}].product.price" 
                                        name="item[%{#element.index}].product.price" value="%{product.price}" /></td>
                    <td> <s:label value="%{product.name}"/></td>

                    <td> <s:label value="%{time}"/> </td>

                    <td> <s:label value="%{date}"/>    </td>

                    <td> <s:textfield name="item[%{#element.index}].product.price2" 
                                       id="item[{#element.index}].product.price2" value="%{product.price2}"/></td>
                 </tr>
               </s:iterator>
             </tbody>
       </table> 
   <input id="edit" type="submit" name="action" value="Edit"/>
 </form>

HTML

    <form name="edit" method="POST" action="edit">
          <table border="4">
                <thead><tr>
                         <td>Field1</td><td>Field2</td><td>Field3</td<td>Field4</td>            
                       </tr>
               </thead>
                <tbody>    
                        <tr>
                            <td>  <tr>
                               <td class="tdLabel"></td>
                            <td><input type="hidden" name="item[0].id" value="16" 
                                                     id="item[0].id"/></td>
                       </tr>
                       </td>
                       <td><tr>
                              <td class="tdLabel"></td>
                      <td><input type="text" name="item[0].product.price" 
                                             value="55"      
                                             id="item[0].product.price"/></td>
                      </tr>
                      </td>
                      <td><tr>
                          <td class="tdLabel"></td> 
                               <td><label id="">Product1</label></td>
                      </tr></td>
                      <td><tr>
                           <td class="tdLabel"></td>
                           <td><label id="">9:31:03 AM</label></td>
                      </tr>
                      </td>
                      <td><tr>
                           <td class="tdLabel"></td>
                           <td><label id="">2013</label></td></tr>
                      </td>
                      <td><tr>
                           <td class="tdLabel"></td>
                           <td><input type="text" name="item[0].unit.price2" 
                                      value="1000.0"  
                                      id="item[0].unit.price2"/>              

                            </td>
                      </tr>
                      </td>
                      </tr>

                </tbody>
            </table> 

Answer 1

Just remove the extra stuff and format as you like by switching to simple theme.

For e.g.

<s:textfield name="name" theme="simple"/>

Now it won't create any extra TRs or TDs.

Answer 2

You need <td>s in the <tbody> as well:

<tbody>
  <tr>
    <td>cell content column 1</td>
    <td>cell content column 2</td>
    <td>cell content column 3</td>
    <td>cell content column 4</td>
  </tr>
</tbody>

tbody behaves like thead in this respect. Be careful to match the number of columns in both sections.

edit

Seems like your iterator takes care of all the TRs and TDs in the tbody part. But it also creates TDs for the field labels.

So in the table body it creates twice as many columns as you have in the table head. You could add extra header cells in the table head or you could just take advantage of your iterator's structure and use input labels and lose the thead.

Answer 3

Put the body fields into td's
EDIT:
Try this

<td>Field1</td><td>Field2</td><td>Field3</td><td>Field4</td>

You forgot a bracket on field 3 close
EDIT:
You are also doing some weird stuff by placing TD's between </tr> and <tr> TD's ALWAYS have to be inside TR's
EDIT:
<td> <s:textfield type="hidden" id="item[%{#element.index}].id" name="item[%{#element.index}].id" value="%{id/></td> This looks really cheecky, look at the end, you forgot a quote :)