立即学习:https://edu.csdn.net/course/play/10459/227986?utm_source=blogtoedu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<!--
在一些情况下，有些表格是非常长的
这是就需要将表格分为三个部分，表头，表格主体，表格底部
在HTML中为我们提供了三个标签
thead 表头
thbody 表格主体
thfoot 表格底部
这三个标签，用来区分表格不同的部分，是table的子标签
都需要直接写在table中，tr需要写在这些标签里
thead中的内容永远会显示在表格的头部
tfoot永远都会显示在表格中的底部
tbody永远显示在表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并将tr添加到tbody中
所以tr并不是table的子元素，通过 table > tr 无法选到tr，需要写成 tbody > tr
-->
<thead>
<th>日期</th>
<th>支出</th>
<th>收入</th>
<th>合计</th>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>45000</td>
</tr>
<tbody>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
<tr>
<td>12.24</td>
<td>1000</td>
<td>6000</td>
<td>5000</td>
</tr>
</tbody>
</table>
</body>
</html>