#今日说码栏目#第八集 表格表单

1、表格

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

在网页中也可以来创建出不同的表格。

 1、在HTML中，使用table标签来创建一个表格

 2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

 3、 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

 4、table标签里有自带的属性： border="1" width="40%" align="center"

 5、rowspan用来设置纵向的合并单元格

 6、colspan横向的合并单元格

2、表格样式

 设置表格的宽度，表格居中，边框

  table{

        width: 400px;

        margin: 0 auto;

        border: 1px solid red;

        /* border-spacing:0px ; */

        border-collapse: collapse;

        background-color: pink;

      }

设置内部边框*/

      tr,td,th{

        border: 1px solid red;

      }

      tr:nth-child(2n+1){

        background-color: sandybrown;

      }

      tr:hover{

        background-color: green;

      }

      td{

        height: 50px;

        text-align: center;

        vertical-align: middle; 

      }

需求三： 设置表格的边框，要单线边框 

方法一：

        border-spacing:0px ; 

方法二：

       border-collapse [kə'læps] 设置行和单元格的边是否合并

       如果设置了边框合并，则border-spacing自动失效

       可选值

                separate  默认值，不合并

                collapse  合并边框             

需求四：设置背景色样式

需求五： 设置隔行变色 tr:nth-child(even)

需求六： 鼠标移入到tr以后，改变颜色

需求七：调整td文字在表格中的位置  vertical-align、text-align

3、长表格

有一些情况下表格是非常的长的

  这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签

   thead  表头  永远在表格的头部

   tbody  表格的主体  永远在表格中间

   tfoot  表格的底部  永远在表格底部

   用来区分表格不同的部分，顺序，浏览器会自动调整

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行 需要通过tbody>tr

4、长表格

     表单：

     将用户信息等本地的数据信息提交给服务器的

     比如：百度的搜索框 注册 登录这些操作都需要填写表单

(1)创建表单 form标签

     属性：

     action属性（必须要写）

     指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址

(2)添加表单项

     使用form创建的仅仅是一个空白的表单，

     我们还需要向form中添加不同的表单项

(3)input来创建一个文本框，

     type属性是text

     name属性：提交内容的名字

     如果希望表单项中的数据会提交到服务器中，必须指定一个name属性    

     value属性值：作为文本框的默认值显示    

  用户名

  <input type="text" name="username" value="zhangsan" /> <br /><br />

(4)input创建一个密码框

    type属性值是password

   name属性：提交密码的名字

  密码

  <input type="password" name="password" /> <br /><br />

 (5)input创建一个单选按钮

    - type属性：radio

    - name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择

    - value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器    

    - checked="checked"属性  默认选中

性别 <input type="radio" name="gender" value="male" id="male" />男 <input type="radio" name="gender" value="female" checked="checked" id="female" />女 <br /><br />

(6)input创建一个多选框

    -type属性:checkbox

    -checked="checked"属性  默认选中

  爱好

  <input type="checkbox" name="hobby" value="zq" />足球 <input type="checkbox" name="hobby" value="lq" />篮球 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球

  <input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球 <br /><br />

  (7)select来创建一个下拉列表

    -name属性设置给select，

    -value属性设置给option

    -selected="selected"，将选项设置为默认选中

  你喜欢的明星

  <select name="star">

  在下拉列表中使用option标签来创建一个一个列表项

  <option value="zbs" selected="selected">赵本山</option>

  <option value="fbb">范冰冰</option>

  <option value="lxr">林心如</option>

  </select>

  <br /><br />

  (8)textarea创建一个文本域

  自我介绍 <textarea name="info"></textarea>

  <br /><br />

  (9)input创建一个提交按钮，点击后表单就会提交

      -type属性值：submit

      -value属性：指定按钮上的文字

  <input type="submit" value="注册" />

  (10)创建一个重置按钮，type="reset"

      点击重置按钮以后表单中内容将会恢复为默认值

  <input type="reset" />

  (11)创建一个单纯的按钮，

      这个按钮没有任何功能，只能被点击

  <input type="button" value="按钮" />

（12）button标签来创建按钮

  方式和使用input类似，它是成对出现的标签，使用起来更加的灵活  

  <br/><br/>

  <button type="submit">提交</button>

  <button type="reset">重置</button>

  <button type="button">按钮</button>