How to properly divide a th in html?

Navigation
2

I want to make a table, where <th> separates into three, one row on top and one row broken in two below, but I can not separate the <th> in two as <td> since we use the colspan , I tried to do some gambiarras, but it would not be good, because then I would have to be responsive, is it possible to make a table like that?

My code: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TEST</title>
    </head>    
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>
                        ITEM A
                    </th>
                    <th>
                        ITEM B
                    </th>
                    <th colspan="2">
                        ITEM C
                        <p>ITEM D | ITEM E<p>
                    </th>
                </tr>
            </thead>

            <tbody>
            <td>
                A
            </td>
            <td>
                B
            </td>
            <td>
                C1
            </td>
            <td>
                C2
            </td>
            </tbody>
        </table>
    </body>
</html>
    
asked by anonymous 25.01.2016 / 20:58

1 answer

3

I do not know if it's the best way, but I'd do it like this: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TEST</title>
</head>    
<body>
    <table border="1">
        <!-- PRIMEIRO LINHA -->
        <tr>
            <td rowspan="2"><!-- OCUPA DUAS LINHAS -->
                ITEM A
            </td>

            <td rowspan="2"><!-- OCUPA DUAS LINHAS -->
                ITEM B
            </td>

            <td colspan="2"><!-- OCUPA DUAS COLUNAS-->
                ITEM C
            </td>
        </tr>
        <!-- FIM PRIMEIRA LINHA -->

        <!-- SEGUNDA LINHA -->
        <tr> <!-- TENHO OS DOIS ITENS, IGNORO AS DUAS PRIMEIRAS COLUNAS POIS JÁ DEFINI QUE AS DA PRIMEIRA LINHA OCUPARAM ESSA LINHA -->
            <td>
                ITEM D
            </td>
            <td>
                ITEM E
            </td>
        </tr>
        <!-- FIM DA SEGUNDA LINHA E COMEÇO DA TERCEIRA -->
        <tr>
            <td>
                A
            </td>

            <td>
                B
            </td>

            <td>
                C1
            </td>

            <td>
                C2
            </td>
        </tr>
        <!-- FIM DA TERCEIRA LINHA -->

    </table>
</body>
</html>
    
25.01.2016 / 21:03
Client http socket in c Execute two functions with onclick