CODEWITHSUNDEEP
html
user10995419
user10995419

Reputation:

Dividing a column header

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:

Screenshot 1

This I what I have now:

Screenshot 2

How can I divide the column header in this way?

Upvotes: 3

Views: 491

Answers (4)

MTCoster
MTCoster

Reputation: 6145

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>

Upvotes: 5

Sathish Chelladurai
Sathish Chelladurai

Reputation: 690

Here Is my Answer... Added new <tr&gt <td> and set colspan = 2 for time column and set rowspan = 2 value for other remaining column.

<html>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>
<table style="width:100%">
  <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>
    <td >Departure</td>
    <td>Arrival</td>
  </tr>
  <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>
</table>

</body>
</html>

Result of the above code :

enter image description here

Upvotes: 0

osmanraifgunes
osmanraifgunes

Reputation: 1468

You should use rowspan for headers and you hould have two header rows

https://jsfiddle.net/7eq3ghat/2/

Upvotes: 0

devmonster
devmonster

Reputation: 474

Try this code below:

I just added a new tr for the Arrival and Departure then use colspan and rowspan to adjust the size of theh td

    <html>

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<body>

<table style="width:100%">
  <tr>
    <th rowspan="3">Airlines</th>
    <th rowspan="3">Departure</th>
    <th rowspan="3">Destination</th>
    <th colspan="2">Time</th>
    <th rowspan="3">Fare</th>
  <tr>
  <tr>
    
    <td>Departure</td>
    <td>Arrival</td>
    
  </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>7:55</td>
    <td>8:20</td>
    <td>3500</td>


  </tr>
  <tr>
    <td>Shree Airlines</td>
    <td>Kathmandu</td>
    <td>Dhangadhi</td>
    <td>7:55</td>
    <td>8:20</td>
    <td>3500</td>

  </tr> 
  <tr>
      <td>Surya Air</td>
      <td>Biratnagar</td>
      <td>Kathmandu</td>
      <td>7:55</td>
      <td>8:20</td>
      <td>3500</td>
  </tr>
</table>

</body>
</html>

Upvotes: 0

Related Questions