部分内容转自：https://www.cnblogs.com/inmeditation/p/12171727.html

一、表格

1、表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格标签	描述
<table>	表格的最外层容器
<tr>	定义表格行
<th>	定义表头
<td>	定义表格单元
<caption>	定义表格表题/2、

2、表格边框

属性	含义
border	表格边框
cellpadding	单元格内的空间
cellspacing	单元格之间的空间

3、语义化标签

语义化标签	描述
<thead>	表格头部
<tbody>	表格主题
<tfoot>	表格结束

4、表格属性

align	属性值
left	左
center	中
right	右

valign	属性值
top	上
middle	中
bottom	下

二、表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素

<form> 元素定义 HTML 表单：

<input> 元素

用于搜集用户信息,根据不同的type属性值,展示不同的控件

表单标签

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

例子：

 <form >输入框: <input type="text"> <br>密码框: <input type="password"> <br>复选框: <input type="checkbox">JAVA<input type="checkbox">C++<input type="checkbox">JS <br>单选框: <input type="radio" name="gender">男<input type="radio" name="gender">女  <br>上传文件: <input type="file"> <br>提交按钮: <input type="submit">重置按钮: <input type="reset"> <br></form>

结果：

表单属性

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。

GET方法的使用

GET方法为默认方法，在没有敏感信息时使用，适合少量数据的提交，浏览器会设置容量限制。

POST方法的使用

如果表单正在更新数据，或者包含敏感信息，则POST更加安全。

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

个人简历例子代码：

<!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"><title>Document</title></style>
</head>
<body><from><table border="1px" bordercolor="#000000" cellspacing="0px" ><tr> <caption><h2>个人简历</h2></caption></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">姓名</td><td width="100px"height="30px"><input type="text"  style="width: 92%;height: 70%;" /></td><td  style="text-align: center;"width="100px"height="30px">性别</td><td width="100px"height="30px"><input type="text" style="width: 92%;height: 70%;"/></td><td style="text-align: center;"width="100px"height="30px">出生年月</td><td width="100px"height="30px" ><input type="text"style="width: 92%;height: 70%;" /></td><td rowspan="4"width="100px"height="120px"><input type="file"style="width: 97%;height: 70%;"></td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">民族</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td style="text-align: center;"width="100px"height="30px">政治面貌</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td style="text-align: center;" width="100px"height="30px">身高</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">学制</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td style="text-align: center;"width="100px"height="30px">学历</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td style="text-align: center;"width="100px"height="30px">户籍</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">专业</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td style="text-align: center;" colspan="2"width="200px"height="30px">毕业学校</td><td  colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px"><b>技能、特长或爱好</b></td></tr><tr width="705px"> <td style="text-align: center;"width="100px"height="30px">外语等级</td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;"  /></td><td style="text-align: center;"width="100px"height="30px">计算机</td><td colspan="3"width="300px"height="30px"><input type="text" style="width: 97%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px">个人履历</td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">时间</td><td style="text-align: center;"colspan="2"width="200px"height="30px">单位</td><td style="text-align: center;"colspan="4"width="400px"height="30px">经历</td></tr><tr width="705px"><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;"  /></td><td colspan="4"width="400px"height="30px"><input type="text" style="width: 98%;height: 70%;" /></td></tr><tr width="705px"><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;"  /></td><td colspan="4"width="400px"height="30px"><input type="text" style="width: 98%;height: 70%;" /></td></tr><tr width="705px"><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;"  /></td><td colspan="2"width="200px"height="30px"><input type="text" style="width: 96%;height: 70%;" /></td><td colspan="4"width="400px"height="30px"><input type="text" style="width: 98%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px">联系方式</td></tr><tr width="705px"><td width="100px" height="30px"style="text-align: center;">通信地址</td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;"  /></td><td style="text-align: center;"width="100px"height="30px">联系电话</td><td colspan="3"width="300px"height="30px"><input type="text" style="width: 97%;height: 70%;" /></td></tr><tr width="705px"><td style="text-align: center;" width="100px"height="30px">E-mail</td><td colspan="2"width="200px"height="30px"><input type="text" style="width: 96%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">邮编</td><td colspan="3"width="300px"height="30px"><input type="text"style="width: 97%;height: 70%;"  /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px">自我评价</td></tr></table></from>
</body>
</html>

结果：

三、学习总结

四、注意事项

在个人简历例子中，需要使用到表单和表格，在<from>标签中嵌入<table>,在<td>中使用<input>输入数据。在<input>中可以使用百分比来设置撑满父容器。

HTML学习笔记二--表单及表格的结合使用个人简历制作相关推荐

ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
小白读《锋利的jQuery（第2版）》第五章学习笔记（表单、表格）
表单应用表单3个组成部分表单标签表单域表单按钮单行文本框应用获取和失去焦点改变样式. 示例: HTML <form action="#" method=" ...
AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
12.6学习笔记 HTML5表单元素/嵌入图片/视频（未完）
12.6学习笔记一. HTML 表单元素(下) 二. HTML5嵌入图片与创建分区响应图三. HTML5嵌入视频一. HTML 表单元素(下) 主要内容: 用input元素获取有规定格式的字符串 ...
前后端分离学习笔记(5) ---[表单的增删改操作；以及为管理员上传头像]
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面添加管理员操作修改管理员信息删除管理员为管理员上传头像修改密码 ...
Vue学习笔记(六) 表单输入绑定
v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...
阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）
欢迎光临你好我是阿ken 文章目录 7.1_认识表单 7.1.1_表单的构成 7.1.2_创建表单 ( < form> 标记 ) 7.2_表单属性 1. action 属性 2. me ...
h5学习笔记之表单类型与属性
一.智能表单 required: required 内容不能为空 placeholder: 表单提示信息 autofocus:自动聚焦 pattern: 正则表达式输入的内容必须匹配到指定正则范围 ...

HTML学习笔记二--表单及表格的结合使用个人简历制作