合并单元格

Continue丶

于 2021-03-02 21:38:23 发布

阅读量274

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43522998/article/details/114294835

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

合并单元格

在table表格标签的使用中，有时我们会看到类似于如下简历表格中的照片区域一样的合并单元格，那我们需要怎么做。

合并单元格方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="“合并单元格的个数”

目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
如下红色框为目标单元格

合并单元格三部曲

确定是跨行还是跨列。
找到目标单元格，写上合并方式=合并的单元格数量。如<td colspan="2"></td>。
删除多余单元格。
如以下代码：
<body>
  <table align="center" width="500px" height="200px" border="1px" cellspacing="0px">
      <tr>
         <td></td>
          <td colspan="2"></td>
          
       </tr>
       <tr>
           <td rowspan="2"></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
          
           <td></td>
           <td></td>
       </tr>
   </table>
</body>
运行截图

Continue丶

关注

0
点赞
踩
0

收藏

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

合并单元格在table表格标签的使用中，有时我们会看到类似于如下简历表格中的照片区域一样的合并单元格，那我们需要怎么做。合并单元格方式跨行合并：rowspan=“合并单元格的个数”跨列合并：colspan="“合并单元格的个数”目标单元格（写合并代码）跨行：最上侧单元格为目标单元格，写合并代码。跨列：最左侧单元格为目标单元格，写合并代码。如下红色框为目标单元格合并单元格三部曲确定是跨行还是跨列。找到目标单元格，写上合并方式=合并的单元格数量。如<td co.
复制链接

扫一扫

专栏目录