0

Estou estudando HTML para utilizar em e-mail marketing e estava olhando este e-mail aqui: Entendi o começo do código, porém não entendi a aplicação do colspan:

<tr>

    <td>

    <a href="https://www.facebook.com/FGV-Energia-1579891958938780/?fref=ts" target="_blank"><img src="http://www.fgv.br/mailing/2017/fgv_energia/boletim/marco/imagens/dez_01_01.jpg" width="96" height="52" alt="" style="display:block" border="0"></a>

    </td>

    <td>

    <a href="https://www.linkedin.com/company/10274929?trk=tyah&trkInfo=clickedVertical%3Ashowcase,clickedEntityId%3A10274929,idx%3A2-1-2,tarId%3A1459366866829,tas%3Afgv energia "><img src="http://www.fgv.br/mailing/2017/fgv_energia/boletim/marco/imagens/dez_01_02.jpg" width="58" height="52" alt="" style="display:block" border="0"></a>

    </td>

    <td>

    <a href="http://www.fgv.br/energia" target="_blank"><img src="http://www.fgv.br/mailing/2017/fgv_energia/boletim/marco/imagens/dez_01_03.jpg" width="446" height="52" alt="" style="display:block" border="0"></a>

    </td>

</tr>

<tr>
    <td colspan="4">

        <img src="http://www.fgv.br/mailing/FGV_Energia/boletim/2017/jun/01.png" alt="Header: Boletim de Conjuntura do Setor Energ&eacute;tico- Junho 2017" width="599" height="421" border="0" style="display:block"></td>
</tr>

E caso eu tire o colspan, a parte de cima do layout move pra esquerda.

2
  • Se a outra linha tem 3 colunas, sem nenhum colspan, colspan="4" não faz sentido.
    – bfavaretto
    Commented 3/08/2017 às 0:08
  • @bfavaretto e provavelmente um erro de quem originalmente criou o email - note que na imagem fornecida pelo OP a parte inferior possui um pixel a mais do lado direito, o que pode ser uma reserva de espaço na TR para a célula extra.
    – OnoSendai
    Commented 3/08/2017 às 12:55

2 Respostas 2

0

A tabela possui 2 linhas com 3 colunas na primeira e 1 só coluna na segunda.

Para que a segunda linha se ajuste com a primeira, você usa o colspan pra compensar.

Caso vc omita o colspan na segunda linha, a coluna desta linha ficará na largura da primeira coluna da primeira linha.

Execute o código abaixo:

<table>
<tr>

    <td bgcolor="red">

    linha 1 - coluna 1

    </td>

    <td bgcolor="blue">

    linha 1 - coluna 2

    </td>

    <td bgcolor="yellow">

    linha 1 - coluna 3

    </td>

</tr>

<tr>
    <td bgcolor="green">
    linha 2 - coluna 1
        </td>
</tr>
</table>

5
  • Faltou justamente o colspan, não?
    – bfavaretto
    Commented 3/08/2017 às 0:08
  • @bfavaretto Isso. Deixei sem o colspan pra vc ver a diferença. Se vc colocar o colspan a linha verde vai se expandir 3 colunas. Na verdade, aquele colspan="4" está incorreto. Como a tabela só tem 3 colunas, o ideal seria colspan="3", porém, se vc colocar um valor maior, não faz diferença pq o colspan só vai até o limite de colunas na tabela.
    – Sam
    Commented 3/08/2017 às 0:11
  • Eu sei (eu não sou o autor da pergunta rs). É que achei confuso seu exemplo ser sem colspan se o que ele quer é com (acho)
    – bfavaretto
    Commented 3/08/2017 às 0:13
  • @bfavaretto Rss verdade. Não, eu botei sem justamente pra ele ver como fica, já que ele perguntou "E caso eu tire o colspan, a parte de cima do layout move pra esquerda.".
    – Sam
    Commented 3/08/2017 às 0:16
  • @DavidSamm Consegui entender perfeitamento, obrigado pela explicação. Executei o seu código e fiz uns testes com o meu e consegui entender, valeu! Commented 4/08/2017 às 13:07
0

O colspan serve para informar quantas colunas aquela linha vai ocupar, por na situação que você mandou acima, repare que a primeira linha (TR) possui 4 colunas (TD), já a segunda possui apenas 1 coluna, sem informar a mesma utilizara o espaço de 4 colunas, a imagem ficaria torta tentando ocupar apenas o espaço do botão facebook, dentro de uma tabela, todas as linhas precisam ter o mesmo numero de colunas e cada uma seguira a mesma largura da sua correspondente.

2
  • A primeira linha tem 3 colunas.
    – bfavaretto
    Commented 3/08/2017 às 0:08
  • Valeu pela explicação, consegui entender agora, valeu! Commented 4/08/2017 às 13:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .