What is the correct HTML table markup for this example?

An accountancy package, which I am converting to a web app, often has table constructs like the following:

+----------------+----------------+------------+
| 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 |
+----------------+-----------开发者_StackOverflow-----+------------+

The problem is the last row. TOTAL clearly has no relationship with the column header, ACCOUNT. Would it be OK if the TOTAL cell is a TH with scope="row"? Should it also span all the columns to its left? Is this a job for TFOOT?

---

I'd go for a combination of the th scope="row" and putting the <tfoot> element just after the <thead>. You might also want to put in the headers attribute on each <td> but for such a small table it's arguable.

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

---

I think you are on the right lines. I'd use a table footer with two cells. The first would be a <th colspan="2"> and the second a regular <td>.

(Edit: A previous version of this answer referred to rowspan rather than colspan).

---

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