The html table width does not increase as requested for Outlook subscription

0

I need to make a signature in html and css for outlook and need to have a width of at most 320px for setting on cell phones, I did this way but the width I ask does not stay, someone can help me, I never used a table so I can have done something wrong. Code below along with execution

<table border="0" cellspacing="0" width="320">
<tbody  width="320">
<tr width="320">

<td rowspan="6" width="136" height="150"><a href="http://politicadascidades.com.br/"><img width="136" height="136" src="http://politicadascidades.com.br/img/assinaturas/assinatura-iloveimg-resized.jpg"alt="" align="top" /></a></td>

</tr>

<tr width="320">
<td width="183">&nbsp;</td>
</tr>

<tr width="320">
	<td width="183"><span width="183" id="titulo" style="font-size: 25px; font-family: 'Helvetica Neue',Helvetica">&nbsp;&nbsp;Fabiana Correa</span></td>
</tr>

<tr width="320">
	<td><span id="subtitulo" style="color:grey; font-size: 19px;font-family: 'Helvetica Neue',Helvetica">&nbsp;&nbsp;&nbsp; Editora</span></td>
</tr>

<tr>
<td width="183"><span style="font-family: 'Helvetica Neue',Helvetica">&nbsp;&nbsp;&nbsp;&nbsp;19 <span style="font-size: 26px;font-family: 'Helvetica Neue',Helvetica">99432-4813</span></span></td>
</tr>

<tr width="320">
<td width="183">&nbsp;</td>
</tr>

<tr width="320">
<td width="183">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://politicadascidades.com.br/"><img src="http://politicadascidades.com.br/img/assinaturas/icone-browser.png"height="20" align="bottom"></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/politicadascidades"><img src="http://politicadascidades.com.br/img/assinaturas/icone-face.png"alt="" height="20" align="bottom" /></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.instagram.com/politicadascidades/"><img src="http://politicadascidades.com.br/img/assinaturas/icone-insta.png"alt="" height="20" align="bottom" /></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://twitter.com/politicacidades"><img src="http://politicadascidades.com.br/img/assinaturas/icone-twitter.png"alt="" height="20" align="bottom" /></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCPH6zKPor8s8VRjeruSUnrw"><img src="http://politicadascidades.com.br/img/assinaturas/icone-youtube.png"alt="" height="20" align="bottom" /></a>
</td>
</tr>
</tbody>
</table>
    
asked by anonymous 26.04.2017 / 13:53

2 answers

0

In order for it to maintain the correct ratio in the mobile, you need to set the header, you can do this by entering the meta tag below:

<meta name="viewport" content="width=device-width, initial-scale=1" />
    
04.05.2017 / 23:32
0

I've been able to do this, I've done a merge between the columns and lines and the icons each put in a td follow the code,

<table border="0" cellspacing="0" width="320" height="115">
	<tr width="136">
		<td rowspan="4">
			<a href="http://politicadascidades.com.br/">
			<img width="136" height="115" src="http://politicadascidades.com.br/img/assinaturas/assinatura-iloveimg-resize.jpg"alt="" align="center" />
			</a>
		</td>
		<td colspan="5" width="183" style="padding: 0px 0px 0px 10px;">
			<span width="183" id="titulo" style="font-family: 'Helvetica Neue',Helvetica;">Fabiana Correa</span>
		</td>
	</tr>
	<tr>
		<td colspan="5" style="padding: 0px 0px 0px 10px;">
			<span id="subtitulo" style="color:gray;font-family: 'Helvetica Neue',Helvetica;" color="gray">Editora</span>
		</td>
	</tr>
	<tr>
		<td colspan="5" style="padding: 0px 0px 0px 10px;">
			<span style="font-family: 'Helvetica Neue',Helvetica; font-size: 10px;">19</span>
			<span style="font-family: 'Helvetica Neue',Helvetica">99432-4813</span>	
		</td>
	</tr>
	<tr>
		<td style="padding: 0px 0px 0px 10px;"><a href="http://politicadascidades.com.br/"><img src="http://politicadascidades.com.br/img/assinaturas/icone-browser.png"height="17" width="17" align="center"></a></td>
		<td><a href="https://www.facebook.com/politicadascidades"><img src="http://politicadascidades.com.br/img/assinaturas/icone-face.png"alt="" height="17" width="17" align="center" /></a></td>
		<td><a href="https://www.instagram.com/politicadascidades/"><img src="http://politicadascidades.com.br/img/assinaturas/icone-insta.png"alt="" height="17" width="17" align="center" /></a></td>
		<td><a href="https://twitter.com/politicacidades"><img src="http://politicadascidades.com.br/img/assinaturas/icone-twitter.png"alt="" height="17" width="17" align="center" /></a></td>
		<td><a href="https://www.youtube.com/channel/UCPH6zKPor8s8VRjeruSUnrw"><img src="http://politicadascidades.com.br/img/assinaturas/icone-youtube.png"alt="" height="17" width="17" align="center" /></a></td>
	</tr>
</table>
    
05.05.2017 / 13:05