3.52,表格标签之合并单元格

马肤
这是懒羊羊

前言

今天我继续给大家更新html5中表格标签的合并单元格功能,讲这之前我想吐槽以下昨天晚上的卡塔尔VS厄瓜多尔,这场比赛我也是买了一百块钱的,但是现实全并不那么顺我心意。卡塔尔也并不像网上说的买通了对手。最终2;0惨败,打破了是92年的东道主不败纪录。期待一下今晚的比赛吧。


3.52,表格标签之合并单元格,屏幕截图 2022-11-20 221039.png,标签,第1张




  • rowspan:表示跨行合并。在 HTML 代码中,允许我们使用 rowspan 特性来表明单元格所要跨越的行数。

  • colspan:表示跨列合并。同样的,在 HTML 中,允许我们使用 colspan 特性来表明单元格所要跨越的列数。


具体格式如下:

<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>

n 是一个整数,表示要合并的行数或者列数。

此处需注意,不论是 rowspan 还是 colspan 都是 <td> 标签的属性。

下面的例子中,我们将表格第 1 列的第 3、4 行单元格合并(跨行合并),将第 4 行的第 2、3 列合并(跨列合并)

<table border="1" style="border-collapse: collapse;">

    <tr>

       <th>VPS857</th>

     <th>VPS857</th>

     <th>VPS857</th>

    </tr>

    <tr>

      <td>VPS857</td>

     <td>http://857vps.cn/</td>

     <td>教育</td>

    </tr>

    <tr>

      <td rowspan="2">百度</td>

      <td>http://www.baidu.com/</td>

      <td>搜索</td>

    </tr>

    <tr>

      <td colspan="2">https://www.857vps.cn/</td>

    </tr>

</table>


效果图

3.52,表格标签之合并单元格,屏幕截图 2022-11-21 124230.png,标签,第2张


文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,344人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码