How to correctly divide a <th> into html?

Asked

Viewed 3,451 times

2

I want to make a table, where the <th> split into three, a line at the top and a line broken into two at the bottom, but I cannot separate the <th> in two like the <td> since we use the colspan, I tried to do some tricks, but it wouldn’t be good, because then I would have to be responsive, it is possible to make a table like this?

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>
html5
  • 1

    No need to put 'solved' in the title of the question. You have already marked the answer as accepted and that is enough. :)

  • Thanks @emanuelsn! I am new here in the community, did not know this, rs.

  • Quiet, man. Welcome to Sopt. :D

1 answer

4


I don’t 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>

  • 1

    lvcs, Perfect +1, was the solution I was looking for, thank you very much!

  • 1

    @Devryu, I have commented on the code for better understanding.

  • 1

    Even better @lvcs, looks like an easy problem, but has to quietly assemble the table, even more for beginners like me in the assembly of responsive screens.

  • 1

    For responsive websites, in table I suggest using the classes of bootstrap, if you are not using rs, it is less work..

  • I’m using yes, rs (I still can’t do on hand without), but to work, I needed this table that you kindly provided, with the correct html.

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.