Colspan trouble

HTML & CSS
1

Hi all,

Im in the process of coding an email and having trouble with this little piece of code, basically this table has 3 table rows, I added a colspan into the middle row to span 2 <td> but this is thowing off the 3rd <tr> and Im not quite sure how to fix it, if anyone could help that would be great, here is the code:


				<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="white" style="border-collapse: collapse;"> 
					<tbody>
					
					
					<tr>
						<td valign="top" align="left" width="185" style="padding: 0; margin: 0;">
							<a href="#"><img src="images/main-logo.jpg" alt="" width="185"  style="font-weight: bold; font-size: 24px; color:#004D43; text-align: left;"></img></a>
						</td>			
						<td valign="top" width="415" align="right" style="padding: 0; margin: 0;">
							<img src="images/banner1.jpg" alt="" width="415"></img>
						</td>			
					</tr>
					
					<tr>
						<td valign="top" align="left" width="600" style="padding: 0; margin: 0;" colspan="2">
							<img src="images/banner2.jpg" alt="" width="600"></img>
						</td>		
					</tr>
					
					<tr>
						<td valign="top" align="left" width="365" style="padding: 0; margin: 0;">
							<img src="images/banner3.jpg" alt="" width="365"></img>
						</td>			
						<td valign="top" width="235" align="right" style="padding: 0; margin: 0;">
							<a href="#"><img src="images/view-btn.jpg" alt="" width="235" style="font-weight: bold; text-align: right; color: #ea4330; font-size: 24px;"></img></a>
						</td>			
					</tr>
					
					
					
					</tbody>
				</table>

Thanks
Kyle

2

I have just replaced the images with background colours and they seem to work fine?


<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="white" style="border-collapse: collapse;">
					<tbody>
					
					
					<tr>
						<td valign="top" align="left" width="185" height="200px" bgcolor="red" style="padding: 0; margin: 0;">
							
						</td>			
						<td valign="top" align="right"  width="415" height="200px" bgcolor="blue" style="padding: 0; margin: 0;">
							
						</td>			
					</tr>
					
					<tr>
						<td valign="top" align="left" width="600" align="right" height="200px" bgcolor="green" style="padding: 0; margin: 0;" colspan="2">
							
						</td>		
					</tr>
					
					<tr>
						<td valign="top" align="left" width="365" height="200px" bgcolor="pink" style="padding: 0; margin: 0;">
							
						</td>			
						<td valign="top" align="right"  width="235" height="200px" bgcolor="orange" style="padding: 0; margin: 0;">
							
						</td>			
					</tr>
					
					
					
					</tbody>
				</table>
3

The example with coloured backgrounds isn’t working how it looks like you think you’ve told it to. The cells in the top row are the same widths as the cells in the bottom row, although you’ve actually asked for them to be different. But when you put images in the cells, it highlights the fact that they don’t all fit.

What you need to do is to have a 3-column table, and have colspans like this:

4

Hi Stevie,

I was so focused on the cells falling into place I forgot that the bottom row had different widths lol thanks for the spot!

I understand what you mean on the 3 column table, will get that fixed now

Thanks!

5

Just be aware that that probably won’t work properly in IE9, as I recently discovered:

To sum it up, unless you give IE9 a dummy first <tr> that actually contains 3 <td>'s, with no colspan’s, the result will be a bit of a mess. The <td>'s can be empty, of course. That’s actually in accord with the standards, though no other browser takes the standard quite so literally.

6

Hi Guys,

Im sorry but I just cant get my head around how these colspans are supposed to work, Iv added in the colspans based on the image provided by Stevie but my results arent changing

<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="white" style="border-collapse: collapse;">
					<tbody>
					
					
					<tr>
						<td valign="top" width="185" height="200px" bgcolor="red">
							
						</td>			
						<td valign="top" width="415" height="200px" bgcolor="blue" colspan="2">
							
						</td>			
					</tr>
					
					<tr>
						<td valign="top" width="600" height="200px" bgcolor="green" colspan="3">
							
						</td>		
					</tr>
					
					<tr>
						<td valign="top" width="365" height="200px" bgcolor="pink" colspan="2">
							
						</td>			
						<td valign="top" width="235" height="200px" bgcolor="orange">
							
						</td>			
					</tr>
					
					
					
					</tbody>
				</table>
7

Hi Kyle,
did you run your version with images through the validator?

I copied your one with colours and it looks ok.

But the first version of code you posted was
<a href=“#”><img src=“images/main-logo.jpg” alt=“” width=“185” style=“font-weight: bold; font-size: 24px; color:#004D43; text-align: left;”></img>

Img are empty elements, and closing tags on them are forbidden (unless you’re using XHTML and want to use a closing slash, but browsers ignore that slash either way).

8

Hi Stomme,

Im not totally sure why I decided to start adding </img> tags to the images :s moment of madness i suppose! Table layout is something Iv never really approached and i just cant seem to get my head round how colspan works!

9

If you take the widths off the colspan cells, and just leave them on the cells that are sitting alone, that works (in IE8 at least). Also note that dimensions in HTML are automatically in px, and you don’t need to (shouldn’t?) specify the px; that’s only when you are using CSS.

10

Hi Stevie,

YEah left those px in accidently, took the widths off those colspans and they seem to work fine in ff etc, not sure how theyll look when email testing but thanks!!

Kyle

11

Hey Kyle:
If you haven’t run into Campaign Monitor’s E-mail templates you might really love them. Easier to change an existing table than make your own, and they’ve been tested in a bunch of the most-used email clients.