Html表格

最新推荐文章于 2024-09-27 09:37:38 发布

聪聪的学习笔记

最新推荐文章于 2024-09-27 09:37:38 发布

阅读量56

点赞数

分类专栏： HTML 文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_42773097/article/details/120020211

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个博客介绍了HTML中表格的基本属性，如`border`, `cellspacing`, `cellpadding`和`width`，并展示了如何创建带有标题、表头、表体和表脚的复杂表格。此外，还通过实例讲解了如何使用`colspan`和`rowspan`属性来实现单元格的跨行和跨列合并，以展示学生的成绩数据。

摘要由CSDN通过智能技术生成

表格的常用属性（table）

在这里插入图片描述

表格练习，如下图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复杂的表格练习</title>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="0" width="300px">
			<!-- 标题 -->
			<caption>年终数据报表</caption>
			
			<!-- 表头 -->
			<thead bgcolor="aqua">
				<tr>
					<th>月份</th>
					<th>收入</th>
				</tr>
			</thead>
			
			<!-- 表体,放数据的 -->
			<tbody bgcolor="green">
				<tr>
					<td>1月</td>
					<td>100</td>
				</tr>
				<tr>
					<td>2月</td>
					<td>80</td>
				</tr>
				<tr>
					<td>3月</td>
					<td>300</td>
				</tr>
				<tr>
					<td>4月</td>
					<td>400</td>
				</tr>
				<tr>
					<td>5月</td>
					<td>100</td>
				</tr>
				<tr>
					<td>6月</td>
					<td>200</td>
				</tr>
			</tbody>
			
			<!-- 表脚 -->
			<tfoot bgcolor="yellow">
				<tr >
					<td>平均月收入</td>
					<td>196.67</td>
				</tr>
				<tr>
					<td>总计</td>
					<td>1180</td>
				</tr>
			</tfoot>
			
		</table>
	</body>
</html>

在这里插入图片描述

表格的跨行与跨列（完成下列表格绘制）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单元格合并</title>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="0" width="300px">
		
			<tr>
				<!-- 把三个单元格合并到一起 -->
				<td align="center" colspan="3">学生成绩</td>
			</tr>
			
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			
			<tr>
				<td rowspan="2">李四</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
			
		</table>
	</body>
</html>