E-mail Marketing e colspan

Asked

Viewed 231 times

0

I am studying HTML to use in email marketing and was looking at this email here: I understood the beginning of the code, but did not understand the application of 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>

And if I take off the colspan, the top of the layout moves to the left.

html css email

  • If the other row has 3 columns, no colspan, colspan="4" makes no sense.

  • @bfavaretto and probably an error of who originally created the email - note that in the image provided by OP the bottom has an extra pixel on the right side, which may be a reserve of space on the TR for the extra cell.

2 answers

0


The table has 2 rows with 3 columns in the first and 1 column only in the second.

For the second line to fit with the first, you use colspan to compensate.

If you omit colspan in the second row, the column of this row will be in the width of the first column of the first row.

Run the code below:

<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>

  • We just missed the colspan, no?

  • @bfavaretto This. I left without the colspan for you to see the difference. If you put the colspan the green line will expand 3 columns. Actually, that colspan="4" is incorrect. Since the table only has 3 columns, the ideal would be colspan="3", however, if you put a higher value, it makes no difference because the colspan only goes up to the column limit in the table.

  • I know (I’m not the author of the question rs). It’s just that I found your example confusing to be without colspan if what he wants is with (I think)

  • @bfavaretto Rss truth. No, I put it without just to see how it looks, since he asked "And if I take the colspan, the top of the layout moves to the left.".

  • @Davidsamm I was able to understand perfect, thanks for the explanation. I ran your code and ran some tests with mine and I was able to understand, thanks!

0

colspan serves to inform how many columns that row will occupy, by the situation you sent above, note that the first row (TR) has 4 columns (TD), while the second has only 1 column, without informing it using the 4 column space, the image would be crooked trying to occupy only the space of the facebook button, within a table, all rows need to have the same number of columns and each will follow the same width of its corresponding.

  • The first row has 3 columns.

  • Thanks for the explanation, I can understand now, thanks!

Browser other questions tagged html css email

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