一 、表格的作用及基本语法
1、表格的作用及基本语法
数据表格的作用及组成
作用:显示数据
表格组成
<table width="value" height="alue" border="value">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
注
个tr表示一行;一个td表示一列(一个单元格)
行分组
<thead> </thead>
<tbody></tbody>
<tfoot> </tfoot>
表头
表体必需存在的标签
表尾
说明: 一个Table中，只能包含一个thead,一个tfoot,但可包含多tbodytbody标签是写表格时必备的标签
*数据表格的相关属性
1) width="表格的宽度"
2) height="表格的高度
3) border="表格的边框
4) bgcolor="表格的背景色
5) bordercolor="表格的边框颜色
6) cellspacing="单元格与单元格之间的间距
7) cellpadding="单元格与内容之间的空隙"
8)水平对齐方式: align="eft左对齐/center居中/right右对齐"
9) 垂直对齐方式: valign="top顶对产/middle居中/bottom底对文/baseline(基线)
10)合并单元格属性
colspan=“所要合并的单元格的列数"合并列
rowspan=“所要合并单元格的行数”合并行
2、数据表格补充及CSS属性
单元格间距(该属性必须给table添加)
border-spacing:value:
2、合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并);
3表格布局算法
table-layout:auto/fixed(固定宽度，不会随内容多少改变单元格宽度)
自动表格布局: 列的宽度是由列单元格中没有折行的最宽的内容设定的
缺点: 较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
优点: 灵活
固定表格布局
加快达打的速度允计刘觉器更快的对表格进行布局
缺点:不太灵活
4无内容单元格显示、隐藏
empty-cells:show/hide,
5表格标题
<caption>标题内容</caption>
caption:表格标题
表格标题位置: caption-side:top/right/bottom/left
(Css属性)
说明: left,right位置只有火狐识别，top,bottom lE7上版本支持,ie7以下版本不支持其它属性值，只识别top
6)th:表格列标题(放在tr里)
数据行分组
<thead></thead>
<tbody></tbody>
<tfoot> </tfoot>
表头
表体必需存在的标签
表尾
说明: 一个Table中，只能包含一个thead，个tfoot,但可包含多个tbodytbody标签是写表格时必备的标签.
8)数据列分组
<colgroup span="value></colgroup>FF,chrome, safari支持span, width, bgcolor属性.IE6 ,ie7,0支持align
作用: colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
<col
span="value"width="100" align="left" />
作用: 细化colgroup，需要写在colgroup里
9 rules="groups/rows/cols/all/none"
添加组分隔线
说明:
rows:位于行之间的线条
cols:位于列之间的线条
all: 位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
说明:
2) span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3)可以通过给table添加rules="groups"属性来给分组列添加组分割线
二、表单的作用和表单的使用
1、表单的作用及组成
表单的作用: 用来收集用户的信息的
表单组成: 表单框 (表单域form)
提示信息
表单控件/表单元素
1)、表单框
<form name="表单名称(英文字母开头的)"method (提交方式) ="post/get" action="表单提交的地址"></form>
2)文本框
<input type="text"value="默认值"maxlength="5"placeholder="提示文本"/>
3)密码框
<input type="password"placeholder="密码"/>
4)提交按钮
<input type="submit" value="按钮内容”/>
<input type="reset”value="按钮内容"/>重置按钮
5)单选框/单选按钮
<input type="radio" name="ral" value="radiovalue"/>
<input type="radio"name="ral" checked="checked"/>
单选按钮里的na
me康性必须写
组单选按钮的r
m届性有以行
6) 复选框
<input type="checkbox" name="like" value="checkboxvalue"/>
复选按钮里的name属性必须写，同一组复选按钮的name属性值必须一样
checked="checked"表示默认被选中，可简写成checked
disabled="disabled"表示禁用，可简写成disabled
enabled:可用状态
7)下拉菜单
<select name="">
<option name=""value="表单被提交时被发送到服务器的值" selected="selected">菜单内容</option>
</select>
8) 多行文本框(文本域)
<textarea name="textareal"cols="字符宽度”rows="行数">
</textarea>
9)跳转按钮
<input name="" type="button"value=“按钮内容” />
<button> </button>
button和submit的区别是
submit是提交按钮起到提交信息的作用，type类型是button只起到跳转的作用，不进行提交
10)上传文件框
文件域: <input type="file" />
11)图像域
<input type="image" src="" width="100" height="100" alt="上传图片"/>
12)隐藏文本框
<input type="hidden"value="值"/>上传隐藏的值/字段
13)提示信息标签(作用: 将提示信息及相应的表单控件进行关联)
<label for="user">提示信息</label>
<input type="text" id="user"/>
14)表单字段集
<fieldset></fieldset>于对表单中的元素进行分组,可以嵌套
功能:相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素
可以嵌套，在其内部可以在设置多个
fieldset对象。
15)字段级标题
<legend></legend>
功能: legend元素可以在fieldset对象绘制的方框内插入一个标题legend元素必须是fieldset内的第一个元素。
扩展知识点3: 对于不同的输入类型，value 属性的用法的意义
value 属性为 input 元素设定值
对于不同的输入类型，value 属性的用法也不同
type="button""reset"，"submit"- 定义按钮上的显示的文本
type="text”，"password"- 定义输入字段的初始值
type="checkbox"，"radio"- 定义与输入相关联的值
注释: <input type="checkbox"> 和 <input type="radio"> 中必须设置 value 他name属性。
扩展知识点4:
<form name="表单名称"method="post/get" action=""></form>
Form中的获取数据的两个方式get和post的区别?
1.get请求通常是从服务器上获取数据，post请求通常表示向服务器提交数据
2.get请求发送的数据都写在地址栏上，用户可见。而post请求发送的数据用户不可见。
3.get请求不能提交大量的数据，但post可以，因此不要混用。
建议:
1. get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式
2 在做数据查询时，建议用Get方式，而在做数据添加、修改或删除时，建议用Post方式，
