有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ margin: 20px auto; border: 1px solid black; border-collapse: collapse; width: 200px; } th{ background-color: yellow; border: 1px solid black; } td{ border: 1px solid black; } tbody tr:nth-child(even){ background-color: yellowgreen; } tbody tr:hover{ background-color: red; } tfoot tr{ background-color: skyblue; } </style> </head> <body> <table> <thead> <th>时间</th> <th>收入</th> <th>支出</th> <th>合计</th> </thead> <tfoot> <tr> <td></td> <td></td> <td>总计</td> <td>200</td> </tr> </tfoot> <tbody> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> </tbody> </table> </body> </html>
浙公网安备 33010602011771号