Question

我转换为网络应用程序的会计软件包通常具有以下表格构造：

+----------------+----------------+------------+
| 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，那会没关系吗？它还应该跨越左边的所有列吗？这是TFOOT的工作吗？

Answer 1

我会选择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>

Answer 2

我认为你是正确的。我会用一个带有两个单元格的桌面页脚。第一个是<th colspan="2">，第二个是常规<td>。

（编辑：此答案的先前版本提到rowspan而不是colspan。）

Answer 3

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Account</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>13/06/2011</td>
            <td>Account One</td>
            <td>10.00</td>
        </tr>
        <tr>
            <td>13/06/2011</td>
            <td>Account Two</td>
            <td>10.00</td>
        </tr>
        <tr>
            <td>13/06/2011</td>
            <td>Account Three</td>
            <td>10.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td>TOTAL</td>
            <td>30.00</td>
        </tr>
    </tfoot>
</table>

此示例的HTML表格标记是什么？

3 个答案: