Html table with 3 headers and colspan-CodePudding

I want my html table to have 3 headers in which the second and third headers should be divided as I have depicted below. I tried with colspan but not able to create it. Need help.

/--------------------------------------------------------------------------------------\
|             |     Two    |                           Three                           |               
|  One        |------------|-----------------------------------------------------------|  
|             |    Two A   |    Three A   |    Three B   |    Three C   | Three        |      
|-------------|------------------------------------------------------------------------|
|One A | One B| Col 1|Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/

CodePudding user response：

You can try this :

body{
            margin:10px;
      }

      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        padding:5px;
      }

<table style="width:100%">
  <tr>
    <th rowspan="2" colspan="2">One</th>
    <th colspan="2">two</th> 
    <th colspan="8">Three</th>
  </tr>
  <tr>
    <td colspan="2">Two A</td>
    <td colspan="2">Three A</td>
    <td colspan="2">Three B</td>
    <td colspan="2">Three C</td>
    <td colspan="2">Three D</td>
  </tr>
  <tr>
    <td>One A</td>
    <td>One B</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td colspan="12"></td>
  </tr>
</table>

CodePudding user response：

To have the same format use the following:

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">One</td>
    <td colspan="2">Two</td>
    <td colspan="8">Three</td>
  </tr>
  <tr>
    <td colspan="2">Two A</td>
    <td colspan="2">Three A</td>
    <td colspan="2">Three B</td>
    <td colspan="2">Three C</td>
    <td colspan="2">Three</td>
  </tr>
  <tr>
    <td>One A</td>
    <td>One B</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

You need to use colspan and rowspan to get the result.

CodePudding user response：

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head> 
      
    <body> 

        <table> 
            <tr> 
                <th colspan="2" rowspan="2">One</th>
                <th colspan="2">Two    </th>
                <th colspan="10">Three                           </th>
            </tr> 
            <tr> 
                <th colspan="2">Two A</th>
           
                <th colspan="2">Three A</th>
                <th colspan="2">Three B</th>
                <th colspan="2">Three C</th>
                <th colspan="2">Three D</th>
  
            </tr> 
            <tr> 
                <td>One A</td> 
                <td>One B</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1 </td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col2</td>
                <td> Col 1</td>
                <td> Col 2</td>
            </tr>
            <tr> 
                <td>One A</td> 
                <td>One B</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1 </td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col2</td>
                <td> Col 1</td>
                <td> Col 2</td>
            </tr>

        </table> 
    </body> 
</html>  

</body>
</html>