HTML table跨行跨列一行占多列一列占多行用法

HTML&CSSHTML table跨行跨列一行占多列一列占多行用法已关闭评论5,5141

HTML table代码常规的大家都会写,无非是th、tr、td的用法,新手站长网来说说table代码的升级版,table代码跨行跨列,一行对多列或者一列对多行的用法:

跨行跨列、一行占多列或者一列占多行主要使用的代码是colspanrowspan,跨多列时使用colspan,跨多行时使用rowspan。例如一行跨2列,可以写colspan="2",好了,新手站长网拿实例说话吧:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

table代码一行跨2列,右侧跨2行

<table border="1">
  <tr>
    <td colspan="2">aaa</td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
</table>
// table一行跨2列

效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

aaa
bbb ccc

代码说明原理:HTML代码首先是一行一行的读,先读第1行,碰到了colspan="2"后,就会预先占2列的位置。然后读第2行,先读第1列,再读第2列。文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

table代码一列跨2行

<table border="1">
  <tr>
    <td>aaa</td>
    <td rowspan="2">bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>
// table一列跨2行代码

效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

aaa bbb
ccc

代码说明原理:HTML代码一行一行到读,先读第1行第1列,读到第2列后,碰到rowspan="2",预留2行的位置,然后再读第2行第1列。文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

table代码一行跨2列,左侧跨2行

<table>
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>
// table一列跨2行

效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

aaa bbb
ccc

跨行跨列复杂组合

<table border="1">
  <tr>
    <td rowspan="2">aaa</td>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
  <tr>
    <td>ddd</td>
    <td>eee</td>
  </tr>
  <tr>
    <td>fff</td>
    <td colspan="2">ggg</td>
  </tr>
</table>
// table跨多行多列复杂组合

效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

aaa bbb ccc
ddd eee
fff ggg
文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html

【阿里云99元服务器】入口2核2G3M带宽、新老用户同享、99元/年续费到2027年

【腾讯云特价】:2核2G3M 88元一年、2核2G4M 108元1年 366元3年、2核4G5M 166元/年 566元3年、4核8G12M 446元一年 更多配置8核16G18M和16核32G28M 点我直达 >>

2023阿里云优惠活动:xinshouzhanzhang.com/go/aliyun

注意:以上特价轻量服务器限制条件为“产品首单特惠”,如果你的腾讯云账号已经是老用户,建议重新注册一个腾讯云账号,如果你是新用户符合条件,那么无脑入,确实值得。

 最后更新:2018-6-20
HTML&CSS

table td自适应宽度设置(根据内容自动拉伸)

table td或th如何格局单元格内容自适应宽度?table td th根据表格内容自动拉伸CSS属性,新手站长网分享内联样式style和CSS方法: table td th自适应宽度样式 内联样式...
HTML&CSS

实现table表单td内容两端对齐的方法

如何实现table表单td标签中的内容两端对齐?td的align属性设置为justify不好用,新手站长网分享td文字两端对齐的方法: td两端对齐的方法 td标签有个align属性,将align设置...