table布局

作者: 雅玲哑铃 | 来源:发表于2017-08-28 22:37 被阅读460次

table布局基本格式

    <table border="1" cellspacing="0">
        <thead>
           <tr>
              <th>姓名</th>
              <th>学号</th>
              <th>成绩</th>
           </tr>
        </thead>
        <tbody>
           <tr>
              <td>张三</td>
              <td>12</td>
              <td>89</td>
           </tr>
           <tr>
              <td>李四</td>
              <td>22</td>
              <td>90</td>
           </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
姓名 学号 成绩
张三 12 89
李四 22 90

tr 表示行,td表示列,th表示表头标题
最终上面的代码形成下面对应的表格

下面我们一起看看table的属性有哪些呢?

  1. border:给表格及单元格加边框,属性值可以是1、2、3......
  2. width: 设置整个表格的宽
  3. height:设置整个表格的高
  4. 注意:设置完表格的宽高后,每个单元格的宽高会自动分配
  5. border-spacing:0;控制单元格之间的空白为0
  6. border-collapse:collapse; 设置各单元格边宽以及外边宽重叠;
  7. cellpadding:设置内容与边框的距离

合并单元格的问题

  1. colspan 跨行合并
  2. rowspan 跨列合并

相关文章

  • HTML表格、表单

    表格 table常用标签 table常用属性: 传统布局: 传统的布局方式就是使用table来做整体页面的布局,布...

  • CSS

    首先来聊聊传统的 table 布局吧。传统的 table 布局就是利用 table 元素所有的零边框特性来进行布局...

  • 未知宽高元素的水平垂直居中

    4种实现思路 table布局(display:table) 绝对布局(position:absolute)+tra...

  • 前端日记

    #水平垂直居中布局: flex弹性布局,table-cell布局(父级table),定位(多种方式); #如何安...

  • 自学H5Day4

    一、div布局 二、table布局

  • HTML布局

    使用div布局 使用table布局

  • Web前端基础(二):HTML5与网页入门

    1. 网站布局 DIV用于布局,Table用于显示数据,这是现在最基本的设计原则。 1.1 Table 布局...

  • css常用布局总结

    一、左右布局 1.table:table的li实现 实现原理: table标签是能够具有实现左右布局的属性,也是我...

  • 多列等高布局

    flex布局 table

  • 菜鸟学习笔记:表格布局和div+css布局

    网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局 实现效果 **...

网友评论

    本文标题:table布局

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