复杂表的语义HTML标记

Question

您将使用哪些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    |
         +--------+---------+---------+---------+

（假设高级别的可访问性）

Answer 1

我认为你正在寻找类似的东西：

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

当然，造型一切都取决于你。