1.什么是table？

table是html中的表格，由tr、td、th元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元

2.可选的属性

属性描述
border定义表格的边框
cellpadding单元格内内容与单元格边的间距
cellspacing单元格与表格边框的间隔
sumaary规定表格的摘要
width规定表格的宽度

3.合并单元格

用到表格，那么无可避免的就会用到合并的单元格，例如要在表格的结尾要写总计，这时候就需要合并单元格。

合并单元格分为合并列、合并行。

rowspan 是合并列

colspan 是合并行

那么怎么实现呢

<table border="1px" cellpadding="10px">
	<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
	<tr><td>1</td><td>憨憨</td><td>21</td></tr>
	<tr><td>2</td><td>哈哈</td><td>21</td></tr>
	<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
	<tr><td>4</td><td>芜湖</td><td>25</td></tr>
	<tr><td>5</td><td>乌拉</td><td>25</td></tr>
	<tr><td>总数</td><td>5</td><td> </td></tr>
</table>

 上面的代码是一个表格运行如下，我们需要把红色部分合并

 

 3.1实现单元格合并列

如果我们要合并列，那么就把要合并的第二个单元格②删掉，然后在第一个单元格①的属性中写上rowspan，并写上值。

代码如下：

    <tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>	
	<tr><td>2</td><td>哈哈</td></tr>

  

3.1实现单元格合并行

如果 我们要合并列，那么就把要合并的第二个单元格④删掉，然后在第一个单元格③的属性中写上colspan，并写上值。

代码如下：

    <tr><td>总数</td><td colspan="2">5</td></tr>

4.演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三课table标签</title>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="10">
			<caption>姓名图</caption>
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>憨憨</td><td>21</td></tr>	
			<tr><td>2</td><td>哈哈</td><td>22</td></tr>	
		</table>
		<br />
		<table border="1" cellpadding="10">
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>	
			<tr><td>2</td><td>哈哈</td></tr>	
			<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
			<tr><td>4</td><td>芜湖</td><td rowspan="2">25</td></tr>
			<tr><td>5</td><td>乌拉</td></tr>
			<tr><td>总数</td><td colspan="2">5</td></tr>
		</table>
	</body>
</html>

# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟