Question

i want to span a heading element to include another sub headings elements like that:

<thead>   
<th rowspan="2">main heading1</th>   
<th rowspan="2">main heading2</th>   
<th colspan="3">main heading3
    <thead>
     <tr>
     <th>sub heading1</th>
     <th>sub heading2</th>
     <th>sub heading3</th>
     <tr>
    <thead>   
</th>   
<th rowspan="2">main heading4</th> 
</thead>

is that possible ?

Answer 1

If you want a table inside a table, you need to use the <table> element again. You can’t just place another thead inside the thead. You’re also missing <tr> tags and if you want a table inside a table using rowspan and colspan incorrectly.

Option 1: You could use 2 rows in your thead.

<thead>   
  <tr>
    <th rowspan="2">main heading1</th>   
    <th rowspan="2">main heading2</th>   
    <th colspan="3">main heading3</th>   
    <th rowspan="2">main heading4</th> 
  </tr>
  <tr>
    <th>sub heading1</th>
    <th>sub heading2</th>
    <th>sub heading3</th>
  </tr>
</thead>

Option 2: A table inside a table.

<thead>   
  <tr>
    <th>main heading1</th>   
    <th>main heading2</th>   
    <th>main heading3
      <table>
        <thead>
         <tr>
           <th>sub heading1</th>
           <th>sub heading2</th>
           <th>sub heading3</th>
         <tr>
        <thead>  
      </table> 
    </th>   
    <th>main heading4</th> 
  </tr>
</thead>