HTML Email - Is colspan allowed?
Yep. All HTML markup is allowed in most if not all email clients. When it comes to scripting, then you've got an issue to contend with, for scripting is simply not allowed by most if not all email clients.
Colspan will support all email and mobile clients?
Yes colspan works on all email clients if setup properly. This thread may be helpful - it addresses a quirk in Outlook.
I would be cautious using multiple columns in responsive templates though. If you want something to bump down to the next line, or hide on resizing for mobile, then colspans are probably the wrong approach. A colspan cell row won't un-colspan itself, which could be problematic if you are after a single stack for mobile.
Colspan will support all email and mobile clients?
Yes colspan works on all email clients if setup properly. This thread may be helpful - it addresses a quirk in Outlook.
I would be cautious using multiple columns in responsive templates though. If you want something to bump down to the next line, or hide on resizing for mobile, then colspans are probably the wrong approach. A colspan cell row won't un-colspan itself, which could be problematic if you are after a single stack for mobile.
table colspan in emails
You need to put the text and image in two columns (td)
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<tr>
<td align="left">
sdfsdfsdfsdfdsdfhhhhhhhhlklk
sdfsdf
</td>
<td rowspan="3" align="right">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="Sample Image" width="400">
</td>
</tr>
</td>
</tr>
</table>
Table cell width in HTML email does not correspond to width set in HTML or CSS
You need to put colspan="2" in each cell if it is in a row by itself. As you have a row with 2 cells, all rows need to add up to 2.
Also, at the very top of your table you should also put an empty row with 2 cells to enforce the desired widths in Outlook. See this technique for more info
HTML email: top and bottom aligned content
Swap out your CSS vertical-align:top; in the td's for this: <td valign="top">.
valign accepts top|middle|bottom values, while align (horizontal) accepts left|center|right.
For this layout, you will also need either rowspan or a fixed height, as a nested table (your 2 rows of text) will not push to the max height of the container cell.
Here is a basic example of both valign and rowspan applied:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="400" height="200" valign="top" bgcolor="#EEEEEE">Align Top
</td>
<td width="200" rowspan="2" valign="middle" bgcolor="#777777">
<img alt="image" src="" width="200" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="400" height="300" valign="bottom" bgcolor="#CCCCCC">Align Bottom
</td>
</tr>
</table>
It helps to set a height on your rowspanned cells, as Outlook can sometimes guess and mess up your rowspan break points. More info on that here (although it refers to colspan, the same applies)
Horizontal spaces in outlook
It is really bad practice to build an entire email of of images. It doesn't render by default in most email clients, takes a long time to download and also triggers some spam filters because your image to text ratio is so low.
That being said, you are getting the vertical gaps because Outlook doesn't know how wide to make each of your cols when you use a colspan in the first row. See this answer for more information on how to enforce the col widths.
Update - Because you want to vary the widths of your cells, you need to use nested tables instead. You can not change the widths of tables from row to row. Here is an example of how you can construct this entire email with nested tables and without a single colspan:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="98" alt="Sample Image">
</td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="119" alt="Sample Image">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="315" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="38" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="42" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="55" height="91" alt="Sample Image">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="182" height="442" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="418" height="442" alt="Sample Image">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="128" alt="Sample Image">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="315" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="38" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="42" height="91" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="55" height="91" alt="Sample Image">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="79" alt="Sample Image">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="599" height="84" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="1" height="84" alt="Sample Image">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="32" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="140" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="143" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="38" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="42" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="54" height="1" alt="Sample Image">
</td>
<td>
<img border="0" style="display: block;" src="" width="1" height="1" alt="Sample Image">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
As I mentioned before, you should avoid images and use text where text is, not an image of text. Here is an example of how your middle section should look like (the part with the images stacked on the left and text on the right):
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="182" style="padding-bottom:20px;">
<img border="0" style="display: block;" src="" width="182" height="120" alt="Sample Image">
</td>
<td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Text 1
</td>
</tr>
<tr>
<td width="182" style="padding-bottom:20px;">
<img border="0" style="display: block;" src="" width="182" height="120" alt="Sample Image">
</td>
<td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Text 2
</td>
</tr>
<tr>
<td width="182" style="padding-bottom:20px;">
<img border="0" style="display: block;" src="" width="182" height="120" alt="Sample Image">
</td>
<td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Text 3
</td>
</tr>
</table>
Related Topics
Swift: Display HTML Data in a Label or Textview
Drawing Text to <Canvas> with @Font-Face Does Not Work at the First Time
Adding External CSS in an HTML File
What Does It Mean in HTML 5 When an Attribute Is a Boolean Attribute
How to Increase Space Between Dotted Border Dots
Apply Style to Parent If It Has Child With Css
How to Use Radio Buttons in Reactjs
How to Draw a Trapezium/Trapezoid with CSS3
Creating a Zoom Effect on an Image on Hover Using Css
Css3 Border-Radius Clipping Issues
How to Set Relative Path to Current Folder
Setting the Cursor in the Element's Default Styles, or in Element:Hover
Access Iframe Content from a Chrome'S Extension Content Script
Soft Hyphen in HTML (<Wbr> VS. &Shy;)