I’m fairly new to HTML and i’m trying to fix an email for my job.
the images in my table keep expanding way past their 150px width limit. Which distords the entire email.
<code><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" alt="">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" alt="">
</a>
</td>
</tr>
</tbody>
</table>
</code>
<code><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" alt="">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" alt="">
</a>
</td>
</tr>
</tbody>
</table>
</code>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" alt="">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" alt="">
</a>
</td>
<td align="center">
<a href="x">
<img style="max-width:150px;" src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" alt="">
</a>
</td>
</tr>
</tbody>
</table>
I tried messing whit the possition of the max-width property.
href left empty to avoid spam filter
New contributor
Kay Bouman is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Some email clients like Outlook will display images at native resolution unless you specify at least a width or height value. Here’s a solution that applies width="150" height="53" for desktop and style="max-width:150px; width:100%; height:auto;" mostly for mobile clients.
<code><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
</tr>
</tbody>
</code>
<code><table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
</tr>
</tbody>
</code>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
<td align="center">
<a href="x">
<img src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" alt="" width="150" height="53" style="max-width:150px; width:100%; height:auto;">
</a>
</td>
</tr>
</tbody>
New contributor
polymath33 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.