HTML5 合并单元格

<!doctype html>
<html>
<head>
<meta charset="GB2312">
<title>我的主页</title>
</head>
<body>

<table border="1">
<tr>
  <th colspan="2">运动</th>
  <th colspan="2">音乐</th>
</tr>

<tr>
  <td rowspan="3">球类</td>
  <td>乒乓球</td>
  <td rowspan="3">声乐</td>
  <td>美声</td>
</tr>
<tr>
  <td>羽毛球</td>
  <td>民族</td>
</tr>
<tr>
  <td>足球</td>
  <td>流行</td>
</tr>
<tr>

<tr>
  <td rowspan="3">田径</td>
  <td>跳远</td>
  <td rowspan="3">舞蹈</td>
  <td>民族舞</td>
</tr>
<tr>
  <td>跳高</td>
  <td>现代舞</td>
</tr>
<tr>
  <td>跨栏</td>
  <td>国标</td>
</table>
</body>
</html>
效果图:
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在HTML中,可以使用rowspan和colspan属性来合并单元格。跨行合并是指在垂直方向上合并上下单元格,可以在<td>标签中使用rowspan属性来设置跨行合并单元格数。而跨列合并是指在水平方向上合并单元格,可以在<td>标签中使用colspan属性来设置跨列合并单元格数。\[1\]\[2\] 合并单元格的流程是首先确定合并单元格的类型,即是跨行合并还是跨列合并。然后按照从上到下、从左到的顺序找到要设置rowspan或colspan属性的目标单元格。对于跨行合并,按照从上到下的顺序进行合并,最上方的单元格是目标单元格;对于跨列合并,按照从左到的顺序进行合并,最左侧的单元格是目标单元格。最后,删除合并后多余的单元格。\[3\] 以下是一个合并单元格的示例: 原始表格: | 单元格1 | 单元格2 | 单元格3 | | 单元格4 | 单元格5 | 单元格6 | 合并后的表格: | 合并单元格 | 单元格3 | | 单元格4 | 单元格6 | 在上面的示例中,单元格1和单元格2被跨行合并成一个单元格,而单元格2和单元格5被跨列合并成一个单元格。 #### 引用[.reference_title] - *1* [HTML常用标签之表格标签(合并单元格)](https://blog.csdn.net/m0_61794291/article/details/122527254)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | ...](https://blog.csdn.net/han1202012/article/details/128966139)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值