CSS表格和表单设置

表格：

再HTML中使用table标签来创建一个表格；在table标签中使用tr标签来表示表格中的一行；在tr标签中使用td来常见一个单元格。可以用th标签来表示表头（自动加粗和居中）；th的用法和td一样；table是一个块元素。

表格的列数有td最多的那行决定。

td标签中可以使用colspan来合并横向的单元格。合并两个单元格如下：

<td colspan="2">D3</td>

使用rowspan来合并纵向的单元格；合并两个纵向的单元格如下：

<td rowspan="2">B3</td>

表格边框设置：

table和td边框之间有默认距离；通过border-spacing可以设置这个距离。例如：

border-spacing: 5px;

border-collapse可以用来设置表格的边框合并；但注意，如果设置了边框合并，则border-spacing自动失效。

border-collapse: collapse;

常见表格设置：

设置各行变色（给偶数行设置颜色）

tr:nth-child(even){/*IE8及以下不支持*/background-color:#bfa;
}

设置鼠标移入到tr后改变颜色

tr:hover{background-color:#ff0;
}

长表格：
当表格非常长时可以将表格分成三个部分，HTML中为我们提供了三个标签：

thead：表头
tbody：表格主体
tfoot：表格底部

这三个标签的作用，就是用来区分表格的不同部分；他们都是table的子标签；都需要总结写到table中，tr需要卸载这些标签当中。

如果表格中没有写tbody，浏览器会自动在表格中添加tbody；并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素，通过table > tr 无法选中行；需要通过tbody > tr。

利用表格同时解决高度塌陷问题和父元素与子元素操作外边距重叠问题：

.clearfix:before,
.clearfix:after{content:"";display:table;clear:both;
}

表单：

表单的作用就是用来将用户信息提交给服务器的；比如：百度的搜索框，登录时填写的用户和密码。使用form标签创建一个表单。

form标签中必须制定一个action属性，该属性指向的是一个服务器的地址；当我们提交表单时将会提交到action属性对应的地址。

使用form创建的仅仅是一个空白的表单；我们还需要向form中添加不同的表单项。

使用input来创建一个文本框，它的type属性是text。如果希望数据会提交到服务器中，还需要个表单指定一个name属性；name表示提交内容的名字。在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示。
用户填写的信息会附在URL地址的后面以查询字符串的形式发生给服务器。形式：URL地址？查询字符串。
例如：

代码如下：

用户名<input type="text" name="username"/>

“提交”按钮可以将表单中的信息提交给服务器，使用input创建一个按钮，它的属性值是submit。在提交按钮中可以通过value属性值来指定按钮上的文字。
代码如下：

<input type="submit" value="注册"/>

密码框可以使用input创建，它的type属性值是password。这样可以使得输入的密码不可见。
代码如下：

密码<input type="password" name="password"/>

单选按钮，使用input来创建一个单选按钮，它的type属性使用radio；单选按钮通过name伤心难过进行分组，name属性相同时一组按钮。还必须制定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器。
代码如下：

性别<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female"/>女

多选框，使用input创建，同一POE属性值是checkbox。
设置默认选项，可以在希望选项中添加checked="checked"属性.
代码如下：

爱好<input type="checkbox" name="hobby" value="zq"/>足球<input type="checkbox" name="hobby" value="lq"/>篮球<input type="checkbox" name="hobby" value="ymq"/>羽毛球<input type="checkbox" name="hobby" value="ppq"/>乒乓球

下拉列表，使用select来创建；name属性制定给select，而value属性指定给option。
设置默认选项，可以通过在option中添加selected="selected"来将选项设置为默认选中。
当为select添加一个multiple=“multiple”,则下拉列表变为一个多选下拉列表。
在select中使用optgroup对选项进行分组；同一个optgroup中的选项是一组。
代码如下：

你喜欢的明星
<select name="star"><option value="fab">范冰冰</option><option value="fab">林心如</option><option value="fab">刘亦菲</option>
</select>

使用textarea创建一个文本域。
代码如下：

自我介绍 <textarea name="info"></textarea>

重置按钮，点击重置按钮后表单中的内容会恢复为默认方式。
代码如下：

<input type="reset"/>

在表单中可以使用fieldset来为表单进行分组。可以将表单项中的同一组放到一个fieldset中。在fieldset中可以使用legend子标签来指定组名。

除了可以使用input，也可以使用button标签来创建按钮。方式与input类似。

上面的代码片段组合起来可以得到类似如下效果：

hack

有些特殊的代码我们只希望在某些浏览器中执行，在其他浏览器中不执行，这是可以使用hack来解决问题。
例如：下面代码中的p标签只有在IE6浏览器中才会执行，在其他浏览器中将识别为注释。

<!--[if IE 6]><p>IE6浏览器</p>
<![endif]-->

在if和IE之间还可以写lte（小于等于）等符号；表示特定范围的浏览器。

hack还可以用于兼容多种浏览器，或者是不同浏览器使用不同的样式。可以用hack进行控制，在不同的浏览器中执行不同的代码。

CSS表格和表单设置相关推荐

CSS——表格与表单的简介
文章目录前言一.什么是表格? 二.什么是表单 1.表单中的常用项与介绍 2.补充点总结前言本文主要介绍了html中表格与表单的相关知识点一.什么是表格? 表格的应用在日常生活中十分的常见, ...
CSS — 表格和表单
目录一.表格 1.表格介绍 2.长表格 3.表格的样式二.表单一.表格 1.表格介绍在现实生活中,我们经常使用表格来表示一些格式化的数据,如课程表,人名单等等. 同样,在网页中也需要使用表格, ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
【重识 HTML + CSS】列表、表格、表单
HTML 元素列表有序列表 ol.li 无序列表 ul.li 定义列表 dl.dt.dd 列表相关的 CSS 属性 list-style 练习表格 table 的常用属性 tr 的常用属性 th ...
HTML 表格、表单和CSS初识
表格.表单和CSS初识一.提问 html骨架结构是什么常用标签有哪些图像标签有哪些属性,绝对路径和相对路径的区别链接标签有哪些属性,说出各个属性的作用列表标签分几种,分别是什么二.本章任务 ...
表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
html 表格与表单的设置,3HTML 表格与表单的设置.ppt
3HTML 表格与表单的设置.ppt (11页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 15.9 积分表格的设置表单及表单中常用的标记使用表格可以划 ...

CSS表格和表单设置

表格：

表单：

hack

CSS表格和表单设置相关推荐

最新文章

热门文章