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

rowspan属性怎么运用

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

HTML中的rowspan属性指定单元格应跨过的行数。也就是说，假如一行跨过两行，则意味着它将占用该表中两行的空间。它同意单个表格单元格跨过多个单元格或行的高度。rowspan属性与Excel中的电子表格的“合并单元格”有雷同的功效。

html

rowspan属性可以与HTML表中的<td>和<th>元素一起使用。

rowspan属性与<td>标签一起使用时，rowspan属性决议了它应跨过的标准单元格数。

当rowspan属性与<th>标签一起使用时，rowspan属性肯定它应当跨过的标题单元格的数目。

下面我们来看详细的示例

与<td>标签一起使用

代码如下

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
    <body style = "text-align:center">  
  
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <!-- This cell will take up space on  
                    two rows -->
                <td rowspan="2">24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
            </tr> 
        </table> 
    </body>  
</html>

结果如下

html

与<th>标签一起使用时

代码如下

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align:center"> 
          
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
                <!-- This cell will take up space  
                    in 3 rows -->
                <th rowspan="3">百分百源码网</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <td>24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
                <td>25</td> 
            </tr> 
        </table> 
    </body>  
</html>

结果如下