html - 此示例的正确HTML表标记是什么？

会计软件包（我正在将其转换为Web应用程序）通常具有如下表结构：

+----------------+----------------+------------+
| DATE           | ACCOUNT        |    BALANCE |
+----------------+----------------+------------+
| 13/06/2011     | Account One    |      10.00 |
+----------------+----------------+------------+
| 13/06/2011     | Account Two    |      10.00 |
+----------------+----------------+------------+
| 13/06/2011     | Account Three  |      10.00 |
+----------------+----------------+------------+
|                |          TOTAL |      30.00 |
+----------------+----------------+------------+

问题是最后一排。很明显，total与列标题account没有关系。如果总单元格是scope=“row”的th，可以吗？它是否也应该跨过左边的所有列？这是Tfoot的工作吗？

最佳答案

我会把th scope="row"和<tfoot>元素放在<thead>之后。您可能还想将headers属性放在每个<td>上，但对于这样一个小的表，这是有争议的。

<table>
    <thead>
        <tr>
            <th id="h-date">Date</th>
            <th id="h-account">Account</th>
            <th id="h-balance">Balance</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="row" colspan="2">TOTAL</th>
            <td headers="h-balance">30.00</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td headers="h-date">13/06/2011</td>
            <td headers="h-account">Account One</td>
            <td headers="h-balance">10.00</td>
        </tr>
        <tr>
            <td headers="h-date">13/06/2011</td>
            <td headers="h-account">Account Two</td>
            <td headers="h-balance">10.00</td>
        </tr>
        <tr>
            <td headers="h-date">13/06/2011</td>
            <td headers="h-account">Account Three</td>
            <td headers="h-balance">10.00</td>
        </tr>
    </tbody>
</table>