合并单元格

最新推荐文章于 2024-05-24 17:50:52 发布

拜拜雪公主zz

最新推荐文章于 2024-05-24 17:50:52 发布

阅读量374

点赞数

分类专栏：前端html系列笔记文章标签： html

本文链接：https://blog.csdn.net/qq_46152483/article/details/119106033

版权

前端html系列笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

单元格所涉及的标签有 tr\td,
还有td 的属性： colspan是横向合并 rowspan是纵向合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并单元格</title>
</head>
<body>

  <!-- 这个单元格原本是4x4的单元格，
    每合并一个每行就要少一个格子，
    即tr里面少一个td -->
<table cellspacing="0" border="1" width="400" height="300" align="center">
  <tr>
    <td></td>
    <td></td>
    <td colspan="3"></td>
    <!-- 横向合并，合并的是第一行的第三个 和第四个格子，
      是第一行是因为这是第一个tr -->
    <!--<td></td>-->
  </tr>

  <tr>
    <td rowspan="2"></td>
    <!-- 纵向合并第二行第三行的第一个格子， -->
    <td rowspan="2"></td>
    <!-- 纵向合并第二行第三行的第二个格子， -->
    <td></td>
    <td></td>
  </tr>

  <tr>
    <!-- 因为第三行的格子被第二行合并了，
      所以第三行只有两个td -->
    <td ></td>
    <td></td>
  </tr>

  <tr>
    <td ></td>
    <td></td>
    <td colspan="3"></td>
    <!-- 横向合并，合并的是第四行的第三个 和第四个格子，
      是第四行是因为这是第四个tr -->

  </tr>
</table>
</body>
</html>

在这里插入图片描述

拜拜雪公主zz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
合并单元格

单元格所涉及的标签有 tr\td,还有td 的属性： colspan是横向合并 rowspan是纵向合并<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>合并单元格</title></head><body> <!-- 这个单元格原本是4x4的单元格，每合并一个每行就要少
复制链接

扫一扫