colspan属性怎么运用-百分百源码网

colspan属性怎么运用

发布时间：09/01 来源：未知浏览：关键词：

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>

结果如下：

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