16. HTML&CSS--- 表格

HTML

1. 表格(Table)

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，在网页中也可以来创建出不同的表格。

// 在HTML中，使用table标签来创建一个表格


    // 在table标签中使用tr来表示表格中的一行，有几行就有几个tr
     // 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
         // rowspan用来设置纵向的合并单元格
     // colspan横向的合并单元格
        
    
        A1 A2
        A3
        A4
    

    
        B1
        B2
        B3
        B4

    
        C1
        C2
        C3
        
    

    
        D1
        D2
        D3

2. 表格的样式

border-spacing: 0px;

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

border-collapse: collapse;

border-collapse可以用来设置表格的边框合并。如果设置了边框合并，则border-spacing自动失效。


    学号
    姓名
    性别
    住址

可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它还有一些默认样式。

tr:nth-child(even){
    background-color: aquamarine;
}

even设置偶数行变色

tr:hover {
    background-color: blueviolet;
}

鼠标移入到tr以后，改变颜色

3. 长表格

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

thead: 表头
tbody:表格主体
tfoot:表格底部

这三个标签的作用，就是用来区分表格的不同的部分，它们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中。

日期	收入	支出	合计
2018	5000	2000	3000
		合计	30000

thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示在表格的底部
tbody中的内容，永远都会显示表格的中间

tbody > tr:nth-child(even) {
    background-color: aqua;
}

如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素通过table > tr 无法选中行，需要通过tbody > tr

以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的哪行决定
表格是可以嵌套的，可以在td中再放置一个表格

clearfix:

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。

1. 解决父子元素的外边距重叠

.box1::before {
    content: "";
    display: table;
}

display: table;可以将一个元素设置为表格显示。

2. 解决父元素高度塌陷

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

3. 修改后

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

经过修改后的clearfix是一个多功能的，既可以解决高度塌陷问题，又可以确保父元素和子元素的垂直外边距不会重叠。