• 技术文章 > web前端 > html教程

    colspan属性怎么使用

    不言 不言 2019-02-11 13:33:33 原创 253
    HTML中的colspan属性指定单元格应跨越的列数。它允许单个表格单元格跨越多个单元格或列的宽度。colspan属性实现的功能与Excel中的电子表格程序的“合并单元格”的功能相同。

    html

    在创建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>

    效果如下:

    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>

    效果如下:

    html

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

    以上就是colspan属性怎么使用的详细内容,更多请关注php中文网其它相关文章!

    第六期线上培训班
    专题推荐: colspan属性
    上一篇:main标签的作用是什么 下一篇:rowspan属性怎么使用

    相关文章推荐

    • jQuery选择没有colspan属性的td的代码_jquery • 兼容性调试-- 在谷歌浏览器中,td 设置colspan的失效的问题 • html colspan属性的定义是什么?html colspan属性的使用方法介绍

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网