您的位置：首页 > Web前端 > HTML

table表格--合并单元格

2017-04-20 21:15 134 查看

知识点概要：

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>

页面显示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 合并 html 表格

相关文章推荐

新的分享

章节导航