当前位置：主页 > 查看内容

HTML表格跨行跨列操作(rowspan、colspan)

发布时间：2021-04-06 00:00| 有 位朋友查看

简介：一般使用td元素的colspan属性来实现单元格跨列操作，使用td元素的rowspan属性来实现单元格的跨行操作。 colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示： 例如： table border=1 tr th星期一/th th星期二/th……

一般使用<td>元素的colspan属性来实现单元格跨列操作，使用<td>元素的rowspan属性来实现单元格的跨行操作。

colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示：

例如：

<table border="1">
  <tr>
    <th>星期一</th>
    <th>星期二</th>
  </tr>
  <tr>
    <td colspan="2">星期天</td>
  </tr>
</table>

实现结果如下图所示：

rowspan属性规定单元格可横跨的列数，所有浏览器都支持rowspan属性。其取值为number，如下图所示：

例如：

<table border="1">
  <tr>
    <td rowspan="2">星期一</td>
    <td>星期二</td>
  </tr>
  <tr>
    <td>星期三</td>
  </tr>
</table>

实现结果如下图所示：

总结colspan和rowspan的使用如下：

<table border="1">
  <tr>
    <th colspan="3">物资详情说明</th>
  </tr>
  <tr>
    <td colspan="2" align="center">数量(支)</td>
    <td rowspan="2">重量(吨)</td>
  </tr>
  <tr>
    <td>实发数</td>    
    <td>实收数</td>
  </tr>
  <tr>
    <td>12</td>    
    <td>10</td>
    <td>100.00</td>
  </tr>
</table>

实现结果如下图所示：

到此这篇关于HTML表格跨行跨列操作(rowspan、colspan)的文章就介绍到这了,更多相关HTML表格跨行跨列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！


原文链接：https://m.jb51.net/web/755616.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：HTML外部样式表如何引入CSS样式 下一篇：html中使用vue-router的示例代码

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐