当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML rowspan属性用法及代码示例


HTML中的rowspan属性指定单元格应跨越的行数。也就是说,如果一行跨越两行,则意味着它将占用该表中两行的空间。它允许单个表单元格跨越一个以上单元格或行的高度。它提供与电子表格程序(如Excel)中的“merge cell”相同的函数。

用法:它可以与HTML表中的<td>和<th>元素一起使用。

  • <td>:当与<td>标记一起使用时,rowspan属性确定其应跨越的标准单元格数。
    用法:
    <td rowspan = "value">table content...</td>
    

    该值指定单元格填充的行数。该值必须是整数。例子:

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

    输出:
    rowspan



  • <th>:当与<th>标记一起使用时,rowspan属性确定其应跨越的标题单元格的数量。
    用法:
    <th rowspan = "value">table content...</th>
    

    该值指定单元格填充的行数。该值必须是整数。例子:

    <!DOCTYPE html>  
    <html>  
        <head>  
            <title>HTML rowspan Attribute</title>  
            <style> 
                table, th, td { 
                    border:1px solid black; 
                    border-collapse:collapse; 
                    padding:6px; 
                } 
            </style> 
        </head>  
          
        <body style = "text-align:center">  
            <h1 style = "color:green;">GeeksforGeeks</h1> 
            <h2>HTML rowspan Attribute</h2> 
              
            <table> 
                <tr> 
                    <th>Name</th> 
                    <th>Age</th> 
                    <!-- This cell will take up space  
                        in 3 rows -->
                    <th rowspan="3">GeeksforGeeks</th> 
                </tr> 
                <tr> 
                    <td>Arun</td> 
                    <td>24</td> 
                </tr> 
                <tr> 
                    <td>Priya</td> 
                    <td>25</td> 
                </tr> 
            </table> 
        </body>  
    </html>                    

    输出:
    rowspan

支持的浏览器:下面列出了rowspan属性支持的浏览器:

  • 谷歌浏览器
  • IE浏览器
  • Firefox
  • Opera
  • Safari




相关用法


注:本文由纯净天空筛选整理自Vishal Chaudhary 2大神的英文原创作品 HTML | rowspan Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。