美文网首页
表单表格

表单表格

作者: 张露锋 | 来源:发表于2018-11-27 09:08 被阅读0次
    • 在HTML中,使用table标签来创建一个表格
      在table标签中使用tr来表示表格中的一行,有几行就有几对tr
      在tr中需要使用td来创建一个单元格,有几个单元格就有几个td
      rowspan用来设置纵向的合并单元格
      colspan横向的合并单元格

    设置表格的宽度:

    居中:

        margin: 0 auto;
    

    边框:

        border:1px solid black;
    

    table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离

        border-spacing: 10px
    

    border-collapse可以用来设置表格的边框合并
    如果设置了边框合并,则border-spacing自动失效

    设置背景样式:

      background-color: #bfa
    

    设置边框:

          th, td{
                  border: 1px solid black;
                }
    

    长表格

    有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
    在HTML中为我们提供了三个标签:
    thead 表头
    tbody 表格主体
    tfoot 表格底部
    这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中
    thead中的内容,永远会显示在表格的头部
    tfoot中的内容,永远都会显示表格的底部
    tbody中的内容,永远都会显示表格的中间
    如果表格中没有写tbody,浏览器会自动在表格中添加tbody
    并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
    通过table > tr 无法选中行 需要通过tbody > tr

    • 以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了
      表格的列数由td最多的那行决定
      表格是可以嵌套,可以在td中在放置一个表格

    表单:

    表单的作用就是用来将用户信息提交给服务器的
    比如:百度的搜索框 注册 登录这些操作都需要填写表单
    使用form标签创建一个表单
    form标签中必须指定一个action属性,该属性指向的是一个服务器的地址
    当我们提交表单时将会提交到action属性对应的地址
    设置请求方式:method="post"
    需要上传文件时要加属性: enctype="multipart/form-data
    使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项
    在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中
    在fieldset可以使用legend子标签,来指定组名

    相关文章

      网友评论

          本文标题:表单表格

          本文链接:https://www.haomeiwen.com/subject/zppwqqtx.html