html如何运用表格，表单
示例如图的任务做一个表格表单
1、了解相关表格，表单标签
拿到任务第一步先熟悉表格表单相关标签
表格相关标签
首先<table></table>
<tr>设置行
<th>设置表头
<td>设置表格单元
这三者遵循先设置行，行里设置表头，第二行开始设置表格单元
colspan合并行
cowspan合并列
<td cowspan="4"></td>合并四个单元格为一列
<caption>表头标题
表单标签
<form></form>表单：提交数据到服务器
action表示提交服务器的地址，跳转页面
<form action="biaodan.html">//这里是跳转到的地址
<input type="submit" value="跳转">
</form>
method提交数据方式
表单项
type:表单项的类型
text:文本
email:邮箱
password:密码框
month:月份
submit:提交
reset:重置按钮
button:普通按钮
color颜色选择器
radio:单选框
checkbox:复选框
number:数字选择框
输入文本：<input type="text">
<input type="radio"> 定义单选按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
示例：
<action="biaodan.html"method="get">
邮箱：<input type="text" name="123">
密码：<input type="password" name="password">
男：<input type="radio"name="sex"value="男">
女：<input type="radio"name="sex"value="女">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<select name="university">
<option value="云南师范大学">
云南师范大学
</option>
<option value="昆明理工大学">
昆明理工大学
</option>
<option value="云南大学">
云南大学
</option>
</select>
</action>
结果如图所示：
2、现在开始创建表格，表单
源代码：
<!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>
</head>
<style>
input{
width: 100%;
border-color:white;
}
td{
overflow: hidden;
text-align: center;
width: 95px;
}
</style>
<body>
<h2 style="text-align: center">个人简历</h2>
<table border="1" align="center" bordercolor="grey">
<tr>
<td>姓名</td>
<td><input type="text"></td>
<td>性别</td>
<td><input type="text"></td>
<td>出生年月</td>
<td><input type="text"></td>
<td rowspan="4"><input type="file"></td>
</tr>
<tr>
<td>民族</td>
<td><input type="text"></td>
<td>政治面貌</td>
<td><input type="text"></td>
<td>身高</td>
<td><input type="text"></td>
</tr>
<tr>
<td>学制</td>
<td><input type="text"></td>
<td>学历</td>
<td><input type="text"></td>
<td>户籍</td>
<td><input type="text"></td>
</tr>
<tr>
<td>专业</td>
<td><input type="text"></td>
<td colspan="2" style="text-align: center">毕业学校</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="7"><b>技能，特长或爱好</b></td>
</tr>
<tr>
<td>外语等级</td>
<td colspan="2"><input type="text"></td>
<td>计算机</td>
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td style="text-align: center;" colspan="7">个人履历</td>
</tr>
<tr>
<td >时间</td>
<td colspan="2">单位</td>
<td colspan="4">经历</td>
</tr>
<tr>
<td><input type="text"></td>
<td colspan="2"><input type="text"></td>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td colspan="2"><input type="text"></td>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td colspan="2"><input type="text"></td>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td style="text-align: center;" colspan="7">联系方式</td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="2"><input type="text"></td>
<td>联系电话</td>
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td>E-mail</td>
<td colspan="2"><input type="text"></td>
<td>邮编</td>
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td style="text-align: center;" colspan="7">自我评价</td>
</tr>
</table>
</body>
</html>
结果如图：
总结笔记：
有问题可私聊，喜欢请点赞关注哦~
html如何运用表格，表单相关推荐
- 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- vue.js 表格表单序号
vue.js 表格表单序号 表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
- 【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
- 通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
目录 一.表格表单的随机选择 效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局 第一步: 第二步: 2.CSS布局 3.JS的布局 第一步: 第二步: 第三步: 二.简单的随机点名 效果展 ...
- 表格表单HTML代码学生登记,html实现用户注册页面（表单+表格）——html小练习...
1 2 3 4 5 表格+表单练习 6 7 8 9 10 11 注册新用户 12 13 14 15 16 17 18 19 20 21 22 23 用户名 24 25 26 27 登陆邮箱 28 29 ...
- js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
- js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
- HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...
最新文章
- iOS之使用CoreImage进行人脸识别
- gdb调试多进程和多线程命令 .
- Java BIO、NIO、AIO 学习
- intellij idea -- 工程移植
- SpringBoot与MyBatis技术集成
- Fluid给数据弹性一双隐形的翅膀 （1） -- 自定义弹性伸缩
- java 语言实现随机数
- 怎么对MySQL数据库操作大数据？这里有思路
- kindle导出电子书pc_在PC版Kindle上阅读Mobi电子书
- 6.27java斗地主
- 关于脏读，不可重复读，幻读的理解
- Linux返回上一级目录的命令
- OSChina 新年乱弹 ——爱你们，新年快乐
- ps4绝地求生服务器维护,绝地求生官方更新公告 无停机维护公告
- 2021年起重机司机(限桥式起重机)最新解析及起重机司机(限桥式起重机)新版试题
- 【风控系列】2. 如何构建一个有效的风控系统
- win7打不开chm格式文件
- Flutter尽然还能有这种操作！送大厂面经一份！
- 第二代计算机主要应用领域转为____.,计算机应用基础知识2解答.doc
- 青年大学习未看人员名单查询（JAVA）
热门文章
- 【SOAP-WebService系列】Windows Server安装UDDI以及使用
- 数据结构中的什么是数组？什么是链表？
- 软件测试 app自动化03 toast元素的定位 滑屏操作 触屏操作
- 世界那么大，能遇见真不容易
- 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
- vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传
- Bootstrap中的col-lg-*，col-md- *和col-sm- *有什么区别？
- vue 如何实现多页面应用
- “开源工业软件论坛”召开，澎峰科技受邀参加！
- FastDFS的Java客户端无法使用maven依赖和undefined for the type TrackerClient异常问题