Dividing a column header

Question

This is what I have tried:

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

<table style="width:100%">
  <tr>
    <th>Airlines</th>
    <th>Departure</th>
    <th>Destination</th>
    <th colspan="2">Time</th>
    <th>Fare</th>
    
  <tr>
    <td>Buddha Air</td>
    <td>Kathmandu</td>
    <td>Pokhara</td>
    <td>7:55</td>
    <td>8:20</td>
  </tr>

  <tr>
    <td>Yeti Airlines</td>
    <td>Pokhara</td>
    <td>Jomsom</td>
  </tr>

  <tr>
    <td>Shree Airlines</td>
    <td>Kathmandu</td>
    <td>Dhangadhi</td>
  </tr>

  <tr>
    <td>Surya Air</td>
    <td>Biratnagar</td>
    <td>Kathmandu</td>
  </tr>
</table>

This is what I want:

This I what I have now:

How can I divide the column header in this way?

Answer 1

You're almost there! You just need to add another row for the subheadings (Departure and Arrival), then make all the other headings span both of those rows.

I've also grouped together your header and body rows using <thead> and <tbody> for better legibility and standards compliance.

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

<table style="width: 100%;">
  <thead>
    <tr>
      <th rowspan="2">Airlines</th>
      <th rowspan="2">Departure</th>
      <th rowspan="2">Destination</th>
      <th colspan="2">Time</th>
      <th rowspan="2">Fare</th>
    </tr>
    
    <tr>
      <th>Departure</th>
      <th>Arrival</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Buddha Air</td>
      <td>Kathmandu</td>
      <td>Pokhara</td>
      <td>7:55</td>
      <td>8:20</td>
      <td>3500</td>
    </tr>

    <tr>
      <td>Yeti Airlines</td>
      <td>Pokhara</td>
      <td>Jomsom</td>
      <td>8:15</td>
      <td>8:45</td>
      <td>3900</td>
    </tr>

    <tr>
      <td>Shree Airlines</td>
      <td>Kathmandu</td>
      <td>Dhangadhi</td>
      <td>11:15</td>
      <td>12:00</td>
      <td>8000</td>
    </tr>

    <tr>
      <td>Surya Air</td>
      <td>Biratnagar</td>
      <td>Kathmandu</td>
      <td>1:15</td>
      <td>1:55</td>
      <td>4200</td>
    </tr>
  </tbody>
</table>