title: Why datatable adds more <td> to my table
body: <p>this is my jsf:</p>
  
  <pre><code> &lt;h:dataTable class="pretty" value="#{ftController.ftDataModel}" var="item"&gt;
                      &lt;h:column&gt;
                          &lt;f:facet name="header"&gt;
                              &lt;h:outputText value="Amount"/&gt;
                          &lt;/f:facet&gt;
                      &lt;/h:column&gt;
                      &lt;h:column &gt;
                          &lt;f:facet class="right" name="header"&gt;
                              &lt;h:outputText value="Date"/&gt;
                          &lt;/f:facet&gt;
                      &lt;/h:column&gt;
                      &lt;h:column&gt;      
                          &lt;h:outputLink   value="index.jsf"&gt;&lt;h:outputText value="#{item.ftType}"/&gt;&lt;/h:outputLink&gt;&lt;br /&gt;
                            &lt;h:outputText class="red" id="amount"   value="#{item.amount}"&gt;&lt;/h:outputText&gt; &lt;h:outputText value="&amp;#160;" /&gt;&lt;h:outputText  style="font-size:12px" class="gray" value="TL" /&gt;
                      &lt;/h:column&gt;
                      &lt;h:column class="right" &gt;
                          &lt;h:outputText id="date"    value="#{item.date}"&gt;&lt;/h:outputText&gt; 
                      &lt;/h:column&gt;
                  &lt;/h:dataTable&gt;
  </code></pre>
  
  <p>howerver, html output is just like that:</p>
  
  <pre><code>&lt;table class="pretty"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th scope="col"&gt;Amount&lt;/th&gt;
  &lt;th scope="col"&gt;Date&lt;/th&gt;
  &lt;th scope="col"&gt;&lt;/th&gt;
  &lt;th scope="col"&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a href="index.jsf" class="ui-link"&gt;Person&lt;/a&gt;&lt;br&gt;&lt;span id="j_idt8:j_idt21:0:amount" class="red"&gt;34500.6&lt;/span&gt;&amp;nbsp;&lt;span class="gray" style="font-size:12px"&gt;TL&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;span id="j_idt8:j_idt21:0:date"&gt;10/14/2012&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a href="index.jsf" class="ui-link"&gt;Person&lt;/a&gt;&lt;br&gt;&lt;span id="j_idt8:j_idt21:1:amount" class="red"&gt;3444.78&lt;/span&gt;&amp;nbsp;&lt;span class="gray" style="font-size:12px"&gt;TL&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;span id="j_idt8:j_idt21:1:date"&gt;10/15/2012&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It adds extra <code>&lt;th&gt;</code> for ex under the amount and date. And also it adds <code>&lt;td&gt;s</code> why? What is the problem here? How can i solve it? Why it adds?</p>