表格

表格的基本构成标签

table标签：表格标签

caption标签：表格标题

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

表格的基本结构

<table>定义表格

<tr>定义表行

</tr>

<tr>

<td>定义单元格</td>

</tr>

</table>

           table 表示表格 border="1" width="300" bgcolor="aqua" cellspacing="0"(单元格之间的间距)
           tr   表行 bgcolor="chartreuse" height="50"
           th   表头(单元格) 加粗居中   width="80"
           td   单元格 colspan="4" 在同一行跨多列合并从哪列开始,添加colspan,给定合并的列数rowspan="3" 跨多行合并从哪个开始添加rowspan 给定合并的数量

简历代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" cellspacing="0" align="center"><caption><font size="20" color="black" ><h3 align="center">个人简历</h3></font></caption><tr><th width="100" height="40" bgcolor="aqua" align="center">姓名</th><th width="150" height="40"></th><th width="100" height="40" bgcolor="aqua" align="center">性别</th><th width="150" height="40"></th><th width="150" height="40" rowspan="5" >照片</th></tr> <tr><td width="150" height="40" bgcolor="aqua" align="center">出生日期</td><td width="150" height="40"></td><td width="150" height="40" bgcolor="aqua" align="center">籍贯</td> <td width="150" height="40"></td></tr><tr><td width="150" height="40" bgcolor="aqua" align="center">政治面貌</td><td width="150" height="40"></td><td width="150" height="40" bgcolor="aqua" align="center">民族</td> <td width="150" height="40"></td></tr><tr><td width="150" height="40" bgcolor="aqua" align="center">健康状况</td><td width="150" height="40"></td><td width="150" height="40" bgcolor="aqua" align="center">婚姻状况</td> <td width="150" height="40"></td></tr><tr><td width="150" height="40" bgcolor="aqua" align="center">联系电话</td><td width="150" height="40"></td><td width="150" height="40" bgcolor="aqua" align="center">电子邮箱</td> <td width="150" height="40"></td></tr><tr ><td width="150" height="40" bgcolor="aqua" align="center">求职意向</td><td width="150" height="40" colspan="4"></td></tr ><tr><td width="150" height="400" bgcolor="aqua" align="center">工作经验</td><td width="150" height="400" colspan="4"></td></tr><tr ><td width="150" height="50" bgcolor="aqua" align="center">教育经历</td><td width="150" height="50" colspan="4"></td></tr><tr ><td width="150" height="50" bgcolor="aqua" align="center">英语水平</td><td width="150" height="50" colspan="4"></td></tr><tr ><td width="150" height="50" bgcolor="aqua" align="center">计算机水平</td><td width="150" height="50" colspan="4"></td></tr><tr ><td width="150" height="50" bgcolor="aqua" align="center">自我评价</td><td width="150" height="50" colspan="4"></td></tr></table></body>
</html>

执行结果：

表单

form标签：表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终

提交表单,把客户端数据提交至服务器。

表单-文本

表单-其它表单

表单-下拉框

表单-多行文本域

表单-按钮

内联框架

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 表单:  拥有许多可以输入,选择组件 ,用户输入信息,最终向服务器提交数据form 表单标签action="访问后端服务器地址"methond="向服务器端提交数据的方式 http get/post  "input type="text"  类型 当行文本框name="自定义"value="输入值"placeholder="请输入用户名"  提示readonly="readonly" 只读  可以提交数据disabled="disabled" 禁用  不能提交数据type="password"   密码框type="radio" 单选框, name值相同为一组,互斥选中一个, 选择性的组件必须给予默认值,  checked="checked"默认选中type="checkbox" 复选框,多选框<select name="province"> name在select标签中添加<option value="101">北京</option>  默认提交的是 选中的option的值多行文本       <textarea rows="5" cols="30" name="address">aaaaaaa值</textarea>type="submit" 提交按钮,触发表单提交type="reset" 重置表单到默认状态type="button" 普通按钮,用来触发事件--><form action="" method="">用户名:<input type="text" name="userName"/><br/>密码:  <input type="password" name="userPassword"/><br/>性别:  <input type="radio"  name="gender" value="男" checked="checked"/>男<input type="radio"  name="gender" value="女"/>女<br/>课程:   <input type="checkbox" name="course" value="java" />java        <input type="checkbox" name="course" value="c" checked="checked"/>c   <input type="checkbox" name="course" value="html" />html <input type="checkbox" name="course" value="css" />css   <br/>省份 <select name="province"><option value="101">北京</option><option value="102">上海</option><option value="103" selected="selected">陕西</option><option value="104">四川</option></select> <br/>地址:<textarea rows="5" cols="30" name="address"></textarea><br/><input type="submit" />提交按钮<input type="reset" />重置<input type="button" value="普通按钮" onclick="alert()"/></form></body>
</html>

注：checked="checked" 给选项中添加该属性代表默认选中

执行结果：

HTML中的表格和表单（含有示例代码）相关推荐

HTML中的表格和表单控件详解
文章目录前言表格和表单控件的作用? 一.表格控件的语法 1.tr标签和td标签 2.表格的属性二.表单控件的用法 1.创建表单 2.表单的常用属性 3.表单常用控件(input控件) 4.文本域 ...
HTML中的表格和表单
目录 1.表格 1.1创建表格 1.2 表格属性 1.3 表头单元格和表格标题 2.表单 2.1 input控件 2.2 label标签 2.3 textarea控件(文本域) 2.4 下拉菜单 2. ...
html中的表格和表单设计总结
表格 table标签包含thead tbody tfoot tr td . <body ><table border="" width="" ...
html5中的表格和表单总结
一.table 1.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等. 2.单独创建table标签会发现网页不会显示任何内容,原因是table标签代表一个表格整体,只有往里面填充元素才会 ...
element-ui中的表格与表单混用方法及表单校验
效果图只是简单写一个样式和使用方法,剩下的可以按照自己所学的知识进行扩展! <template><div><el-container><el-header& ...
vue可视化拖拽生成工具_vue实现可视化可拖放的自定义表单的示例代码
实现如例子所示的可视化可拖放表单功能.整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为key,拖放到中间区域时,往vuex存放数组数据,拖一个就push一个.点击某个组件时,在右栏显示其属 ...
html中的列表、表格、表单
目录一.列表(有序列表和无序列表) 1.无序列表 2.有序列表 3.列表的嵌套二.表格 1.表格所需的主要标签 2.详细介绍表格的制作 3.单元格的合并(跨行和跨列) 三.表单 1.表单标签 ...
vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现页面展示 <el-col :span="12"><el ...
easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目录第3章 HTML表格与表单................................... ...
WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...

HTML中的表格和表单（含有示例代码）

简历代码示例：

执行结果：

表单

form标签：表单

代码示例：

注：checked="checked" 给选项中添加该属性代表默认选中

执行结果：

HTML中的表格和表单（含有示例代码）相关推荐

最新文章

热门文章