html-表格和表单（详细讲解）

下面将介绍如何玩转各种表格和表单：

 

表格的作用：展示数据（尽量不做页面布局）

表格的属性：width、height、border、bordercolor

cellspacing=“ ” 清除单元格边框的间距

cellpadding="" 内容距离边框之间的边距

align="" 水平对齐方式

valign="" 垂直对齐方式 top bottom middle

合并单元格： 合并行：rowspan 合并列: colspan

注：合并都是合并 td

 

表格重点属性：　　

　　1、数据行分组　　

　　<thead></thead>  表格标题部分
　　<tbody></tbody>  表格内容部分
　　<tfoot></tfoot>　  表格尾部部分

　　2、数据列分组　　　

　　<colgroup span="value"></colgroup>
　　<!--span属性为把几列分为一组-->

　　3、标题

　　<th></th>列标题

　　<caption></caption>表格标题

　　4、表格属性　　

　　　　4.1、单元格间距：border-spacing:value(px);

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

　　　　4.2、合并相邻单元格边框：border-collapse:separate/collapse;

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

　　　　4.3、无内容时单元格的设置：empty-cells:show/hide;

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

　　　　4.4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

　　　　说明：定义单元格行和列是否有内容决定，auto:自动；fixed：平均分配并固定

　　5、组分割线

　　rules="groups/rows/cols/all/none" 添加分隔线
　　说明：
　　rows:位于行之间的线条
　　cols:位于列之间的线条
　　all：位于行和列之间的线条
　　none:没有线条
　　groups:位于行组和列组之间的线条

 

表单的作用：收集数据

input:type(

　　text　　输入框

　　submit　表单添加按钮

　　password　　密码输入框

　　reset　　重置按钮

　　button　　空按钮

　　) ​

　　type不同，input的value意义不一样

1、单选按钮组

　　<input type=“radio” name=“ral” />男

　　<input type=“radio” name=“ral” checked=“checked”/>(默认选中)女

　　注：name必须一致

2、复选框组　

　　<input type="checkbox" name="" />
　　<input type="checkbox" name="" disabled="disabled" />
　　 disabled="disabled" (禁用)
　　 checked="checked"  (默认选中)

3、下拉列表组　　

　　<select >
　　　　<option>下拉选项1</option>
　　　　<option>下拉选项2</option>
　　　　…………
　　</select>
　　表示下拉列表，name属性不是必须的
　　默认选择项用selected属性；

4、表单域多行文本框

　　语法: <textarea name="" cols="列字符的宽度" rows="行字符宽度" ></textarea>
　　多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
　　阻止浏览器对窗口的拖动设置:{resize:none;}（css属性，在css中设置）

5、上传文件

　　语法：<input type="file">，选择本地文件，需要与后排配合使用

表单标签：

1、表单字段集

语法：<fieldset></fieldset>

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。

fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

2、字段级标题

语法：<legend align="left/center/right/justify"></legend>
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。

legend元素必须是fieldset内的唯一个元素。

3、提示信息标签

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

说明：label元素用来定义标签，为页面上的其他元素指定提示信息。

要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

可以实现点击提示信息使输入框聚焦

 

新增表单属性 required 监测是否为空。 min 最小 max 最大 step 步幅 确定一个法定值。

-3 0 3 6 9 list 必须结合datalist标签，绑定datalist id名称。

autocomplete 是否自动提示信息 属性值 on off

placeholder 文本框的提示信息 autofocus 自动聚焦。一个页面只能由一个。

pattern 后面的属性值是一个正则表达式。

novalidate 取消验证 multiple 选择（上传）多个

 

新增表单标签

datalist 必须和list属性结合使用。做提示

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

如果感觉对自己有帮助，麻烦点一下关注，会一直盒大家分享知识的，谢谢！！！