Nested table rows HTML CSS

Question

I have never much worked with Complex HTML Tables. I need a table with nested columns and rows in it. I tried to create it but it has got many tables as well as number of borders are appearing everywhere. Here is the jsFiddle, that I have tried. So, what I'm going to achieve is:

• Single <table> tag for all that structure
• Multiple borders should not appear.
• All the structure should be a single table, rows should not separate from its position while resizing the page.(Which happens in my case)

Answer 1

This is your structure you wanted, do not set width to percentage value to avoid struture losing shape while page resizing

    <table border="1" width="800" height="100">
      <tr>
        <th colspan="7"></th>
        <th></th>
      </tr>
      <tr>
        <td colspan="7"></td>
        <td></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td></td>
        <td colspan="3"></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
    </table>