web表格与表单

最新推荐文章于 2022-10-17 22:12:25 发布

前端_小智

最新推荐文章于 2022-10-17 22:12:25 发布

阅读量739

点赞数 1

分类专栏： HTML 文章标签： web表格表单

本文链接：https://blog.csdn.net/weixin_43445778/article/details/102964124

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表格与表单

表格是由单元格的矩形框构成，从左到右、从上到下的顺序的结构按照一定的格式来摆放数据。
关于创建表格
定义表格<table></table>
创建行<tr></tr>
创建单元格<td></td>
表格的属性
table属性：
border cellpadding 单元格的内边距（单元格边框与内容的距离）
cellspacing 单元格的外边距（单元格之间的距离）
width height align（水平位置） bgcolor（背景颜色）
tr属性：
align（调整内容水平对齐方式）
valign（调整内容垂直对齐方式）
bgcolor（背景颜色）
td属性：width height align valign cowspan rowspan

表格的标题<caption></caption>
关于复杂表格

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

表单

用于显示、收集用户的信息、并且将信息穿给服务器
主要由表单元素和表单控件组成。
用法<form></form>
表单属性：
action（定义表单被提交的时候的动作，服务器上处理数据）
method：get/post
get提交数据有长度限制；post无长度限制而且安全性更高。
表单控件
type:创建各种类型的输入字段；
value:值；
name:控件名称，没有name无法提交；
disabled:禁用控件；

个人制作表格的代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>个人简历</title>
	</head>
	<body>
		<table border="1" cellpadding="1" cellspacing="0" width="430px" height="644px" align="center" background="img/01.jpg">
			<tr height="20px">
				<th colspan="5">个人求职简历</th>
			</tr>
			<tr height="20px" align="center">
				<td >姓名</td>
				<td></td>
				<td >性别</td>
				<td></td>
				<td rowspan="6"></td>
			</tr>
			<tr height="20px" align="center">
				<td>年龄</td>
				<td></td>
				<td>出生日期</td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td>所在城市</td>
				<td></td>
				<td>从事行业</td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td>学历</td>
				<td></td>
				<td>民族</td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td>婚姻状况</td>
				<td></td>
				<td>身份证</td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td>毕业学校</td>
				<td></td>
				<td>计算机能力</td>
				<td></td>
			</tr>
			<tr height="20px">
				<td colspan="5"></td>
				<!--<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td rowspan="3">家庭成员</td>
				<td height="20px">姓名</td>
				<td >成员关系</td>
				<td >职务</td>
				<td >工作单位</td>
			</tr>
			<tr height="20px" align="center">
				<!--<td></td>-->
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td colspan="5"></td>
			</tr>
			<tr align="center">
				<td rowspan="5">工作经历</td>
				<td height="20px">工作时间</td>
				<td>公司名称</td>
				<td>职位名称</td>
				<td>所属部门</td>
			</tr>
			<tr height="20px" align="center">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td rowspan="2"></td>
				<td rowspan="2"></td>
				<td height="20px"></td>
				<td></td>
			</tr>
			<tr height="20px" align="center">
				<td></td>
				<td></td>
			</tr>
			<tr height="20px" >
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr height="20px">
				<td colspan="5"></td>
			</tr>
			<tr height="20px" align="center"> 
				<td rowspan="2">教育情况</td>
				<td>时间</td>
				<td>学校</td>
				<td colspan="2">学历</td>
			</tr>
			<tr height="20px">
				<td></td>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20px">
				<td colspan="5"></td>
			</tr>
			<tr height="20px" align="center">
				<td rowspan="2">培训经历</td>
				<td>培训时间</td>
				<td>培训机构</td>
				<td colspan="2">培训内容</td>
			</tr>
			<tr height="20px">
				<!--<td></td>-->
				<td></td>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20px" align="center">
				<td>备注</td>
				<td colspan="4"></td>
			</tr>
			<tr height="20px">
				<td colspan="5"></td>
			</tr>
			<tr align="center">
				<td>自我评价</td>
				<td colspan="4"></td>
			</tr>
		</table>
	</body>
</html>

效果图：
在这里插入图片描述

前端_小智

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
web表格与表单

表格与表单表格是由单元格的矩形框构成，从左到右、从上到下的顺序的结构按照一定的格式来摆放数据。关于创建表格定义表格<table></table>创建行<tr></tr>创建单元格<td></td>表格的属性table属性：border cellpadding 单元格的内边距（单元格边框与内容的距离）c...
复制链接

扫一扫

专栏目录