Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

HTML - Problema com tabela

Olá, pessoas!

Comecei o curso de HTML5 e CSS3 aqui da Alura e me aventurando com html me deparei com um problema. Queria criar uma tabela como a do link abaixo, porém estou fazendo algo de errado com as mesclagens. Alguém pode me dar uma luz? Valeu!

Tabela que estou tentando fazer: https://imgur.com/125VRAg

<style>tr, th, td{border:solid 1px;}</style>
<table>
        <thead>
            <tr>
                <td>Linha 1 - Coluna 1</td>
                <td>Linha 1 - Coluna 2</td>
                <td>Linha 1 - Coluna 3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Linha 2 - Coluna 1</td>
                <td>Linha 2 - Coluna 2</td>
                <td>Linha 2 - Coluna 3</td>
            </tr>
            <tr>
                <td rowspan="2">Linha 3 e 4 - Coluna 1</td>
                <td>Linha 3 - Coluna 2</td>
                <td rowspan="2">Linha 3 e 4 - Coluna 3</td>
            </tr>
            <tr>
                <td rowspan="2">Linha 4 e 5 - Coluna 2</td>
            </tr>
            <tr>
                <td>Linha 5 - Coluna 1</td>
                <td>Linha 5 - Coluna 3</td>
            </tr>
            <tr>
                <td>Linha 6 - Coluna 1</td>
                <td>Linha 6 - Coluna 2</td>
                <td>Linha 6 - Coluna 3</td>
            </tr>
        </tbody>
    </table>
1 resposta
solução!

Oi Leonardo, tudo bom?

Pra chegar no resultado da tabela você vai precisar sobrescrever o border no css de algumas células. Você pode selecionar com uma classe na td mesmo, ou com seletor css de posição tipo nth-child. Pela image, a coluna 1 e 3 são iguais, então da pra reaproveitar esse caso =)

Uma outra abordagem seria diminuir a quantidade de linhas dentro das colunas e dobrar o tamanho de uma das celulas em cada coluna.

Qualquer problema é só falar

Abraço