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

Question

我正在将其转换为 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 没有关系。如果 TOTAL 单元格是 TH with scope="row"可以吗？它是否也应该跨越其左侧的所有列？这是 TFOOT 的工作吗？

Answer 1

我会选择 th scope="row" 的组合并把 <tfoot> <thead> 之后的元素.您可能还想输入 headers每个 <td> 的属性但对于这么小的 table ，这是有争议的。

<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>