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

一、表格

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

  • 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基础入门六:表格的基本设置)