表单表格高级

2018-12-02

表单相关的标签

表单元素 1)单选按钮

1	<input type="radio" name="mal" />

2)复选框

1	<input type="checkbox" disabled checked />

3)下拉菜单

1
2
3

<select>
  <option></option>
</select>

4)多行文本输入框

1	<textarea cols="" rows=""></textarea>

5)上传文件框

1	<input type="file" />

6)图像域（图片按钮）

1	<input type="image" width="100" height="100" alt="" src="路径" />

表单字段集
<fieldset></fieldset>
功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组，并在文档中区别标出文本。fieldset 元素可以嵌套，在其内部可以在设置多个 fieldset 对象。
字段级标题
<legend></legend>
功能：legend 元素可以在 fieldset 对象绘制的方框内插入一个标题。legend 元素必须是 fieldset 内的第一个元素。
提示信息标签
<label for="绑定控件id名"></label>
功能：label 元素用来定义标签，为页面上的其他元素指定提示信息。要将 label 元素绑定到其他的控件上，可以将 label 元素的 for 属性设置为与该控件的 id 属性值相同。

关于表格的 CSS 属性

单元格间距(该属性必须给 table 添加)
border-spacing:value;
合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并)；（写 1 像素边框表格）
无内容单元格显示、隐藏
empty-cells:show/hide;
表格布局算法
table-layout:auto/fixed(固定宽度，不会随内容多少改变单元格宽度）
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。
优点：灵活
固定表格布局
优点：加快运行的速度,允许浏览器更快的对表格进行布局。
缺点:不太灵活
表格标题
<caption>标题内容</caption>
表格标题位置：caption-side:top/right/bottom/left
说明：left,right 位置只有火狐识别，top,bottom IE7 上版本支持，ie7 以下版本不支持其它属性值，只识别 top

表格布局元素

表格基本组成
table（表格） tr（行） td（列）
th:表格列标题（放在 tr 里）
重要属性： 1)colspan="value" 合并列
2)rowspan="value" 和并行 3)valign="top/bottom/middle" 垂直对齐方式
align=left/center/right 水平对齐方式 4)rules="groups/rows/cols/all/none" 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
数据行分组
<thead></thead> 表头
<tbody></tbody> 表体
<tfoot></tfoot> 表尾
说明:一个 Table 中，只能包含一个 thead,一个 tfoot,但可包含多个 tbody。不会影响到表格的布局。
数据列分组

1 2	<colgroup span="value"></colgroup> <col span="value" />

说明：
1）col 和 colgroup 元素会根据从左到右的顺序依次对数据表格进行分组。
2）span 属性显示指定相邻几列组成一组，span 属性值默认为 1，默认时仅定义一列为一组。
3）可以通过给 table 添加rules="groups"属性来给分组列添加组分割线。
注意：虽然 col 和 colgroup 具有相同的功能，但是，我们只能使用 colgroup 元素来决定表格内容部分分割线（rules）应该处于的位置，而 col 没有这个功能。

本文作者：人模人样的搬砖老段
本文链接：表单表格高级
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/05/19