8、表格和表单

一、表格

1、作用

展示数据信息

2、用途

多出现在后台管理系统中

3、表格的组成

table(表格)，tr(行)，td(单元格)

4、表格的基本结构

	<table> 	表格
        <tr>	行
          <td>1-1</td>	单元格
          <td>1-2</td>
          <td>1-3</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
        </tr>
      </table>

5、table的标签属性

	1、border		表格边框(加上后，整个表格都有边框，包括td)
	2、bordercolor	边框颜色
	3、bgcolor		背景色	
	4、width		表格宽度
	5、height		表格高度		
	6、align		表格水平方向的位置
		left          表格靠左
        center        表格居中
        right         表格靠右
	7、cellpadding	单元格内填充
   *8、cellspacing 	单元格间距
   *9、rules		表格线型

6、tr的标签属性

	1、bgcolor       背景色
    2、height        行高度
    3、align         此行文字水平对齐方式
         left(默认值)    左对齐
         center          文字居中
         right           右对齐
   *4、valign        此行文字垂直对齐方式
         top             垂直靠上
         middle(默认值)   垂直居中
         bottom          垂直靠下

7、td的标签属性

  1、bgcolor       单元格背景色
  2、width         单元格整列宽度
  3、height        单元格整行高度
  4、align         单元格文字水平对齐方式
      left              单元格文字靠左
      center            单元格文字居中
      right             单元格文字靠右
 *5、valign        单元格的垂直对齐方式
      top               单元格垂直靠上  
      middle            单元格垂直居中
      bottom            单元格垂直靠下
**6、rowspan           行合并（竖向合并）
      行合并n个单元格时，从添加rowspan这行的下一行开始，对应的n-1行中，每行删去一个单元格
**7、colspan           列合并（横向合并）
      列合并n个单元格时，从本行添加colspan这个单元格开始，删除后边n-1个td;
      注意：在合并列时，如果有一列单元格从头到尾都没有单独存在过，那么这一列将不再占据空间。
      解决方法：（1）给td设置宽和高。
                （2）给table设置table-layout:fixed;
  重点：行合并、列合并。

8、表格的css属性

*（1）border-collapse      是否合并单元格边框
        *collapse            合并单元格边框
         separate(默认值)     不合并单元格边框
*（2）border-spacing       单元格外间距
 （3）empty-cells          空白单元格是否显示
         hide                 隐藏
         show(默认值)         显示
*（4）table-layout         单元格宽度分配规则
         auto(默认值)         自动分配，内容多了多占点
         fixed                固定平均分配

9、表格的html标签

（1）表格行分组
      thead     表头      th表格头部标题
      tbody     表体(必定存在)
      tfoot     表尾
（2）表格列分组
      <colgroup span='' ></colgroup>
      span中写几，就是把几列分为一组。
（3）caption    表格标题

二、表单

1、表单的作用

收集用户信息。

2、表单的组成

表单框、提示信息、表单控件

3、form

  属性
      method    提交方式，请求方式
      action     接口地址

4、input

  属性
    name          参数名
    type          类型
      回顾：
          ——text          文本框
          ——password      密码框
          ——submit        提交按钮
          ——reset         重置按钮
          ——button        普通按钮
      新增：
          ——time          时间框
          ——file          选择文件框
          ——hidden        隐藏数据框(可以用来提交一些不需要用户输入的数据)
          ——radio         单选框 (需要搭配name进行分组，value为具体提交的内容)
          ——checkbox      复选框(需要搭配name进行分组，value为具体提交的内容)
          ——date		  日期框
    placeholder   未输入时的提示文本信息 
    value          默认数据，默认文本

5、select控件 下拉列表

    结构:select>option*5
    特点：select身上有name,option必须写value

6、textarea 文本域

    作用：可以写一段内容。
    特点：可以通过拖拽改变大小。    resize: none;可以禁止拖拽放大行为。

7、label 标签文本绑定

    结构:
    <label for='绑定的标签的id名'>需要绑定的文本</label>
    <input type='text' id='xxx' />

8、表单字段集 fieldset

    特点：块元素，给表单进行分区域块。出现一圈线将内容包裹起来。

9、字段集标题 legend

    特点：在fieldset中使用，是当前字段集的标题。