table表格--合并单元格

最新推荐文章于 2024-07-25 10:24:34 发布

目标达成

最新推荐文章于 2024-07-25 10:24:34 发布

阅读量877

点赞数 2

分类专栏： html 文章标签：合并 html 表格

本文链接：https://blog.csdn.net/liucai1018/article/details/70305316

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

知识点概要：

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>

页面显示：