How can I add multiple columns below one column?

I want to extend the "Water Body Classification" column until to the top of the "D" column, can't figure out how to do it...

Here's the table code

 <table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Parameter</th>
      <th scope="col">Unit</th>
          <th scope="col" width="30px">Water Body Classification</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td></td>
    <td></td>
      <th class="text-center" scope="col">AA</th>
      <th class="text-center" scope="col">A</th>
      <th class="text-center" scope="col">B</th>
      <th class="text-center" scope="col">C</th>
      <th class="text-center" scope="col">D</th>
    </tr>
     <tr>
      <td>pH (Range)</td>
      <td>mg/L</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-9.0</td>
      <td class="text-center">6.5-9.0</td>
    </tr>
  </tbody>
</table>