Html 分割列标题_Html - Fatal编程技术网

Html 分割列标题

html

Html 分割列标题,html,Html,这就是我尝试过的：表，th，td{ 边框：1px纯黑；边界塌陷：塌陷； } 航班离开目的地时间票价佛气加德满都博卡拉 7:55 8:20 雪人航空博卡拉卓姆索姆什利航空公司加德满都达甘地苏里亚航空公司比拉德讷格尔加德满都你就快到了！您只需要为副标题（出发和到达）添加另一行，然后使所有其他标题跨越这两行我还使用and将标题行和正文行组合在一起，以提高易读性和标准遵从性表，th，td{ 边框：1px纯黑；边界塌陷：塌陷； } 航班离开目的地时间

这就是我尝试过的：

表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}


航班
离开
目的地
时间
票价
佛气
加德满都
博卡拉
7:55
8:20
雪人航空
博卡拉
卓姆索姆
什利航空公司
加德满都
达甘地
苏里亚航空公司
比拉德讷格尔
加德满都

你就快到了！您只需要为副标题（出发和到达）添加另一行，然后使所有其他标题跨越这两行

我还使用and将标题行和正文行组合在一起，以提高易读性和标准遵从性

表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}


航班
离开
目的地
时间
票价
离开
进站
佛气
加德满都
博卡拉
7:55
8:20
3500
雪人航空
博卡拉
卓姆索姆
8:15
8:45
3900
什利航空公司
加德满都
达甘地
11:15
12:00
8000
苏里亚航空公司
比拉德讷格尔
加德满都
1:15
1:55
4200

尝试以下代码：

我刚刚为到达和离开添加了一个新的

tr

，然后使用

colspan

和

rowspan

来调整h

td


表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
航班
离开
目的地
时间
票价
离开
进站
佛气
加德满都
博卡拉
7:55
8:20
3500
雪人航空
博卡拉
卓姆索姆
7:55
8:20
3500
什利航空公司
加德满都
达甘地
7:55
8:20
3500
苏里亚航空公司
比拉德讷格尔
加德满都
7:55
8:20
3500

您应该使用

行span

作为标题，并且应该有两行标题行

这是我的答案。。。添加了新的，所以我们不能在没有放置所有rowspan和colspan的情况下执行此操作。谢谢

<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>