html - 复杂表格的语义 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>

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