9.表格&表单&样式重置&特性

最新推荐文章于 2025-04-25 17:00:58 发布

无足舞者

最新推荐文章于 2025-04-25 17:00:58 发布

阅读量430

点赞数

CC 4.0 BY-SA版权

分类专栏：前端工程师【基础篇】文章标签：表格表单样式重置兼容 reset

本文链接：https://blog.youkuaiyun.com/u010567918/article/details/79256969

前端工程师【基础篇】专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了HTML表格和表单元素的默认样式及如何进行样式重置，包括table、input、select等元素的常见样式问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格

结构

完整结构

代码

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

</html>

效果

常用结构

代码

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

<table>

<tbody> 

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

详解

详解1

代码

<!DOCTYPE html>

<html>

<head>

<style>

table{border:1px solid black;} /* 给table加边框 */

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

小结

1. 可以看到给table加边框，只有table最外边一圈显示边框。

详解2

代码

<!DOCTYPE html>

<html>

<head>

<style>

table{border:1px solid black;}

th,td{border:1px solid black;} /* 为th,td加边框 */

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

小结

1. 边框是有了，但很丑，原因是单元格之间默认有间隙。（需要重置）

详解3

代码

<!DOCTYPE html>

<html>

<head>

<style>

/* 为每一个th,td添加了边框后，实际上就不需要给table再添加了 */

/* table{border:1px solid black;} */

th,td{border:1px solid black;} /* 为th,td加边框 */

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

1. 跟“详解2”相同。

表格默认样式重置

th、td默认有一周的1px的内边距

1. 重置“td,th{padding:0;}” 。

单元格间隙

1. 从上面“详解2”中可以看到单元格之间是有默认间隙的。

2. table有默认的“border-collapse:separate;”样式属性

a) “border-collapse:separate;”表示隔开/有间隙，是table的默认值。

3. 重置

a) 在开发中我们很少使用table的“border-collapse:separate;”默认样式属性值，需要重置它。

b) 重置： “table{border-collapse:collapse;}” 。

i. 这样不仅去掉了单元格之间的间隙，而且还合并了单元格的边框。

c) 上面“详解2”中添加一句“table{border-collapse:collapse;}”样式属性，再执行：

i. 效果

d) 小结

i. 到目前表格样式重置代码如下：

th,td{padding:0;}

table{border-collapse:collapse;}

特性/注意

1. table标签的基本特性是“display:table” 。

2. 不要给table、th、td以外的表格标签加样式

a) 如不要给tbody、tr加样式，因为很可能会出现兼容性问题。

3. 单元格默认平分table的宽度。

4. 不指定宽高时默认内容撑开。

5. th里面的内容默认加粗并且左右上下居中显示。

6. td里面的内容默认上下居中左右居左显示。

7. table决定了整个表格的宽度

a) 意思你给这个表格设置了宽度，它就是多宽，不可能会超

b) 你哪怕设置每一个单元格的宽度累加起来超过table设置的宽，整个table的宽度还是不会变，并不会被撑宽，这时每一个单元格的宽度与它在浏览器的实际显示宽度会不同，它会迁就于table设置的宽度而实际显示受到限制。

8. 当table设置了宽度后，table里面的单元格宽度像素值会被转换成百分比

a) 前提是为table设置了宽度后

9. 表格里面的每一列必须设置宽度

a) 如果有一列不设置宽度的话，此列中某个单元格的内容一增加就会导致这一列宽度改变，可能就会导致整个表格乱掉。

10. 表格同一竖列继承最大宽度。

11. 表格同行继承最大高度。

练习

代码

<!DOCTYPE html>

<html>

<head>

<style>

/* 表格样式重置 */

th,td{padding:0;} /* 去掉单元格一周的1px内边距 */

table{border-collapse:collapse;}/* 去掉单元格之间的空隙并合并单元格的边框 */

table{width:500px;} /* 给table设置宽度 */

对于"width:100px"其实你给多少像素值都一样(如:"width:10000px"),

因为当table设置了宽度，里面的单元格的宽度像素值都会转换成百分比计算 ,

这里我们将所有单元格都设置了一样的宽度，其实转换成百分比后就是1:1:1...,

虽然是这样，但还是必要的，因为如果有一个单元格没有设置宽度，当此单元格

内容增加，会导致这个单元格所在的一列宽度被撑开，又由于table设置了固定宽度，

这样就会导致其它列宽度减少来维持总宽度不变，结果导致整个表格变形了。

但是不需要像这样为每一个单元格都设置宽度，一般开发中只需要给第一行“th”

直接嵌入宽度即可（如：<th width=”150”>标题</th>），每一个th宽即可作用一列宽，

但遇到合并单元格时，一般又需要指定宽了。

th,td{border:1px solid black;height:50px;width:100px;}

</style>

</head>

<body>

<table>

<tr>

<th>我是一个长长的标题，你屌我啊！！！</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

合并单元格

colspan（跨列）与rowspan（跨行）

范例

代码

<!DOCTYPE html>

<html>

<head>

<style>

th,td{border:1px solid black;padding:0;}

table{border-collapse:collapse;}

</style>

</head>

<body>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

<!--

colspan="2" rowspan="3"表示此单元格不仅

跨两列，还跨3行

-->

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

注意

1. 合并单元格时，要把被合并的单元格去掉。

实战

题目

1. 将下图用表格标签做出来

答

代码

<!DOCTYPE html>

<html>

<head>

<style>

/* css reset start*/

th,td{padding:0;}

table{border-collapse:collapse;}

/* css reset end*/

.tab{width:640px;margin:90px auto;}

.tab th,.tab td{border:1px solid #99b0da;}

.tab th{height:30px;background:#dbe3fa;font-size:14px;}

.tab td{height:28px;font-size:12px;text-align:center;}

/* 处理图片底部间隙问题 , 这里img没有被a嵌套所以不需要加border:none; */

img{vertical-align:top;}

</style>

</head>

<body>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

效果

图片素材

1. sun.jpg

总结

1. 将代码复制到一个空的html文件中，再将“图片素材”中的sun.jpg图片另存到此html文件的同级目录下（命名为sun.jpg），最后用浏览器打开此html文件即可看到效果。

表单

表单元素

form

1. form元素代表整个表单

2. <form action=”http://www.biaodian.com/login.action” method=”get” target=”_blank”></form>

a) action ：提交到后端的路径

b) method ：提交方式

i. get表示在浏览器地址栏中明文提交

ii. post提交数据不会显示在地址栏中，相对get提交数据更安全

1. 反正小潘潘在平时工作中对于form表单提交，几乎全是用的post方式。

c) target ：属性规定在何处打开 action URL

i. _blank 表示在新窗口提交

ii. _self表示在当前页面提交

iii. _parent在父框架集中打开

iv. _top在整个窗口中打开

v. framename在指定的框架中打开

input

submit

1. 表单提交

2. <input type=”submit” value=”提交OK”/>

a) 注意这里的value属性一般开发中都会指定，因为不指定时各个浏览器显示内容不统一，如下：

i. IE浏览器默认

ii. 谷歌浏览器默认

text

1. 文本框

2. <input type=”text” name=””/>

a) name属性对于前端没有什么用，但对于后端是很重要的

b) 建议前端加上这个属性，并给一个空字符串值

password

1. 密码框

2. <input type=”password” name=””/>

radio

1. 单选按钮

2. <input type=”radio” name=”” checked/>

a) checked表示被选中

b) name属性不光是给后端使用的了，这里前端要想达到多个选项单选的效果，必须将多个选项的name属性值指定一样。范例：

i. 代码

性别：<input type="radio" name="gender" checked />男

<input type="radio" name="gender"/>女

3. label

a) label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

b) 两种用法

i. 第一种：直接包起 [ IE6以下浏览器不支持 ]

<label>

<input type="radio" name="gender"/>男

</label>

<label>

<input type="radio" name="gender"/>女

</label>

ii. 第二种：捆绑 [ 兼容IE6以下浏览器 ][推荐]

<input type="radio" name="gender" id="a"/><label for="a">男</label>

<input type="radio" name="gender" id="b"/><label for="b">女</label>

1. <label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

checkbox

1. 复选框

2. <input type=”checkbox” name=”box” checked/>

a) checked表示被选中

3. 范例

<input type="checkbox" name="box"/>游泳

<input type="checkbox" name="box"/>唱歌

a) disabled与checked不仅复选框可以使用，而且单选按钮也是可用使用的

file

1. 上传

2. <input type=”file” name=””/>

3. 兼容性很差，在各个浏览器下显示都不一样，而且这个东西你还没办法做兼容，咱们在网上看到的上传通常是用flash插件控制的，很少会用这个原生的上传。

image

1. 图片提交

2. 与submit区别

a) type=”image”和type=”submit”都可以提交表单。不过唯一的区别就是type=”image”的input提交方式会把按钮点击的位置坐标x,y提交过去。

3. 开发中一般不推荐使用。

a) 因为实际开发中根本就用不到那些多余的坐标

b) 多余的参数还可能造成不必要的麻烦

button

1. 按钮

2. <input type=”button”/>

3. 本身没有任何功能，也没有默认的文字，也没有像submit那样的提交功能

4. 现在随着ajax的流行，此元素用的越来越多了

reset

1. 重置

2. <input type=”reset”/>

3. 重置看起来很有用，早年也有很多网站使用，但其实小潘潘觉得它就是一个奇葩

hidden

1. 隐藏

2. <input type=”hidden” name=””/>

3. 对于前端没有任何作用，也不会有任何显示上的效果，但对于后端却很有用处，后端经常用它来储存值，用于值的传递等。

select

1. 下拉选框

2. 范例

a) 代码

</select>

b) 说明

i. select与option（选项）是有结构关系的，并且相互依赖的

ii. 默认选中第一项，selected设置默认选中项

textarea

1. 文本域

2. <textarea></textarea>

样式重置

form

1. 在IE6下form是有外边距的

2. 重置： form{margin:0;}

3. 范例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

form{border:1px solid red;}

</style>

</head>

<body>

<form>

form1

</form>

<form>

form2

</form>

</body>

</html>

b) 效果

i. 标准浏览器

ii. IE6

c) 小结

i. form元素在标准浏览器下是没有外边距margin的，但在万恶的IE6下是有默认的外边距的，所以需要重置外边距。

input

1. input元素有外边距margin、边框border、内边距padding默认样式

a) 注意：默认样式跟浏览器有关系，可能新版本的浏览器就没有了。

2. 单选按钮（radio）和复选框（checkbox）一般我们不会设置它们的宽高的，其实设置了宽高后，各个浏览器显示上也有差异，所以通常使用默认即可。

3. input元素在标准浏览器下会有焦点轮廓线，其实，这是浏览器自带的美化体验，但假使我们就是不想要的话，那么可以将其使用“outline:none”重置掉。（不建议去掉）

4. 重置： input{margin:0;padding:0;outline:none;}

a) 注意：input边框一般开发中我们都需要控制，所以这里通常不需要重置，我们只需要知道它默认有2px的边框即可。

select

1. select元素默认有2px的外边距margin

a) 注意：默认样式跟浏览器有关系，可能新版本的浏览器就没有了。

2. select支持宽高，但高支持的不完善（IE6下根本不支持）

a) 所以对于select我们最多只给它添加一个宽，而高度不去设置。

b) 我们在网上看到的美化的非常漂亮的下拉列表框基本都是模拟出来的。

3. 重置： select{margin:0;}

textarea

1. textarea有2px的外边距margin和2px的内边距padding。

a) 注意：默认样式跟浏览器有关系，可能新版本的浏览器就没有了。

2. textarea默认页面显示大小是可以拖拽的，这样肯定是不可以的，用户拖拽改变大小会导致页面布局乱了，可以用CSS3中的样式属性“resize:none”来重置。

3. textarea元素在IE下会有默认的滚动条，需要用“overflow:auto”样式属性来重置。

4. textarea元素在标准浏览器下会有焦点轮廓线，其实，这是浏览器自带的美化体验（同input元素一样），但假使我们就是不想要的话，那么也可以将其使用“outline:none”重置掉。（建议留着）

5. 重置：textarea{margin:0;padding:0;resize:none;overflow:auto;outline:none;}

总结

1. 我们整理出一个整个表单样式重置的样式代码，如下：

form,select{margin:0;}

input,textarea{margin:0;padding:0;outline:none;}

textarea{resize:none;overflow:auto;}

2. 结合之前的样式重置，到这里我们样式重置家族就已经基本完整了（可通用）

body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,form,select,input,textarea{margin:0;font-size:12px;font-family:微软雅黑,arial;}

ol,ul,th,td,input,textarea{padding:0;}

ol,ul{list-style:none;}

a{text-decoration:none;}

img{border:none;}

input,textarea{outline:none;}

textarea{resize:none;overflow:auto;}

table{border-collapse:collapse;}

兼容性问题

问题的产生

1. 代码

<!DOCTYPE html>

<html>

<head>

<style>

input{margin:0;padding:0;}

.text{width:300px;height:40px;border:1px solid blue;

background:url(sun.jpg) no-repeat 0 center #ffc;}

</style>

</head>

<body>

</body>

</html>

2. 效果

a) 标准浏览器

b) IE6

解决问题

1. 代码

<!DOCTYPE html>

<html>

<head>

<style>

input{margin:0;padding:0;}

.box{width:300px;height:40px;border:1px solid blue;

background:url(sun.jpg) no-repeat 0 center #ffc;}

/* background:none与border:none可以去掉文本框默认的白色背景和边框 */

.box input{width:300px;height:40px;border:none;background:none;}

</style>

</head>

<body>

<div class="box">

</div>

</body>

</html>

2. 效果

a) 标准浏览器

b) IE6