html - 划分列标题

Question

这是我试过的:

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>

这就是我想要的:

这是我现在拥有的:

如何这样划分列标题？

Answer 1

你快到了!您只需为副标题(出发和到达)添加另一行，然后让所有其他标题跨越这两行。

我还使用 <thead> 将标题行和正文行组合在一起和 <tbody> 以获得更好的易读性和标准合规性。

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>