本文详细介绍了HTML中的表格和表单元素，包括table、thead、tbody等标签的使用方法及样式设置，以及输入框、单选框、复选框等表单元素的应用技巧。
1、表格标签：
table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元
表格在页面上现在一般主要用于数据展示，另外一个用的比较多的地方就是edm，edm因为岁月久远，所以对新属性支持性并不是很好，所以还是用的table进行布局。edm制作要注意的事情https://segmentfault.com/a/1190000000639933
2、表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
3、注意事项
Ø 不要给table,th,td以外的表格标签加样式；
Ø 单元格默认平分table 的宽度
Ø th里面的内容默认加粗并且左右上下居中显示
Ø td里面的内容默认上下居中左右居左显示
Ø table 决定了整个表格的宽度；
Ø table里面的单元格宽度会被转换成百分比；
Ø 表格里面的每一列必须有宽度；
Ø 表格同一竖列继承最大宽度；
Ø 表格同行继承最大高度；
Ø 空的单元格的边框不会被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符（ ），就可以将边框显示出来。
Ø 表格的样式一般写在行间，写法与属性相同
4、单元格合并:注：合并后要把被合并的单元格删掉
Ø colspan 属性规定单元格可横跨的行数。 <tdcolspan="2"></td>
Ø rowspan 属性规定单元格可纵向跨的列数。<td rowspan="2"></td>
5、表单
表单在页面上非常常见，几乎所有的网站的登录注册页面我们都可以看到。常用标签如下：
<input type="…… " name="" value=""/>
Ø text 文本框。设为只读用disable。<input type="text"name="user_name" value="duoduo" id="user_name"disabled/>。适用于其他表单元素
Ø password 密码
Ø radio 单选
1、name用于分组,同属于一组的单选框才能限制只选一个2、可使用以下方法使得点击文字时单选框也可以被选中。注：lable中for指向id
<input name="gender" id="a"type="radio">
<label for="a">男</label>
该方法适用于所有表单元素。
Ø checkbox 复选。默认选中增加checked。<input type="checkbo"name="a" value="a1" checked/>.也适用于单选框。
Ø submit 提交
Ø reset 重置
Ø button 按钮
Ø image 图片，也有提交的功能
Ø file 上传
Ø hidden 隐藏
Ø select/option 下拉选框:对高度的支持不兼容；
Ø textarea 文本域：各个浏览器下的默认滚动条显示不兼容，解决办法：overflow：auto；css3新增 resize 调整尺寸属性；
6、表单重置
form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}
7、综合实例：网易注册页面（实际操作中并不会采用table布局，这里仅为展示用法）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
table{border-collapse:collapse;}
th,td{padding:0;}
form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}
body{background: #F9F9F9;}
.all{margin: 0px auto;width: 982px;}
.all1{width: 655px;height: 79px;}
.all2{text-align: right;}
.all2 a{color: #039;margin: 0 5px;margin-top: 0px;margin-right: 5px;margin-bottom: 0px;margin-left: 5px;font-family: verdana,sans-serif;font-size: 12px;line-height: 160%;}
.child{width: 960px;margin: 0px 11px;width: 962px;height: 587px;border-bottom:#E0E0E0 1px solid;border-left: #E0E0E0 1px solid;border-right: #E0E0E0 1px solid;background: #FFF;}
.childhead{height: 38px;text-align: left;}
.childhead div{background: #6495C6;border: #5B88B8 1px solid;border-radius: 3px 3px 0px 0px; moz-border-radius: 25px;line-height: 36px;}
.childhead h1{font-size: 14px;font-weight: normal;color: #FFF;text-indent: 20px}
.chioce{width: 643px;height: 116px;text-align: center;}
.childbody1{width: 138px;height: 28px;text-align: right;font-size: 14px;}
.childbody2{width: 506px;text-indent: 10px;}
.childbody3{width: 138px;}
.childbody4{width: 506px;}
.childbody5{}
.childbody6{padding-top: 10px;padding-bottom: 22px;height: 14px;text-indent: 10px;}
.childbody7{}
.childbody8{height: 100px;}
.childbody2 .input1{padding: 4px 5px;border: #ABABAB 1px solid;box-shadow: 2px 2px 3px #EDEDED inset;font-size: 14px;font-weight: bold;border-radius: 3px;width: 200px;}
.childbody2 .input2{padding: 4px 5px;border: #ABABAB 1px solid;box-shadow: 2px 2px 3px #EDEDED inset;font-size: 14px;font-weight: bold;border-radius: 3px;width: 322px;}
.childbody2 .input3{padding: 4px 5px;border: #ABABAB 1px solid;box-shadow: 2px 2px 3px #EDEDED inset;font-size: 14px;font-weight: bold;border-radius: 3px;width: 196px;}
.childbody2 select{padding: 3px;font-size: 14px;font-weight: bold;color: #555;font-size: 14px;}
.childbody6 span{color: #999;line-height: 16px;text-align: left;font-family: verdana,sans-serif;font-size: 12px;}
.txt-14{font-size: 14px;line-height: 160%;font-family: verdana,sans-serif;}
</style>
</head>
<body>
<table class="all">
<tr>
<td class="all1">
<img src="./1-1.png">
</td>
<td class="all2">
<a href="#">了解更多</a>
|
<a href="#">反馈意见</a>
</td>
</tr>
<tr>
<td colspan="2">
<table class="child">
<tr>
<th colspan="3" class="childhead">
<div>
<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
</div>
</th>
</tr>
<tr>
<td colspan="2" class="chioce">
<img src="./1-2.png">
</td>
<td rowspan="11">
<img src="./1-4.png">
</td>
</tr>
<tr>
<td class="childbody1"><font style="color:red">*</font>邮件地址</td>
<td class="childbody2">
<div>
<input type="text" class="input1"></input>
<strong class="txt-14">@</strong>
<select name="mainDomain" id="mainDomainSelect" tabindex="-1">
<option selected="selected" value="163.com">163.com</option>
<option value="126.com">126.com</option>
<option value="yeah.net">yeah.net</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="childbody5"></td>
<td class="childbody6">
<span>6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
</td>
</tr>
<tr>
<td class="childbody1"><font style="color:red">*</font>密码</td>
<td class="childbody2">
<input type="text" class="input2"></input>
</td>
</tr>
<tr>
<td class="childbody5"></td>
<td class="childbody6">
<span>6~16个字符，区分大小写</span>
</td>
</tr>
<tr>
<td class="childbody1"><font style="color:red">*</font>确认密码</td>
<td class="childbody2">
<input type="text" class="input2"></input>
</td>
</tr>
<tr>
<td class="childbody5"></td>
<td class="childbody6">
<span>请再次填写密码</span>
</td>
</tr>
<tr>
<td class="childbody1"><font style="color:red">*</font>验证码</td>
<td class="childbody2">
<input type="text" class="input3"></input>
</td>
</tr>
<tr>
<td class="childbody5"></td>
<td class="childbody6">
<span>请填写图片中的字符，不区分大小写</span>
</td>
</tr>
<tr>
<td class="childbody3"></td>
<td class="childbody4">
<input type="checkbox"> 同意
<a href="http://reg.163.com/agreement.shtml" target="_blank" tabindex="-1">"服务条款"</a>
和
<a href="http://reg.163.com/agreement_game.shtml" target="_blank" tabindex="-1">"隐私权相关政策"</a>
</td>
</tr>
<tr>
<td class="childbody7"></td>
<td class="childbody8">
<a><img src="./1-3.png"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
