搜索

首页  >  文章  >  web前端  >  colspan属性怎么使用

colspan属性怎么使用

不言
不言原创
2019-02-11 13:33:3315183浏览

HTML中的colspan属性指定单元格应跨越的列数。它允许单个表格单元格跨越多个单元格或列的宽度。colspan属性实现的功能与Excel中的电子表格程序的“合并单元格”的功能相同。

html

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

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

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

我们来看具体的示例

与b6c5a531a458a2e790c1fd6421739d1c标签一起使用

代码如下

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

与b4d429308760b6c2d20d6300079ed38e标签一起使用

代码如下

<!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中文网其他相关文章！

php html td th excel
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：main标签的作用是什么下一篇：rowspan属性怎么使用

相关文章

查看更多