Day02 HTML制作表格以及练习

已于 2022-08-16 15:16:13 修改
阅读量972 收藏 12
点赞数 4
CC 4.0 BY-SA版权
文章标签： html css
于 2020-10-20 22:22:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Libe2ty/article/details/109191054
本文介绍了HTML中制作表格的基本元素，如table、tr、th、td等，详细讲解了各元素的属性，如cellpadding、cellspacing、align、valign等，并通过三个练习——简历表格、课程表和水果价格表，帮助读者掌握表格制作技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML 制作表格

table标签：表格标签
tr标签：表格中的行
th标签:表格的表头 默认居中
td标签：表格单元格 默认左并齐
cellpadding="数字"填充外边框
cellspacing=“数字” 填充表格间距
bgcolor 背景颜色
align 水平调节位置
valign 竖直调节距离
colspan=“合并单元格数” 跨列(行) 填充单元格 columnspan
rowspan=“合并单元格数” 跨行(列) 填充单元格 rowspan
快捷添加x行y列个单元格: table > tr * x > th * y + "Tab"键
del标签等于s标签:一段带有已删除部分和新插入部分的文本

练习1:简历的表格

任务:

	<body>
		<h1 align="center">
			<b>个人简历</b>
		</h1>
        
		<table border="1" width="600"  cellpadding="10" cellspacing="0"
		align="center">
			<tr >
				<th width="100" bgcolor="skyblue">姓名</th>
				<th width="150">    </th>
				<th width="100" bgcolor="skyblue">性别</th>
				<th width="150">   </th>
				<th width="100" rowspan="5">照片</th>
			</tr>
			<tr align="center">
				<td bgcolor="skyblue">出生年月</td>
				<td>    </td>
				<td bgcolor="skyblue">籍贯</td>
				<td>    </td>
			</tr>
			<tr align="center">
				<td bgcolor="skyblue">政治面貌</td>
				<td>    </td>
				<td bgcolor="skyblue">民族</td>
				<td>    </td>
			</tr>
			<tr align="center">
				<td bgcolor="skyblue">健康情况</td>
				<td>    </td>
				<td bgcolor="skyblue">婚姻状况</td>
				<td>    </td>
			<tr align="center">
				<td bgcolor="skyblue">联系电话</td>
				<td>    </td>
				<td bgcolor="skyblue">电子邮箱</td>
				<td>www.51jianli.com</td>
			</tr>
			<tr align="center">
				<td bgcolor="skyblue">求职意向</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center" height="200">
				<td bgcolor="skyblue">工作经历</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center" height="50">
				<td bgcolor="skyblue">教育经历</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center" height="50">
				<td bgcolor="skyblue">英语水平</td>
				<td colspan="4"></td>
			</tr>
			</tr>
			<tr align="center" height="50">
				<td bgcolor="skyblue">计算机水平</td>
				<td colspan="4"></td>
			</tr>
			</tr>
			<tr align="center" height="80">
				<td bgcolor="skyblue">自我评价</td>
				<td colspan="4"></td>
			</tr>
		</table>
	</body>

我的运行结果:
在这里插入图片描述

练习二:课程表
	<body>
		<h3 align="center">课程表</h3>
		<table align="center" border="1" cellspacing="10" cellpadding="10">
			<tr>
				<th>项目</th>
				<th colspan="5">上课</th>
				<th colspan="2">休息</th>

			</tr>
			<tr bgcolor="pink">
				<th>星期</th>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr>
			<tr>
				<th rowspan="4">上午</th>
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
				<th>英语</th>
				<th>物理</th>
				<th>计算机</th>
				<th rowspan="4">休息</th>
			</tr>
			<tr>
				<th>数学</th>
				<th>数学</th>
				<th>地理</th>
				<th>化学</th>
				<th>历史</th>
				<th>计算机</th>
			</tr>
			<tr>

				<th>语文</th>
				<th>数学	</th>
				<th>历史</th>
				<th>计算机</th>
				<th>物理</th>
				<th>化学</th>
			</tr>
			<tr>

				<th>数学</th>
				<th>数学</th>
				<th>地理</th>
				<th>化学</th>
				<th>历史</th>
				<th>计算机</th>
			</tr>
			<tr>
				<th rowspan="2">下午</th>
				<th>数学</th>
				<th>数学</th>
				<th>地理</th>
				<th>化学</th>
				<th>历史</th>
				<th>计算机</th>
				<th rowspan="2">休息</th>
			</tr>
			<tr>
				<th>数学</th>
				<th>数学</th>
				<th>地理</th>
				<th>化学</th>
				<th>历史</th>
				<th>计算机</th>

			</tr>
		</table>
	</body>

运行结果:
在这里插入图片描述

练习三:水果价格表

目标:
在这里插入图片描述

	<body>
		<h2  align="center"> <b>水果展示</b> </h2>
		<hr style="color: red;"/>
		<table align="center" border="0" width=800" >
			<tr>
				<th rowspan="4" ><img src="水果展示/banana.jpg" ></th>
				<th align="left">名称:香蕉</th>
				<th rowspan="4" ><img src="水果展示/pineapple.jpg"  </th>
				<th align="left">名称:菠萝</th>
				<th rowspan="4" ><img src="水果展示/banana.jpg" ></th>
				<th align="left">名称:香蕉</th>
			</tr>
			<tr>
				<th align="left"><del>¥19.80</del> </th>
				<th align="left"><del>¥19.80</del> </th>
				<th align="left"><del>¥19.80</del> </th>
			</tr>
			<tr>
				<th align="left">¥9.80</th>
				<th align="left">¥9.80</th>
				<th align="left">¥9.80</th>
			</tr>
			<tr>
				<th align="left">产地:海南</th>
				<th align="left">产地:广西</th>
				<th align="left">产地:海南</th>

			</tr>
			<tr>
				<th align="right">名称:桃子</th>
				<th  rowspan="4"><img src="水果展示/peach.jpg"</th>
				<th align="right">名称:梨</th>
				<th rowspan="4"><img src="水果展示/pear.jpg"</th>
				<th align="right">名称:葡萄</th>
				<th rowspan="4"><img src="./水果展示/grape.jpg"</th>
			</tr>
			<tr>
				<th align="right"><del>¥19.80</del></th>
				<th align="right"><del>¥19.80</del></th>
				<th align="right"><del>¥19.80</del></th>
			</tr>
			<tr>
				<th align="right">¥9.80</th>
				<th align="right">¥9.80</th>
				<th align="right">¥9.80</th>
			</tr>
			<tr>
				<th align="right">产地:陕西</th>
				<th align="right">产地:陕西</th>
				<th align="right">产地:陕西</th>
			</tr>
		</table>
		<hr style="color: red;"/>
		<h4 align="center">公司地址:陕西省西安市
		<br />
		电话:029-98765432
		</h4>
	</body>

我的运行结果:
在这里插入图片描述

Libe2ty
关注
html表格练习
qq_42312396的博客
01-20 612
代码，数据是随便写的 <table> <caption> 各项数据 </caption> <!-- 标题 --> <thead> <tr> <th scope="col" rowspan="2" colspan="2"></th> <th scope="col" rowspan="2">种类</th> <th sc
HTML表格习题练习
qq_50589028的博客
02-20 2569
文章目录一、会议日程安排表二、课程表设计 一、会议日程安排表 <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <h3 align="center">设置单元格跨列、跨行属性</h3> <center><table border="1" bordercolor="#3366ff"> <capt
【HTML】表格练习
点滴记忆
03-12 463
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=...
用HTML做表单表格练习
最新发布
2401_89119136的博客
04-28 312
提交按钮：<input name="button" type="submit" value="提交">为默认风格提交按钮；<input name="button00" type="submit" class="btn00" id="button0" value="登录">应用.btn00样式，有特殊边框、背景色和透明度。自定义文本域：<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">应用.text1样式，改变边框和文字颜色。
table.html（html表格练习）
07-21
html5简单的项目支出表格作业，表内容为 项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 发展性专项 建设性专项 基本建设和大修理项目 合计 项目前期费用 征地费 建筑工程费 安装工程费 设备等购置费 原 材 料 其他费用 各种建筑物面积 起始年 终 止 年 项目属性 新增项目 上年延续项目 项目预算来源 项目当年预算 项目总预算 合计 1、财政拨款（补助） 会议培训项目
2.html标准表格练习
weixin_42666092的博客
12-23 434
表格组成table/caption/ thead/tbody/tfoot tr、td/th colspan和并列 rowspan合并行 <table border="1" cellspacing="0" width="830px" hight="290px"> <caption><b>（外部）分包工程核算单</b> </caption> <thead> <!-- 表头 三行十一列 -->
Python Day12 练习题，制作HTML简历表格
qq_67780151的博客
07-06 365
用 HTML 制作简历表格，超级简单，快来试试吧！
Day3—HTML个人简历制作及五彩导航练习
qq_45313388的博客
06-03 872
个人简历制作和五彩导航练习一、个人简历制作1.表格2.表单二、五彩导航1.CSS超链接样式1.1 CSS超链接样式设置2.设置超链接状态样式2.1 文本修饰2.2 背景样式三、实例结果1.个人简历制作2.五彩导航 一、个人简历制作 1.表格 表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片
html制作统计期末成绩,JS-结合html综合练习js的对象——班级成绩表制作
weixin_36465108的博客
06-09 1431
对象综合练习body {font: 14px "微软雅黑";}span {padding: 5px;}table {margin: 0 auto;border: 3px solid cornflowerblue;}tr{border: 1px solid #4169E1;}td#y,#m,#d,#day{border:none;}x班期末成绩表姓名成绩备注小明87小花81小红97小天76小张54不...
html 网页制作到Js小游戏简单制作
04-11
"web_day03"、"web_day02"和"web_day04"很可能是按照学习进度划分的章节，包含了HTML和JS的进阶内容，可能涵盖了事件处理、DOM操作、AJAX、JSONP、以及一些常见的JS库和框架的介绍。 "课程记录pdf"可能是一个详细的...
HTML常用标签代码
05-07
在"day02"这个子文件夹中，可能包含了更深入的实践教程或示例，例如对这些标签的实际应用。通过这些资源，学习者可以加深对HTML的理解，提高网页制作技能。记得理论结合实践，不断探索和尝试，才能更好地掌握HTML这...
HTML-表格练习题
m0_49368215的博客
05-12 757
初学小白训练集
HTML表单练习
weixin_33676492的博客
01-14 210
最近学车啊，明天还要出去在外地练，电脑都摸不到了=-= HTML 表单用于搜集不同类型的用户输入，主要用于收集网页上浏览者的信息。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（<form>）定义。 &l...
HTML（表格和表单的练习）
chyb918的博客
12-23 894
初学者的表格表单练习
HTML表格练习（课程表、个人简历）
weixin_45239190的博客
08-06 302
课程表 练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
HTML 表格及练习
weixin_51559599的博客
10-17 1063
表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构：每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高基本结构
html5-表格练习题
tester92的博客
04-18 6219
纯html编写（仅供参考，并非完美答案）：&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;    &lt;/head&gt;    &lt;body&gt;        
HTML中表格练习
wyqwilliam的博客
12-05 405
<html> <head> <title>表格的学习</title> <meta charset="UTF-8"/> </head> <body> <h3>表格的学习</h3> <hr /> <table style="border-bottom...
HTML的表格练习
PC_small_wang的博客
12-02 406
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阶段测试二</title> </head> <body> <h1>英雄技能</h1> <table b...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值