Какова правильная разметка таблицы HTML для этого примера?

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

Проблема заключается в последней строке.ИТОГО явно не имеет отношения к заголовку столбца, СЧЕТ.Было бы хорошо, если бы общая ячейка была TH с scope = "row"?Должен ли он также охватывать все столбцы слева?Это работа для 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>