Getting a table to format properly without CSS (HTML mail)

HTML-CSS
1

I’m trying to put an image into an email that has different clickable areas and my only idea was to create a table in Photoshop using slices, but when I export the code and paste it into my email builder, I get some weird spacing results.

This is how I want it to look…

Screenshot 2024-04-18 120940
Screenshot 2024-04-18 120940767×644 77.5 KB

I end up with spaces between all the cells.

For those who don’t know, I can’t use any CSS for this application as Outlook won’t recognize it. I have my cell spacing set to zero in the HTML. Does anybody know why this might be happening?

2

This is how the table looks in the builder (I haven’t linked the images yet).

Screenshot 2024-04-18 121107
Screenshot 2024-04-18 121107770×729 35.9 KB

3

have you checked margin padding and border if they have a value set?

4

Yeah, the code is really simple…

<html>
<head>
<title>image_map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (image_map.psd) -->
<table id="Table_01" width="700" height="600" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="image_map_01.jpg" width="700" height="23" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="image_map_02.jpg" width="335" height="83" alt=""></td>
		<td>
			<img src="image_map_03.jpg" width="365" height="83" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="image_map_04.jpg" width="335" height="90" alt=""></td>
		<td rowspan="2">
			<img src="image_map_05.jpg" width="365" height="137" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="image_map_06.jpg" width="335" height="104" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="image_map_07.jpg" width="365" height="131" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="image_map_08.jpg" width="335" height="147" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="image_map_09.jpg" width="365" height="135" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="image_map_10.jpg" width="335" height="153" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="image_map_11.jpg" width="365" height="91" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
5

try to put the images in, the image of broken image is not a perfect replacement

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.