html 中的表格
table–表格
tr-----表格中的行
td-----一行中的列 常用的属性
1.border–设置表格边框[数字 px]
2.width–设置表格宽度[数字 px]
3.height–设置表格高度[数字 px]
4.cellspacing–设置表格单元格之间的间距[数字 px]
5.cellpadding–设置表格单元格与单元格中内容之间的距离[数字 px]
6.align–如果出现在 table 中设置表格的水平对齐方式 如果出现在 tr 中设置表格当前行的水平对齐方式 如果出现在 td 中设置表格当前行的水平对齐方式
7.valign–如果出现在 tr 中设置表格当前行的垂直对齐方式 如果出现在 td 中设置表格当前行的垂直对齐方式
8.bgcolor–如果出现在 table 中设置表格的背景颜色
9.background–如果出现在 table 中设置表格的背景图片
关于表格的跨行和跨列
跨列【左右合并单元格】—给 td 上设置 colspan 属性，需要跨几个列那么就写数字几。
跨行【上下合并单元格】—给 td 上设置 rowspan 属性，需要跨几个行那么就写数字几。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>合并表格</title>
</head>
<body>
<table width="600px" height="500px" cellspacing="0" align="center" border="1" cellpadding="20px">
<tr>
<td>名字</td>
<td>2</td>
<td>性别</td>
<td>4</td>
<td>出生</td>
<td>6</td>
<td>面貌</td>
<td></td>
<td rowspan="4" colspan="2"><img src="avatar5.png" /></td>
</tr>
<tr>
<td>院校</td>
<td></td>
<td>毕业</td>
<td></td>
<td>学历</td>
<td></td>
<td>学位</td>
<td></td>
</tr>
<tr>
<td>技术</td>
<td colspan="3"></td>
<td>资格</td>
<td colspan="3"></td>
</tr>
<tr>
<td>身份</td>
<td colspan="3"></td>
<td>专业</td>
<td colspan="3"></td>
</tr>
<tr>
<td>家庭</td>
<td colspan="3"></td>
<td>编码</td>
<td></td>
<td>电话</td>
<td colspan="3"></td>
</tr>
<tr>
<td>户籍</td>
<td colspan="2"></td>
<td>籍贯</td>
<td colspan="2"></td>
<td>身体</td>
<td colspan="3"></td>
</tr>
<tr>
<td>单位</td>
<td colspan="2"></td>
<td>性质</td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="5">经历</td>
<td colspan="2">起止日期</td>
<td colspan="7">证书</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="5">工作经历</td>
<td colspan="2">起始日期</td>
<td colspan="7">职务</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>15
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="7"></td>
</tr>
<tr>
<td>获奖</td>
<td colspan="9"></td>
</tr>
<tr>
<td>岗位</td>
<td colspan="9"></td>
</tr>
</table>
</body>
</html>
html 中的表单
1.表单采集/收集用输入的信息，提交给后端处理程序处理【登陆/注册】
2.form–表示一个表单 常用属性
action 属性—设置后端处理程序的访问地址
method 属性–设置表单的提交方式【get[默认]/post】
get 方式—将采集的信息数据跟随在后端处理程序的访问地址之后。 有数据量限制 255 个字符
post 方式–将采集的信息数据封装到网络协议中发送给后端处理程序。 没有数据量限制
enctype 属性–规定在将表单数据发送到后台处理程序之前如何对其进行编码.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="1px" width="700px" height="500px" cellspacing="0" align="center">
<tr align="center">
<td>名字</td>
<td>表现形式</td>
<td>注意事项</td>
</tr>
<tr align="center">
<td >文本框</td>
<td> <input type="text" name="wenbeikuang" value="默认值"/> </td>
<td></td>
</tr align="center">
<tr align="center">
<td>密码框</td>
<td> <input type="password" name="password" value="mima"/> </td>
<td></td>
</tr>
<tr align="center">
<td rowspan="2">单选按钮</td>
<td rowspan="2">
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman" checked="checked" />女
</td>
<td rowspan="2"> 有多个单选按钮时，为保证每次只能选一个，要求name属性值要相同。男，给用户看的，value表提交到后台的数据值。</td>
</tr>
<tr >
</tr>
<tr align="center">
<td rowspan="2">复选框</td>
<td rowspan="2">
<input type="checkbox" name="checkbox"value="one" />复选框1
<input type="checkbox" name="checkbox"value="two" />复选框2
<input type="checkbox" name="checkbox"value="three" checked="checked"/>复选框3
</td>
<td rowspan="2">有多个复选框时，要求name属性值要相同，“复选1”给用户看，value值提交到后台的数据值，</td>
</tr>
<tr >
</tr>
<tr align="center">
<td>日期框</td>
<td><input type="date" name="riolikaung" /> </td>
<td></td>
</tr>
<tr align="center">
<td>文件选择框</td>
<td><input type="file" name="filekaung" /> </td>
<td></td>
</tr>
<tr align="center">
<td>隐藏域</td>
<td><input type="hidden" name="hidden" /> </td>
<td></td>
</tr>
<tr align="center">
<td>颜色框</td >
<td> <input type="color" name="yansekuang"/> </td>
<td></td>
</tr>
<tr align="center">
<td>邮箱</td>
<td><input type="email" name="emailkaung" /> </td>
<td>提交是会被进行校验</td>
</tr>
<tr align="center">
<td>电话</td>
<td> <input type="tel" name="tel" /> </td>
<td></td>
</tr>
<tr align="center">
<td>网页</td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>普通按钮</td>
<td><input type="button" name="button" value="普通按钮" /> </td>
<td>value表示的是按钮上显示的文本</td>
</tr>
<tr align="center">
<td>表单提交按钮</td>
<td> <input type="button" name="button" value="提交表单按钮" /> </td>
<td>value表示的是按钮上显示的文本</td>
</tr>
<tr align="center">
<td>表单重置按钮</td>
<td> <input type="button" name="button" value="表单重置按钮" /> </td>
<td>value表示的是按钮上显示的文本</td>
</tr >
<tr align="center">
<td rowspan="2"> 下拉列表</td>
<td rowspan="2"> <select name="xialaliebiao">
<option value="sx">陕西省</option>
<option value="sc">四川省</option>
<option value="gs">甘肃省</option>
<option value="sd">山东省</option>
</select></td>
<td rowspan="2">option-下拉列表中的每一项，value表示递交给后后台处理程序的数据值 </td>
</tr>
<tr>
</tr>
<tr align="center">
<td>文本域</td>
<td><textarea cols="30" rows="10"></textarea></td>
<td>cols-列数设置宽度rows-行列设置高度输入超过大小空间之后自带滚动条</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body>
<form>
<table width="600px" height="500px" align="center" bgcolor="royalblue">
<caption>
<h2>欢迎注册</h2>
</caption>
<tr>
<td>
<h3>用户名:</h3>
</td>
<td> <input type="text" formenctype="multipart/form-data"/> </td>
</tr>
<tr>
<td>
<h3>请设置密码:</h3>
</td>
<td> <input type="password" name="password" value="请输入密码" /> </td>
</tr>
<tr>
<td>
<h3>请确认密码:</h3>
</td>
<td> <input type="password" name="password" value="请再次确认密码" /> </td>
</tr>
<tr>
<td>
<h3>电子邮件:</h3>
</td>
<td> <input type="email" name="email" value="请输入电子邮件"> </td>
</tr>
<tr>
<td>
<h3>验证手机:</h3>
</td>
<td> <input type="text" name="yanzheng" value="请输入手机号码" /> </td>
</tr>
<tr >
<td>
<h3>短信验证码:</h3>
</td>
<td > <input type="text" value="请输入手机6位验证码"/>
<input type="button" name="button" value="获取短信验证码" /> </td>
</tr>
<tr>
<td>
<h3>性别:</h3>
</td>
<td>
<input type="radio" value="man" name="sex" checked="checked" /> <font color="white">男</font>
<input type="radio" value="woman" name="sex" /> <font color="white">女</font>
</td>
</tr>
<tr>
<td>
<h2>联系地址:</h2>
</td>
<td> <input type="text" name="lianxi" value="请输入地址" /> </td>
</tr>
<tr>
<td></td>
<td> <input type="checkbox" checked="checked" /> <font color="white">我已阅读并同意</font>
<a href="#" /> 《宝腾用户注册协议》</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="立即注册" style="background-color: aquamarine;" />
</td>
</tr>
<tr>
<td></td>
<td><font color="white">已有账号</font><a href="http://www.baidu.com" target="_blank" />直接登录</a> </td>
</tr>
</table>
</form>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
