表格表单和统筹相关总结

表单标签及属性高级

表单的作用

用来收集用户的信息

表单的组成

表单域：<form name="" methods="get/post" action=""></form>

表单控件：<input type="text" value="" />

提示信息

（1）表单字段集

语法：<fieldset disabled="disabled"></fieldset>

说明：相当于一个方框，在字段集中可以包含文本和其它元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用。

（2）字段级标题

语法：<legend align="left/center/right"></legend>

说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一元素。

（3）提示信息标签

语法：<label for="绑定控件id名"></label>

说明：label元素用来定义标签，为页面上的其他元素指定提示信息，要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

（4）上传文件框

语法：<input type="file" multiple="multiple" />

说明：type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属性可实现多选

（5）图像域

语法：<input type="image" src="" width="" height="" alt="图片" />

说明：火狐低版本不支持此表单

表格标签及属性高级

表格的作用

显示数据

表格基本结构

<table>
    <tr>
        <td></td>
    </tr>
</table>

表格高级属性

（1）单元格间距：border-spacing: value;

说明：单元格间距（该属性必须给table添加）表示单元格边框之间的距离，不可取负值

（2）合并相邻单元格边框：border-collapse: separate/collapse;

说明：合并相邻单元格边框（该属性给table添加）separate（边框分开）默认值；collapse（边框合并）

（3）无内容是单元格的设置：empty-cells: show/hide;

说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示； hide：隐藏

（4）显示单元格行和列的算法（加快运行的速度）：table-layout: auto/fixed ;

​ 定义表格的布局算法，设置fixed，文本为英文字母且无空格时，内容超出单元格宽度则固定不变，如没设宽则平均分配，设置auto时，则随内容宽度而定，火狐浏览器存在兼容问题。（fixed：固定宽，不会随内容多少改变单元格，宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化）

（5）隔行变色设置

双数行：tr:nth-child(2n){}

单数行：tr:nth-child(2n+1){}

设置单数单元格的样式和双数单元格的样式

（6）表格标题

<caption>标题内容</caption>

caption：表格标题

表格标题位置：caption-side: top/right/bottom/left

说明：left，right位置只有火狐识别，top，bottom IE7以上版本支持，IE7以下版本不支持其他属性，只识别top

（7）数据列分组

语法

<colgroup></colgroup>或<col span="value" />

说明

i、col和group元素会根据从左到右的顺序依次对数据表格进行分组。

ii、span属性显示指定相邻几列组成一组，span属性默认值为1，默认时仅定义一列为一组。

iii、可以通过给table添加rules=“groups”属性来给分组添加组的分割线。

注意：虽然col和colgroup具有相同的功能，一个单标签是一个双标签，两个都存在浏览器兼容问题

（8）数据行分组

语法

<thead>表头</thead>
<tbody>标体</tbody>
<tfoot>表尾</tfoot>

说明

i、一个table中，只能包含一个thead，一个tfoot，但可以包含多个tbody。

ii、thead元素应该与tbody和tfoot元素结合起来使用。

iii、如果要使用thead、tfoot、以及tbody元素，就必须使用全部元素。

iv、它们的出现次序是：thead、tbody、tfoot这样浏览器就可以在收到所有数据前呈现页脚了。必须在table元素内部使用这些标签。

v、在默认情况下这些元素不会影响到表格的布局。不过，可以使用CSS使这些元素改变表格的外观。

vi、thead、tfoot以及tbody元素使我们有能力对表格中的行进行分组。当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

（9）其他重要属性

i、colspan="value"合并列

ii、rowspan="value"合并行

iii、valign="top/bottom/middle/baseline"垂直对齐方式

iv、rules="rows/cols/all/none"添加组分割线 （

​ rows：位于行之间的线条

​ cols：位于列之间的线条

​ all：位于行和列之间的线条

​ none：没有线条

）