HTML+CSS表格制作(合并单元格)简单方法

2025-07-05 15:51:39

1、我们通常用代码合并单元格的话,是这样的,跨列使用colspan,跨行使用rowspan。这里我先将代码贴出来,方便小伙伴们自己动手试试,稍后我将向大家俣糸诈萱展示如何使用DW CC方便快捷地合并单元格<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> table{border: 1px solid #000;width: 500px;height: 200px;margin: 0 auto;} table td{border: 1px solid #878787;}</style></head><body><table> <tr> <td colspan="7" style="text-align: center">表格内容</td> </tr> <tr> <td rowspan="4">表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr></table></body></html>

HTML+CSS表格制作(合并单元格)简单方法HTML+CSS表格制作(合并单元格)简单方法

4、我们将视图换成设计视图

HTML+CSS表格制作(合并单元格)简单方法

6、选中需要合并的单元格

HTML+CSS表格制作(合并单元格)简单方法

8、适当修改之后如下所示。合并单元格到此结束

HTML+CSS表格制作(合并单元格)简单方法
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢