title: Draw table in following format with colspan and rowspan in HTML?
body: <p>I want to draw a table in following format:</p>
  
  <p><img src="https://i.stack.imgur.com/xJ9hK.png" alt="table that I wanted to draw"></p>
  
  <p>But it's not displaying properly. It's inserting some rows after the last column.
  How can I fix the HTML?</p>
  
  <pre><code>&lt;tr&gt;
      &lt;th rowspan="2"&gt;Client ID&lt;/th&gt;
      &lt;th rowspan="2"&gt;Trade ID&lt;/th&gt;
      &lt;th rowspan="2"&gt;Symbol&lt;/th&gt;
      &lt;th rowspan="2"&gt;Average Price&lt;/th&gt;
      &lt;th colspan="3"&gt;DTD&lt;/th&gt;
      &lt;th colspan="3"&gt;MTD&lt;/th&gt;
      &lt;th rowspan="2"&gt;Net YTD&lt;/th&gt;
  &lt;/tr&gt;
  
  
  &lt;tr&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.clientID}" /&gt;&lt;br&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.tradeID}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.symbol}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.averagePrice}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.DTD}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.MTD}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.YTD}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.DTD}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.MTD}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.YTD}" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;core:out value="${orderBookData.YTD}" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>