表单表格

  • 在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子标签,来指定组名

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 45岁男人的父女危机 讲述者忏悔者(化名)记者刘冰 原本是父慈女孝,羡煞旁人。奈何一条暧昧的信息,14岁的女儿撞破...
    乐呵呵美滋滋阅读 2,683评论 0 0
  • (万尚学习会)打卡第39天 姓名:何炳 部门:业务部 组别:待定 【知~学习】 诵读《活法》第二章 不在现场流汗什...
    CrisWellin阅读 95评论 0 1
  • 手机被调至静音,不敢开铃声,听到电话响,心里很是紧张和难过,生怕又是一通催债的电话,已经神经衰弱了先,事情的缘起:...
    北在北方go阅读 184评论 0 0
  • 微信关注“思维发条” ,你就可以不定期的收到语音和文字了。 我们劳苦的最高报酬,不在于我们所获得的,而在于我们会因...
    wan9yu阅读 249评论 0 3
  • 当你对我诉说有关儿时的一切 那些平静、安逸、挣扎 而今重返身体的 却只有炉火摇曳时的温暖 像一只睡饱了觉的猫 春天...
    乌鸦之白阅读 187评论 1 3