表格练习

最新推荐文章于 2021-02-24 20:01:42 发布
最新推荐文章于 2021-02-24 20:01:42 发布
阅读量975 收藏 4
点赞数 3
分类专栏： 网页 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crraxx/article/details/109192068
版权

表格1-花名册：

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 表格标签，table（表）、tr（表格中的行）、td（普通表格）和th（表头），写在表头中的内容会自动居中和加粗 -->
	<!-- border="1"表格有边界；border="0"表格无边界。 -->
	<!-- 在table中可设置某些属性，如cellpadding可设置内容距离边框的距离即内边距，cellspacing可设置外边距，width可设置表格的宽度，height用来设置表格的高度 -->
	<!-- 在行属性中可以设置表格高度height，在列属性中可设置表格宽度width，即行高列宽 -->
	<body>
		<table border="1" cellpadding="20" cellspacing="0" width="400" height="205">
			<tr >
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>出生日期</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>16</td>
				<td>女</td>
				<td>2020-12-25</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>16</td>
				<td>女</td>
				<td>2020-12-25</td>
			</tr>
		</table>
	</body>
</html>

运行结果：

在这里插入图片描述

表格2-简历：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- bgcolor可设置背景颜色，颜色也可通过屏幕取色器吸取 -->
	<!-- 
	 colspan单元格跨行列合并，在同行之间进行，如colspan="4"，将同一个表格行中的多余单元格删除
	 sawspan行合并，在同一列之间进行，如sawspan="4" 需要将不同单元格中的对应单元格删除
	 -->
	<body>
		<table border="1">
			<tr>
				<th bgcolor="aquamarine">姓名</th>
				<th width="100"></th>
				<th bgcolor="aquamarine">
					性别
				</th>
				<th></th>
				<th rowspan="5" width="150" height="200"> </th>
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">
					出生年月
				</td>
				<td></td>
				<td bgcolor="aquamarine">
					籍贯
				</td>
				<td></td>
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">
					政治面貌
				</td>
				<td></td>
				<td bgcolor="aquamarine">民族</td>
				<td></td>	
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">
					健康状况
				</td>
				<td></td>
				<td bgcolor="aquamarine">婚姻状况</td>
				<td></td>	
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">
					联系电话
				</td>
				<td></td>
				<td bgcolor="aquamarine">电子邮件</td>
				<td>www.baidu.com</td>	
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">求职意向</td>
				<td colspan="4" height="40"></td>
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">工作经历</td>
				<td colspan="4" height="200"></td>	
			</tr>
			
			<tr>
			<td bgcolor="aquamarine">教育经历</td>
			<td colspan="4" height="40"></td>
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">英语水平</td>
				<td colspan="4" height="40"></td>
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">计算机水平</td>
				<td colspan="4" height="40"></td>
			</tr>
			
			<tr>
				<td bgcolor="aquamarine">自我评价</td>
				<td colspan="4" height="40"></td>	
			</tr>
			
		</table>
	</body>
</html>

运行结果：

在这里插入图片描述

表格3-财务报表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- align设置水平位置，left(向左对齐，默认)，center（居中）和right（向右对齐） -->
	<!-- vaign设置垂直位置，top（向上对齐），middle（中间对齐）和bottom（向下对齐） -->
	<body align="center">
		<b>财务报表</b>
		<table align="center" border="1" cellpadding="10" cellspacing="0">
			
			<tr >
				<td>季度</td>
				<td colspan="2" align="center">收入（元）</td>
				<td colspan="2" align="center">支出（元）</td>
			</tr>
			
			<tr>
				<td></td>
				<td>建筑</td>
				<td>房地产</td>
				<td>销售服务</td>
				<td>办公</td>
			</tr>
			
			<tr>
				<td>第一季度</td>
				<td>306000</td>
				<td>282000</td>
				<td>90000</td>
				<td>10000</td>
			</tr>
			
			<tr>
				<td>第二季度</td>
				<td>450000</td>
				<td>364000</td>
				<td>54000</td>
				<td>20000</td>
			</tr>
		</table>
	</body>
</html>

运行结果：

在这里插入图片描述

表格4-财务报表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body align="center">
		<table  border="1" cellpadding="10" cellspacing="0">
			<tr>
				<td colspan="8">财务报表</td>
			</tr>
			
			<tr>
				<td colspan="2">品牌</td>
				<td colspan="3">春装</td>
				<td colspan="3">夏装</td>
			</tr>
			
			<tr>
				<td colspan="2"></td>
				<td>男装</td>
				<td>女装</td>
				<td>童装</td>
				<td>男装</td>
				<td>女装</td>
				<td>童装</td>
			</tr>
			
			<tr>
				<td rowspan="2">JC</td>
				<td>牛仔系列</td>
				<td>116</td>
				<td>98</td>
				<td>68</td>
				<td>88</td>
				<td>86</td>
				<td>46</td>
			</tr>
			
			<tr>
				<td>休闲系列</td>
				<td>120</td>
				<td>100</td>
				<td>80</td>
				<td>98</td>
				<td>88</td>
				<td>50</td>
			</tr>
		</table>
	</body>
</html>

运行结果：

在这里插入图片描述

表格5-课程表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 若需要生成的表格行和列比较多则可用  table>行数tr*>列数td* 接下来按Tab键 -->
	<body align="center">
		<h4>课程表</h4>
		<table  align="center" border="1" cellpadding="10" cellspacing="5">
			<tr>
				<td>项目</td>
				<td colspan="5">上课</td>
				<td colspan="2">休息</td>
			</tr>
			
			<tr bgcolor="bisque">
				<td>星期</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期日</td>
			</tr>
			
			<tr>
				<td rowspan="4">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td rowspan="4">休息</td>
			</tr>
			
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
			
			<tr>
				<td>语文</td>
				<td>数学</td>
				<td>历史</td>
				<td>计算机</td>
				<td>物理</td>
				<td>化学</td>
			</tr>
			
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
			
			<tr>
				<td rowspan="2">下午</td>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>	
				<td rowspan="2">休息</td>
			</tr>
			
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
		</table>			
	</body>
</html>

运行结果：

在这里插入图片描述

表格6-水果展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 用<hr />设置的下划线默认颜色为灰色，用color=""可设置下划线颜色如<hr color="red"/>
	 -->
	<body>
		<h4 align="center">水果展示</h4>
		<hr color="red" />
		<table cellpadding="30" cellspacing="0" border="0" align="center">
			<tr>
				<td>
					<img src="img/banana.jpg" />
				</td>
				
				<td>
					名称：香蕉<br />
					原价：<del>￥19.80</del><br />
					现价：￥9.8<br />
					产地：海南<br />
				</td>
				
				<td>
					<img src="img/pineapple.jpg" />
				</td>
				
				<td>
					名称：菠萝<br />
					原价：<del>￥19.80</del><br />
					现价：￥9.8<br />
					产地：广西<br />
				</td>
				
				<td>
					<img src="img/banana.jpg" />
				</td>
				
				<td>
					名称：菠萝<br />
					原价：<del>￥19.80</del><br />
					现价：￥9.8<br />
					产地：广西<br />
				</td>
			</tr>
			<tr>
				<td>
					名称：桃子<br />
					原价：<del>￥19.80</del><br />
					现价：￥9.8<br />
					产地：陕西<br />
				</td>
				
				<td>
					<img src="img/peach.jpg" />
				</td>
				<td>
					名称：梨<br />
					原价：<del>￥19.80</del><br />
					现价：￥9.8<br />
					产地：陕西<br />
				</td>
				
				<td>
					<img src="img/pear.jpg" />	
				</td>
				
				<td>
					名称：葡萄<br />
					原价：<del>￥19.80</del><br />
					现价：￥9.8<br />
					产地：陕西<br />
				</td>
				
				<td>
					<img src="img/grape.jpg" />
				</td>
			</tr>
		</table>
		<hr color="red"/>
		<p align="center" >
		<font color="darkgray">
		公司地址：陕西省西安市<br />
		电话：029-98765432	
		</font>
		</p>	
	</body>
</html>

运行结果：

在这里插入图片描述

crraxx
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
excel电子表格练习题
05-24
供云南省初中信息技术考试用，可参照云南省信息考试说明
Web前端——表格表单练习
qq_53715074的博客
11-10 1937
要求： 网页源代码： 网页效果图： 要求： 网页源代码： 网页效果图： 要求： 网页源代码： 网页效果图：
excel表格练习_Excel工作必备常用技巧6个，小白秒变高手
weixin_39644021的博客
11-18 2751
上期的Excel魔法世界，我们介绍了Excel的表格冻结，筛选，日期函数，分列，条件判断公式以及vlookup函数。这篇文章我们会分享Excel另外一些特别实用的功能和技巧，包括IF的嵌套函数，单变量求解，敏感性分析，MID函数，数据透视表基础和Excel的打印技巧。希望大家可以从中感受到Excel的魔法魅力，并且能够多多练习和运用。IF的嵌套函数IF的嵌套函数非常实用，可以用一个公式将一整列数据...
excel练习题
02-01
最近帮助家里人学习基础excel操作，还是挺有用的，会陆续传上来
Excel表格练习题集.docx
12-16
Excel表格练习题集.docx
Excel表格练习题.doc
11-15
Excel表格练习题.doc
表格练习.html
最新发布
09-14
表格练习.html
Excel表格练习题集优质资料.doc
12-03
Excel表格练习题集优质资料.doc
Excel表格练习试题优质资料.doc
12-01
Excel表格练习试题优质资料.doc
经典EXCEL练习题
05-15
EXCEL练习题，公式练习，经典题目，复杂公式。EXCEL练习题，公式练习，经典题目，复杂公式。
excel操作练习题
12-15
按要求操作： 1、设置工作表、列：10、标题行：行高30；其余行高为20。 2、设置单元格： （1）标题格式：字体：楷书；字号：20；字体颜色为红色；跨列居中；底纹黄色。 （2）将总成绩右对齐；其它各单元格内容居中。 3、设置表格边框：外边框为双线，深蓝色；内边框为细实心框，黑色。 4、重命名工作表：将sheet1工作表重命名为“学生成绩表”。 6、复制工作表：将“学生成绩表”工作表复制到sheet2中，将sheet2重命名为“成绩图表分析”。 7、将姓名和总成绩建立柱形图表并将图表命名为“学生成绩图表”。 8、计算学生总成绩、平均成绩、最高成绩。 9、按总成绩递增排序。 10、数据筛选：筛选“总成绩”“>240分”出来；并复制到sheet3重命名为“分数线”
各种应用表格作练习用
10-12
spc各种应用表格可作练习用 Cpk换算 平均极差分布及控制图常数表 SPC Calculator
table.html（html表格练习）
07-21
html5简单的项目支出表格作业，表内容为 项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 发展性专项 建设性专项 基本建设和大修理项目 合计 项目前期费用 征地费 建筑工程费 安装工程费 设备等购置费 原 材 料 其他费用 各种建筑物面积 起始年 终 止 年 项目属性 新增项目 上年延续项目 项目预算来源 项目当年预算 项目总预算 合计 1、财政拨款（补助） 会议培训项目
【小练习03】CSS-表格（table）--天气预报
05-12
表格练习
HTML-简单练习
crraxx的博客
02-24 7313
练习1-李白 要求示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body align = "center"> <h1> 古诗词鉴赏</h1> <hr /> <h2 >静夜思</h2> <a href="
css简单练习5
crraxx的博客
11-06 2257
css简单练习5 根据css现学内容，完成如下页面布局。 图例如下所示： 练习分析： 整体观察图片可知该网页的背景颜色是灰色，即最大的盒子中背景颜色应设为灰色。大盒子中摆入多个小一点的盒子来完成布局，其他的盒子摆放可通过下图来理解。 盒子摆好后可以根据实际情况加入外边距（margin）或内边距（padding）来分开盒子，以便于按要求完成任务。 对于形状相同的盒子写出来一个后复制粘贴来，可以减少作业任务。 对于上方的菜单导航栏中可以加入伪类来增强视觉效果。 若代码量比较大为了编写方便，可以将css代码块
HTML小白也能懂-1
crraxx的博客
10-24 1915
HTML小白也能懂-1 HTML简介 什么是HTML? HTML指超文本标记语言（Hyper Text Markup Language），它不是一种编程语言而是一种标记语言。 超文本：采用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 标记语言：用标签标注网页内容，浏览器在运行网页时就可以根据标注显示相应的格式。 HTML能做什么？ 制作网页。 html基础 基本的HTML标签-四个实例 HTML标题 HTML标题是通过<h1> - <h6>等标签进行定义的 实例 &l
css简单练习3
crraxx的博客
10-29 1900
css简单练习3 要求：淘宝首页框架布局 参考图片如下 用div与浮动有关知识完成 代码实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0rem; } #box1 { wi
vlookup练习表格
07-28
为了进行vlookup练习，我们可以创建一个包含数据的表格。假设我们需要创建一个销售数据表格，其中包含产品名称、销售数量和销售金额。我们可以按照如下步骤进行练习： 1. 创建一个新的Excel工作表，并在第一行中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值