colspan属性怎么使用

在创建HTML表时，colspan属性可以与td> 和th> 元素一起使用。

colspan属性与td> 标签一起使用时，colspan属性决定了它应该跨越的标准单元格的数量。

colspan属性与th> 标签一起使用时，colspan属性决定了它应该跨越的标题单元格的数量。

我们来看具体的示例

与td> 标签一起使用

代码如下

!DOCTYPE html>
      html>
      head>
      tITle>
    HTML colspan/title>
      style>
 table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
         padding: 6px;
             }
     /style>
     /head>
      body style = "text-align:center">
       table>
     tr>
     th>
    名称/th>
     th>
    价格/th>
     /tr>
     tr>
     td>
    樱桃/td>
     td>
    $10/td>
     /tr>
     tr>
     td>
    草莓/td>
     td>
    $8/td>
     /tr>
     !-- 最后一行 -->
     tr>
     !-- 此td将跨越两列，即单个列将占用2的空间 -->
    td colspan="2">
    总价: $18/td>
     /tr>
     /table>
     /body>
      /html>
    

效果如下：

与th> 标签一起使用

代码如下

!DOCTYPE html>
      html>
      head>
      title>
    HTML colspan/title>
      style>
 table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 6px;
             }
     /style>
     /head>
      body style = "text-align:center">
       table>
     tr>
     th colspan="2">
    价格/th>
     /tr>
     tr>
     td>
    樱桃/td>
     td>
    $10/td>
     /tr>
     tr>
     td>
    $8/td>
     /tr>
     /table>
     /body>
      /html>
    

效果如下：

本篇文章到这里就全部结束了，更多有关前端的精彩内容大家可以关注的其他相关栏目教程！！！

以上就是colspan属性怎么使用的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！