美文网首页
表格、表格样式、长表格、表格的布局、表单

表格、表格样式、长表格、表格的布局、表单

作者: 栀心_d553 | 来源:发表于2019-12-18 22:55 被阅读0次

使用table标签来创建一个表格

在table标签中使用tr来表示表格中的一行,有几行就有几对tr

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

rowspan用来设置纵向的合并单元格
colspan横向的合并单元格


表格样式

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

可以使用th标签来表示表头中的内容,

        它的用法和td一样,不同的是它会有一些默认效果

border-collapse可以用来设置表格的边框合并

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

长表格

有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
在HTML中为我们提供了三个标签:
thead 表头
tbody 表格主体
tfoot 表格底部

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

表格的布局

表格的列数由td最多的那行决定
表格是可以嵌套,可以在td中在放置一个表格


表单

相关文章

  • 表格、表格样式、长表格、表格的布局、表单

    使用table标签来创建一个表格 在table标签中使用tr来表示表格中的一行,有几行就有几对tr 在tr中需要使...

  • 2018-11-28

    表格 表格 长表格 表格的布局 完善clearfix 表单 模拟后台服务器 表格

  • HTML 日常了解7

    按钮练习 雪碧图 简写背景属性 表格 表格 给表格添加样式 表格的布局 完善clearfix 表单 模拟后台服务器...

  • Tailwind Table

    表格样式工具类 表格布局table layout CSS中table-layout属性用于设置表格布局的类型,即用...

  • 表格 长表格 布局

    固定定位 固定定位的元素会被锁定在屏幕的某个位置上,当 访问者滚动网页时,固定元素会在屏幕上保持不动。 当将pos...

  • 2018-12-28 给表格添加样式 长表格 表格的布局 完善c

    8、给表格添加样式: 9、长表格有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格...

  • HTML-06day

    1、按钮练习 2、固定定位 3、电驴导航 4、表格样式 5、表格布局 6、表格 7、表格属性简写 8、背景 9、新...

  • 表格、给表格添加样式、长表格

    表格: 1、在HTML中,使用table标签来创建一个表格 2、在table标签中使用tr来表示表格中的一行,有几...

  • 6. JavaScript开发中表格与表单技术

    在网页中,表格和表单都是非常关键的应用,表格用来存放数据并布局页面样式,表单用于传输数据、采集客户端信息等。 6....

  • day02_HTML表格列表表单

    会涉及关于表格、表单、列表的讲解表格:显示数据表单:获取用户数据列表:控制布局 一、表格 主要用于数据展示 1.1...

网友评论

      本文标题:表格、表格样式、长表格、表格的布局、表单

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