rowspan属性怎么使用

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>
    

效果如下

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

效果如下

本篇文章到这里就全部结束了，更多前端精彩内容大家可以关注相关栏目教程！！！

以上就是rowspan属性怎么使用的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！