Семантическая разметка HTML для сложных таблиц

Какие теги HTML вы бы использовали для описания таблицы следующим образом:

         +--------+---------+---------+---------+
         |  TH1   |   TH2   |   TH3   |   TH4   |
+--------+--------+---------+---------+---------+
|  TR1   |  str1  |    1    |    1    |    1    |
+--------+--------+---------+---------+---------+
|  TR2   |  str2  |    1    |    2    |    1    |
+--------+--------+---------+---------+---------+
|  TR3   |  str3  |    1    |    1    |    3    |
+========+========+=========+=========+=========+
         |  total |    3    |    4    |    5    |
         +--------+---------+---------+---------+

И второй:

         +--------+---------+---------+---------+
         |  TH1   |   TH2   |   TH3   |   TH4   |    
+========+========+=========+=========+=========+
|                     GROUP 1                   |
+--------+--------+---------+---------+---------+ 
|  TR1   |  str1  |    1    |    1    |    1    |
+--------+--------+---------+---------+---------+ 
|  TR2   |  str2  |    1    |    1    |    1    |
+========+========+=========+=========+=========+
|                     GROUP 2                   |
+--------+--------+---------+---------+---------+ 
|  TR3   |  str3  |    1    |    1    |    1    |
+--------+--------+---------+---------+---------+ 
|  TR4   |  str4  |    1    |    2    |    1    |
+--------+--------+---------+---------+---------+
|  TR5   |  str5  |    1    |    1    |    3    |
+========+========+=========+=========+=========+
         |  total |    5    |    6    |    7    |
         +--------+---------+---------+---------+

(при условии высокого уровня доступности)


html semantics semantic-markup tablelayout xhtml-1.0-strict
person takeshin    schedule 14.07.2010    source источник
comment
Ваши изображения описывают структуру или то, как вы хотите, чтобы отображались границы ячеек? Эдвин Тафте, Джейкоб Нильсен и Робин Уильямс, вероятно, посоветовали бы вам не использовать границы.   -  person msw    schedule 14.07.2010
comment
Вопрос в семантике, а не в границах :) Это работа для CSS.   -  person takeshin    schedule 14.07.2010

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, вы ищете что-то вроде этого:

    <table>
        <thead>
            <tr>
                <th>TH1</th>
                <th>TH2</th>
                <th>TH3</th>
                <th>TH4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>total</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>str1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str2</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str3</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

а также

    <table>
        <thead>
            <tr>
                <th>TH1</th>
                <th>TH2</th>
                <th>TH3</th>
                <th>TH4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>total</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td colspan="4">Group 1</td>
            </tr>
            <tr>
                <td>str1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str2</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td colspan="4">Group 2</td>
            </tr>
            <tr>
                <td>str3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str4</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>str5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

Стилизация все зависит от вас, конечно.

person Robusto    schedule 14.07.2010
comment
Это базовая версия, без атрибутов области, заголовков и резюме. Есть ли лучший способ описать отношения между Group 2 и str3? Им обоим сейчас td. Может, еще раз th и несколько tbody? - person takeshin; 14.07.2010
comment
Вы можете использовать th где угодно, а также несколько экземпляров tbody. - person Robusto; 14.07.2010