Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Propriedade Colspan

Boa noite gente, acabei de terminar o curso de HTML5 e CSS3 parte 3 aqui, mas fiquei com dúvidas como o "colspan", uma propriedade das células de uma tabela. Desde já agradeço se puder retirar minha dúvida!

  <table>
        <table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>    
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2">Segunda</td>
                        <td>8h ~ 20h</td>
                    </tr>
                </tbody>
            </table>
    </table>
5 respostas

Boa noite, Júlio, tudo bem?

Eu também ainda estou aprendendo, assim como você, mas acredito que a tag colspan sirva para especificar o número de colunas de uma tabela a serem ocupados por uma célula.

No exemplo abaixo, foi utilizado o código:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

O resultado fica assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Ou seja, como a soma das linhas deu $180, fez sentido que Soma: $180 ficasse embaixo ocupando as duas colunas. Fonte: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

Acredito que não é o caso do seu código; você quer que "Segunda-feira" ocupe só a coluna "Dia". Então você poderia fazer assim:

<table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda-feira</td>
                        <td>08:00 - 20:00</td>
                    </tr>
                    <tr>
                        <td>Quarta-feira</td>
                        <td>08:00 - 20:00</td>
                    </tr>
                    <tr>
                        <td>Sexta-feira</td>
                        <td>08:00 - 20:00</td>
                    </tr>
                </tbody>
            </table>

Não precisaria utilizar o colspan.

Espero ter ajudado :)

Oii, tudo sim. Então basicamente o navegador vai meio que alongar uma linha até ela ocupar a quantidade de colunas especificadas. Como no exemplo que você deu: a partir do colspan="2", o navegador alongou o "Sum: $180" para ocupar o espaço de duas colunas. Seria isso?

solução!

Olá, tudo bem??

O atributo colspan e rowspan ele serve para mesclar colunas (colspan) e linhas (rowspan).

Nessa tabela, a segunda feira irá mesclar duas colunas. Falando de forma mais simples, a segunda feira irá ocupar o espaço de duas colunas.

Se caso você usasse colspan="3", iria ocupar o espaço de três colunas, e assim sucessivamente.

Exemplo abaixo do seu código:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero que tenha tirado sua dúvida :)

Obrigado, ficou mais claro agora!

De nadaa!! :)