美文网首页
WEB基础入门六:表格的基本设置

WEB基础入门六:表格的基本设置

作者: 瘦不下去了 | 来源:发表于2018-09-11 15:40 被阅读0次

    一、表格

    现在我们使用表格的作用只有一个,就是用来表示格式化的数据

    • table: 使用table标签创建一个表格
    • tr: 表示表格中的一行,tr中可以编写一个或多个th或td
    • th: 表示表头
    • td: 表示表格中的一个单元格
    • caption: 表示表格的标题

    表格是可以嵌套,可以在td中在放置一个表格

    二、长表格

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

    • thead: 表示表格的头部,永远会显示在表格的头部
    • tbody: 表示表格的主体,永远都会显示表格的中间
    • tfoot: 表示表格的底部,永远都会显示表格的底部

    注意tr并不是table的子元素,而是tbody的子元素,通过table > tr 无法选中行 需要通过tbody > tr

    三、合并单元格

    合并单元格指将两个或两个以上的单元格合并为一个单元格
    合并单元格可以通过在th或td中设置属性来完成

    • 横向合并:colspan
    • 纵向合并:rowspan

    四、表格的样式

    • text-align: 设置文本的水平对齐
    • vertical-align: 设置文本的垂直对齐
      可选值:top、baseline、middle、bottom
    • border-spacing:边框间距(如果设置了合并边框则失效)
    • border-collapse:合并边框
      collapse:合并边框
      separate:不合并边框

    五、解决高度塌陷的终极格式,完善clearfix

            .clearfix:before,
            .clearfix:after{
                content: "";
                display: table;
                clear: both;
            }
            .clearfix{
                zoom: 1;
            }
    

    相关文章

      网友评论

          本文标题:WEB基础入门六:表格的基本设置

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