css基础：表格+表单之属性方法-第十一天

# 三、表格

1、表格：展示信息

2、表格由行和列组成

3、表格的基本元素

    - table

        -thea

            - tr

                - th

        -tdoy

            - tr

                - td

        -tfoot

            - tr

                - td

 

4、基本属性

    -宽度：width

        - 数值

    -高度：height

        - 数值

    -边框：border

        - 数值

    -边框颜色：border

        - 颜色值

    -背景颜色：bgcolor

        - 颜色值

    -单元格之间的间距：cellspacing

        - 数值

    -单元格内部的填充：cellpadding

        - 数值

    -水平对齐：align

        - left、right、center

        - 加给table，表示表格的对齐

        - 加给tr，表示这一行的内容对齐

    - 垂直对齐：valign

        - top | middle |bottom

        - 加给tr，表示这一行的内容对齐

5、合并

    -行：rowspan=“数值”

    -列：colspan=“数值”

    -合并行或列属性，要加给合并之前的第一个单元格td

    - 合并之后，等同于一个单元格占据多个单元格的位置

    - 手动删除将要被合并的位置的单元格td

6、数据分组

    - 列

        -colgroup  <cologroup span="2"></cologroup>

        - col：<col span="3">

    - 行

        - thead  <thead></thead>

        - tbody   <tbody></tbody>

        - tfoot   <tfoot></tfoot>

    - 数据分组分割线

        - 给table标签添加rules属性，值为：

            - 给数据行和数据列添加分割线：groups

                -不能识别<col span="3" />分的数据列

            - 给行添加分割线：rows

            - 给列添加分割线 cols

            - 给所有的行和列添加分割线：all

            - 取消所有行和列的分割线：none

    - 表的标题

        - <caption>标题内容</caption>

7、表格的css属性

    - 单元格边框之间的距离:border-spacing

        -数值+单位

    - 是否合并单元格：border-collapse

        - 合并collapse

    - 是否隐藏单元格：empty-cells

        - 隐藏：hide

        - 不隐藏：show

    - 单元格宽度的计算规则：table-layout

        - 提前：没有主动设置列宽

        - 自动（根据内容自动分配）：auto

        - 固定：fixed

    - 注意不同样式之间的干扰

# 四、表单

1、表单：收集信息

2、表单容器：form

3、表单元素：input

4、表单字段集：fieldset

5、表单域标题：legend

6、表单控件的关联文本：label

7、下拉菜单：select + option

8、文本域：texttarea

9、输入框的不同类型

10、注意事项:

    - 不是所有类型的input都能生效全部属性，不同的属性可能会针对不同的input类型

    - 除了要考虑视觉上的效果之外，还需要思考自身需要提供的功能

    - 原则上来说，每个表单控件都要有name

    - 原则上来说，表单空间的样式，如果不能通过css控制，可控性很差，需要使用js替换