Day09 表格

一、表格

  1.作用：展示数据信息。多用于后台管理系统。

  2.格式和组成

    <table>        表格

      <tr>         行

        <td></td>  单元格（竖向的单元格构成列）

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

      </tr>

    </table>

  3.表格的css属性

    <1>border-spacing(写在table)     单元格外间距（当值为0时，可以合并外间距）

    <2>border-collapse(写给table)

      collapse          合并单元格边框

      separate(默认值)   不合并单元格边框

      作用：可以解决border-spacing合并边框线时，边框线无法完全合并的问题  

    <3>empty-cells       空白单元格是否显示(写给table)

      hide                隐藏

      show(默认值)        显示  

      注意：在我们设置border-collapse:collapse;时看不到任何效果。

  4.表格的特点

    表格会根据单元格内是否有内容来自动分配空间，有内容的或者内容多的，

    我就多分点，没有内容的或者内容少的我就少分点。这样能保证每个格子的

    内容都不会溢出。但是在某行或者某列都没有内容时，这个布局就会显得很难看。

    如何解决呢？（使用table-layout和height解决）

    总结：如果你想固定每个td的大小，让每个td不会随着内容多少而改变，建议

    宽度使用table-layout:fixed;分配，高度通过给td添加高度分配。

  5.合并单元格

    <1>合并行   竖向合并  rowspan

      合并方法：

        从哪个td开始合并，就给那个td添加rowspan,要合并几行，

        就从当前行的下一行开始，对应的n-1行内，每行删去一个td。

    <2>合并列   横向合并  colspan

      合并方法：

      从哪个td开始合并，就给那个td添加colspan,要合并几列，

      就从当前行的这个td开始，删除对应的n-1个td.

      存在的问题：如果有一列从开始到结束都没有单独存在过，那么在自动

      分配宽度时，这一列将不会存在。（可以通过table-layout:fixed;解决）

  6.table表格中标签

    <1>caption      表格标题(需要写在table里边)

    <2>表格行分组

      <thead></thead>    表头    th一般用在表头里，给表头里边的作为小标题

      <tbody></tbody>    表体(表格中必定存在表体)

      <tfoot></tfoot>    表尾

    <3>表格列分组  <colgroup span=''></colgroup>（需要写在table里边）

      span里边写要将几列分为一组。

二、表单  

  1.作用：用来收集用户数据信息（用于登陆注册和信息录入页面）

  2.表单的组成：

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

  3.表单框    form

    <1>特点：所有的表单控件都必须写在表单框里边，表单控件脱离了表单框无效。

    <2>结构<from action='' method=''></form>

      action    提交数据的接口地址

      method    提交方式

        get       数据在地址栏传递      

        post      数据在请求体传输（安全性高和传输大小可以更高）

        put

        delete

        建议：

          1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

          2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

    4.表单控件

      回顾：

        <1>input  

          ——value      默认文本，默认值

          ——name       参数名

          ——tpye       控件类型

            text        文本框

            password    密码框

            submit      提交按钮

            reset       重置按钮

          ——placeholder     提示文本信息

        补充：

            button    普通按钮

            radio     单选框（需要搭配name分组使用）

            checkbox  复选框（需要搭配name分组使用）

        <2>select>option     下拉框

          select      下拉框

          option      下拉选项

        <3>textarea           文本域

            特点：可以随意改变大小。

            设置 resize:none;可以取消

    5.表单的其他标签

      <1>label     标签绑定

        格式：<label for='xxx'>标签的文字信息</label>

              <input type='text' id='xxx'>

        功能：将label里边的文字信息和对应id名的标签进行绑定。

      <2>lengend   字段集标题（一般放在fieldset里边使用）

      <3>fieldset  表单字段集

          表单字段集可以对表单中的内容进行分类