Search code examples
htmlsemanticstablelayoutsemantic-markupxhtml-1.0-strict

Semantic HTML markup for complex tables


Which HTML tags would you use to describe table like this:

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

And the second one:

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

(Assuming high level of accessibility)


Solution

  • I think you're looking for something like these:

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

    and

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

    Styling everything is up to you, of course.