table表格--合并单元格

article/2025/9/12 22:19:50

知识点概要：

1、colpan:横向合并"n"个单元格--n:默认=1

2、rowspan:纵向合并"n"个单元格--n:默认=1

代码demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 合并单元格 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>table--合并单元格</title><style type="text/css">td {text-align: center;}</style></head><body><!-- 横向合并单元格 --><table border="1" cellspacing="0" width="50%" height="240"><caption><font size="6">横向合并单元格</font></caption><!-- colpan:横向合并"n"个单元格     n:默认=1 --><tr> <td>姓名</td> <td colspan="2">班级+学号</td> </tr><tr> <td>张三</td> <td>1406401</td> <td>01</td> </tr><tr> <td>李四</td> <td>1406401</td> <td>02</td> </tr><tr> <td>关羽</td> <td>1406402</td> <td>01</td> </tr><tr> <td>张飞</td> <td>1406402</td> <td>02</td> </tr></table><br/><hr size="10pt" color="0000ff"><br/><!-- 纵向合并单元格 --><table border="1" cellspacing="0" width="50%" height="240"><caption><font size="6">横向合并单元格</font></caption><!-- rowspan="2":纵向合并"n"个单元格     n:默认=1 --><tr>             <td>班级</td> <td>学号</td> <td>姓名</td> </tr><tr> <td rowspan="2">401</td> <td>01</td> <td>张三</td> </tr><tr>                          <td>02</td> <td>李四</td> </tr><tr> <td rowspan="2">402</td> <td>01</td> <td>关羽</td> </tr><tr>                          <td>02</td> <td>张飞</td> </tr></table><br/><br/><br/></body>
</html>

页面显示：