Table width of html does not increase as requested for outlook signature

Asked

Viewed 176 times

0

I need to do a signature in html and css for outlook and need to have a width of at most 320px for adjustment on mobile phones, I did so but the width I ask does not stay, someone can help me, I never used table so I may 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>

html css

  • Wouldn’t it be the case to decrease the font then? If you put the font size in 20px gets as you want...

2 answers

0

I got guys, I made a merge between the columns and rows 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>

0

In order for it to maintain the correct ratio on mobile, you need to fix the header, you can do this by inserting the meta tag below:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Browser other questions tagged html css

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