title: Three-level table headers in HTML
body: <p>I'm having trouble getting this kind of table header format:</p>
  
  <p><img src="https://i.stack.imgur.com/C4RYR.png" alt="sample table that I need to achieve"></p>
  
  <p>These are my codes:</p>
  
  <pre><code>&lt;table id="rogueD_tbl" class="table table-bordered table-striped dataTable"&gt;
  
  &lt;col&gt;
  &lt;colgroup span="10"&gt;&lt;/colgroup&gt;
  
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;td rowspan="3"&gt; ID &lt;/td&gt;
          &lt;td rowspan="2"&gt; UNIT ID &lt;/td&gt;
          &lt;td rowspan="2"&gt; UNIT/STATION &lt;/td&gt;
          &lt;td rowspan="2"&gt; NO. OF POPULATION &lt;/td&gt;
  
          &lt;th colspan="4" scope="colgroup" &gt; NR. OF FIRE TRUCK     &lt;/th&gt;
  
  
  
  
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;th colspan="2" scope="colgroup" &gt; OPNL &lt;/th&gt;
          &lt;th colspan="2" scope="colgroup" &gt; NON OPNL &lt;/th&gt;
  
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td scope="col"&gt;  BFP &lt;/td&gt;
          &lt;td scope="col"&gt; LOCAL &lt;/td&gt;
  
          &lt;td scope="col"&gt; BFP &lt;/td&gt;
          &lt;td scope="col"&gt; LOCAL &lt;/td&gt;
       &lt;/tr&gt;
  
  &lt;/thead&gt;
  &lt;tbody&gt;
  
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm trying to achieve a 3 level table header but I think I'm overlooking something that is rather simple.</p>