Day02 HTML制作表格以及练习

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

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">电子邮箱
最低0.47元/天 解锁文章
Libe2ty
关注
html表格练习
qq_42312396的博客
01-20 558
代码，数据是随便写的 <table> <caption> 各项数据 </caption> <!-- 标题 --> <thead> <tr> <th scope="col" rowspan="2" colspan="2"></th> <th scope="col" rowspan="2">种类</th> <th sc
【HTML】表格练习
点滴记忆
03-12 384
<!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表格习题练习
qq_50589028的博客
02-20 2445
文章目录一、会议日程安排表二、课程表设计 一、会议日程安排表 <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <h3 align="center">设置单元格跨列、跨行属性</h3> <center><table border="1" bordercolor="#3366ff"> <capt
table.html（html表格练习）
07-21
html5简单的项目支出表格作业，表内容为 项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 发展性专项 建设性专项 基本建设和大修理项目 合计 项目前期费用 征地费 建筑工程费 安装工程费 设备等购置费 原 材 料 其他费用 各种建筑物面积 起始年 终 止 年 项目属性 新增项目 上年延续项目 项目预算来源 项目当年预算 项目总预算 合计 1、财政拨款（补助） 会议培训项目
2.html标准表格练习
weixin_42666092的博客
12-23 398
表格组成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 327
用 HTML 制作简历表格，超级简单，快来试试吧！
Day3—HTML个人简历制作及五彩导航练习
qq_45313388的博客
06-03 815
个人简历制作和五彩导航练习一、个人简历制作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 1346
对象综合练习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-表格练习题
m0_49368215的博客
05-12 639
初学小白训练集
HTML表单练习
weixin_33676492的博客
01-14 181
最近学车啊，明天还要出去在外地练，电脑都摸不到了=-= HTML 表单用于搜集不同类型的用户输入，主要用于收集网页上浏览者的信息。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（<form>）定义。 &l...
HTML表格练习（课程表、个人简历）
weixin_45239190的博客
08-06 269
课程表 练习 <!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 983
表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构：每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高基本结构
html5-表格练习题
tester92的博客
04-18 6064
纯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 360
<html> <head> <title>表格的学习</title> <meta charset="UTF-8"/> </head> <body> <h3>表格的学习</h3> <hr /> <table style="border-bottom...
HTML的表格练习
PC_small_wang的博客
12-02 349
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阶段测试二</title> </head> <body> <h1>英雄技能</h1> <table b...
HTML表格练习
zhang519767114的专栏
07-29 622
表格练习 第一行第一列 第一行第二列 第一行第三列 第一行第四列 第二行第一列 第二行第二列 第二行第三列 第二行第四列 第三行第一列 第三行第二列 第三行第三列 第三行第四列 第四行第一列 第四行第二列 第四行第三列 第四行第四列 姓名 性别 学号 年龄
html 表格练习
qq_35860368的博客
12-15 364
Title 对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术 1 1 1 1 2 2
HTML表格入门教程：标签详解与实战练习
"前端学习笔记day13，涵盖了HTML表格的相关知识，包括`<table>`、`<tr>`、`<td>`和`<th>`标签的使用及其常见属性" 在HTML中，表格是一种用于组织数据的重要元素。在前端开发中，掌握如何创建和样式化表格是非常基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值