I created a flyer on Photoshop to send as a newsletter. So I used the slice tool to link certain parts of the flyer. When I sent a sample to my email, there are white lines around the images I linked and it's uneven.
Is there a way to prevent this? The reason I use Photoshop and Dreamweaver is because I have seen people do it and they did have any problems.
I'm using MailChimp to create the newsletter. Here's a sample:
<html>
<head>
<title>centralvet</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 (centralvet.psd) -->
<table id="Table_01" width="600" height="1032" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto 0 auto;">
<tr>
<td colspan="20">
<img src="images/centralvet_01.jpg" width="600" height="30" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/centralvet_02.jpg" width="2" height="743" alt=""></td>
<td colspan="18"><img src="images/centralvet_03.jpg" width="595" height="136" alt=""></td>
<td rowspan="9">
<img src="images/centralvet_04.jpg" width="3" height="1001" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="136" alt=""></td>
</tr>
<tr>
<td colspan="18"><img src="images/centralvet_05.jpg" width="595" height="389" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="389" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><img src="images/centralvet_06.jpg" width="207" height="218" alt=""></td>
<td colspan="14">
<img src="images/centralvet_07.jpg" width="388" height="8" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td>
<img src="images/centralvet_08.jpg" width="6" height="210" alt=""></td>
<td colspan="6"><img src="images/centralvet_09.jpg" width="131" height="210" alt=""></td>
<td colspan="7">
<img src="images/centralvet_10.jpg" width="251" height="210" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="210" alt=""></td>
</tr>
<tr>
<td colspan="17"><img src="images/centralvet_11.jpg" width="466" height="113" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/centralvet_12.jpg" width="131" height="193" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="113" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/centralvet_13.jpg" width="466" height="80" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/centralvet_14.jpg" width="100" height="65" alt=""></td>
<td><img src="images/centralvet_15.jpg" width="52" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_16.jpg" width="6" height="65" alt=""></td>
<td rowspan="2"><img src="images/centralvet_17.jpg" width="51" height="53" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/centralvet_18.jpg" width="8" height="65" alt=""></td>
<td><img src="images/centralvet_19.jpg" width="50" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_20.jpg" width="5" height="65" alt=""></td>
<td><img src="images/centralvet_21.jpg" width="52" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_22.jpg" width="4" height="65" alt=""></td>
<td colspan="2"><img src="images/centralvet_23.jpg" width="53" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_24.jpg" width="4" height="65" alt=""></td>
<td><img src="images/centralvet_25.jpg" width="53" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_26.jpg" width="5" height="65" alt=""></td>
<td colspan="2"><img src="images/centralvet_27.jpg" width="52" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_28.jpg" width="102" height="65" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/centralvet_29.jpg" width="52" height="13" alt=""></td>
<td rowspan="2">
<img src="images/centralvet_30.jpg" width="50" height="13" alt=""></td>
<td rowspan="2">
<img src="images/centralvet_31.jpg" width="52" height="13" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/centralvet_32.jpg" width="53" height="13" alt=""></td>
<td rowspan="2">
<img src="images/centralvet_33.jpg" width="53" height="13" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/centralvet_34.jpg" width="52" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/centralvet_35.jpg" width="51" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="53" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Related
I was putting chess pieces(pawns,images) on my"custom" made chess board, i used 100px image, so i put changed the size to 50px instead and aligned to center. When i did the same with white pawns i noticed that black pawns are noticible bigger than white pawns.
Code(HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css">
<title>Chess</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
</tr>
<!--Added Black Pawns-->
<tr>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
</tr>
<!--Added Black pawns-->
<tr>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
</tr>
<tr>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
</tr>
<tr>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
</tr>
<tr >
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
</tr>
</table>
</body>
</html>
CSS(example.css):
table {
background-color:none;
}
td {
background-color:none;
width:50px;
height:50px;
}
Images downloaded from: https://opengameart.org/content/chess-pieces-and-board-squares
- PNGs, NoShadow, 1x,--> b_pawn, w_pawn
How it looks like: https://pasteboard.co/IW24oTG.png
I ran your code using the images you provided under
JonPablok Cburnett Chess Set/PNGs/No shadow/1x
and was unable to reproduce your problem. It looks like maybe your source images start at a different size? If so, there could be more white space around one of them. Try using the images unaltered.
I am developing a mailer so on my outlook it looks fine but on my Gmail it shows Spacing on the left and right of the image. I used style="display:block" which only removed the spacing at the bottom. How do I remove on the left and on the right?
Here is my code:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" align="center" width="695px">
<tr>
<td align="center"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#677880;">View on the web</span></td>
</tr>
<tr>
<td height="10px"><img src="/images/spacer.gif" height="10" width="1" style="display:block;" border="0" alt="Spacer"/></td>
</tr>
<tr>
<td valign="top" border="0" align="right"><img src="/images/top.jpg" width="695" height="52" border="0" style="display:block;" ></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="695px">
<tr>
<td width="461px" border="0" valign="top" align="right"><img src="/images/father-and-husband.jpg" width="461" height="300" style="display:block;" border="0" ></td>
<td valign="top" width="234px" border="0"><table cellpadding="0" cellspacing="0" border="0" width="234px">
<tr>
<td valign="top" border="0"><img src="/images/life-2-lefe-logo.jpg" width="234" height="131" style="display:block" border="0" alt="Click here to visit our website" title="Click here to visit our website" align="left"></td>
</tr>
<tr>
<td valign="top" border="0"><img src="/images/botton-logo.jpg" width="234" height="169" style="display:block" border="0" align="left"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="695px">
<tr>
<td border="0" valign="top" align="right"><img src="/images/donating-a-kidney.jpg" width="461" height="290" style="display:block;margin:0" border="0" alt="Click here to email us" title="Click here to email us"></td>
<td border="0" valign="top"><img src="/images/right-email.jpg" width="234" height="290" style="display:block" border="0" align="left"></td>
</tr>
</table></td>
</tr>
<tr>
<td border="0" valign="top" align="right"><img src="/images/bottom.jpg" width="695" height="341" style="display:block" border="0"></td>
</tr>
<tr>
<td align="center" valign="center" height="30" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#677880;">If you do not wish to recieve any further email notifications, <a style="color:#ec1c23;" href="{{components.unsubscribe}}" target="_blank">click here to unsubscribe.</a></td>
</tr>
</table></td>
</tr>
</table>
This is my issue, I'm working on a site that I just imported from Photoshop, sliced it up etc. Now I need to center the whole site as a table, but when I set the table width to 100% it doesn't work at all.
Here's the code:
<!DOCTYPE html>
<head>
<title>Design</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 (Design.psd) -->
<table id="Table_01" width="100%" height="1501" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Design_01.gif" width="689" height="210" alt=""></td>
<td>
<img src="images/Design_02.gif" width="173" height="210" alt=""></td>
<td colspan="2">
<img src="images/Design_03.gif" width="135" height="210" alt=""></td>
<td colspan="2">
<img src="images/Design_04.gif" width="209" height="210" alt=""></td>
<td>
<img src="images/Design_05.gif" width="1" height="210" alt=""></td>
<td colspan="6">
<img src="images/Design_06.gif" width="229" height="210" alt=""></td>
<td colspan="2">
<img src="images/Design_07.gif" width="192" height="210" alt=""></td>
<td colspan="4">
<img src="images/Design_08.gif" width="214" height="210" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="210" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_09.gif" width="1842" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_10.gif" width="1842" height="161" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="161" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Design_11.gif" width="48" height="245" alt=""></td>
<td>
<img src="images/Design_12.gif" width="74" height="80" alt=""></td>
<td colspan="17" rowspan="2">
<img src="images/Design_13.gif" width="1598" height="245" alt=""></td>
<td>
<img src="images/Design_14.gif" width="74" height="80" alt=""></td>
<td rowspan="2">
<img src="images/Design_15.gif" width="48" height="245" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Design_16.gif" width="74" height="165" alt=""></td>
<td>
<img src="images/Design_17.gif" width="74" height="165" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="165" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_18.gif" width="1842" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_19.gif" width="1842" height="53" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="53" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="10">
<img src="images/Design_20.gif" width="986" height="504" alt=""></td>
<td colspan="5" rowspan="2">
<img src="images/Design_21.gif" width="324" height="29" alt=""></td>
<td colspan="2" rowspan="6">
<img src="images/Design_22.gif" width="16" height="230" alt=""></td>
<td colspan="6">
<img src="images/Design_23.gif" width="324" height="12" alt=""></td>
<td colspan="3" rowspan="10">
<img src="images/Design_24.gif" width="192" height="504" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Design_25.gif" width="70" height="205" alt=""></td>
<td colspan="3" rowspan="3">
<img src="images/Design_26.gif" width="185" height="161" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/Design_27.gif" width="69" height="205" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/Design_28.gif" width="105" height="188" alt=""></td>
<td>
<img src="images/Design_29.gif" width="115" height="114" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/Design_30.gif" width="104" height="188" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Design_31.gif" width="115" height="74" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Design_32.gif" width="185" height="44" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Design_33.gif" width="324" height="15" alt=""></td>
<td colspan="6">
<img src="images/Design_34.gif" width="324" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Design_35.gif" width="13" height="274" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/Design_36.gif" width="97" height="146" alt=""></td>
<td colspan="4">
<img src="images/Design_37.gif" width="230" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Design_38.gif" width="324" height="217" alt=""></td>
<td colspan="4" rowspan="2">
<img src="images/Design_39.gif" width="230" height="217" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Design_40.gif" width="3" height="128" alt=""></td>
<td colspan="2">
<img src="images/Design_41.gif" width="94" height="73" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/Design_42.gif" width="324" height="55" alt=""></td>
<td colspan="6">
<img src="images/Design_43.gif" width="324" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_44.gif" width="1842" height="323" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="323" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="48" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="567" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="173" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="115" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="103" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="145" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="48" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Setting the table width to 100% does not really center anything.
It sets the table to fill all available space (mind the space for scrollbars).
Since your table cells contain images with a defined width, these images define the (minimum) width for each table cell (and subsequently for each column)
So, if your screen is smaller than the sum total of your images, you will need to scroll horizontally to see the entire result.
In general, if you want to use a table to center your content, nested tables are the simplest way:
<table width="100%">
<tr>
<td align="center">
<table><!-- this is the actual content table -->
<tr>
<td>this is my content</td>
</tr>
</table>
</td>
</tr>
</table>
Hope that helps a bit?
And a side note: Most people will tell you that creating a layout entirely from tables is quite old-fashionned. <div>s and CSS might be a better approach, but i gather you are a beginner?
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
Notice in the following screenshot, there is a white space under image:
I don't understand why there is this gap, how do I remove it. The page is live at http://goo.gl/Kf8FV5
Markup:
<section id="pricing-table">
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="10"> </td>
<td width="760" height="10" colspan="4" align="left" valign="top"><img src="images/membership-plans-design_03.png" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td><img src="images/membership-plans-design_08.png" alt=""></td>
<td><img src="images/membership-plans-design_09.png" alt=""></td>
<td><img src="images/membership-plans-design_10.png" alt=""></td>
<td><img src="images/membership-plans-design_11.png" alt=""></td>
</tr>
</table>
</section>
Css:
#pricing-table { margin: 0 auto; width: 950px; text-align: center;}
.featureset {
background-image: url(images/membership-plans-design_05.png);
background-repeat: no-repeat;
height: 42px;
margin: 0;
padding: 0;
color:#FFF;
}
.featurehead {
background-color:#CCC;
font-weight: bold;
border-bottom: 1px solid grey;
}
Any help is highly appreciated. Thanks in advance.
Images are inline elements, so they have a white space after them (like a <span> element). To remove that white space, change them to block elements like this :
img{
display:block;
}
Change <img src="images/membership-plans-design_03.png" alt=""> to
<img src="images/membership-plans-design_03.png" alt="" style="display: block;">
And to be more precise images are an inline-block element.
Add this to your CSS,
section#pricing-table td img{
display: block;
}
<img> is an inline-block element by default. You can remove the white space around it by setting it's parent's font-size to zero, or by changing it's display property.
JSFiddle Demo
I am developing responsive email for all platforms
In a table I placed 4 images in <TD> and in center <TD> used background color. Further used table collapse for each table.
For your quick reference code is mentioned below:
But issue I am facing in I-Pad and I-phone is there are slight white lines visible with each circle as you can see in below image.
Your help in this regards will be a great favor to me.
Look forward for your answers at your earliest convenience.
<table width="285" border="0" cellspacing="0" cellpadding="0"
style="border-spacing:0; background-color:#f0f0f0;">
<tr>
<td width="5" height="35" ></td>
<td width="35" height="35" align="left" valign="top" ><table width="35" style="border-collapse:collapse;" height="35" border="0" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top"><table width="35" style="border-collapse:collapse;" height="35" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="absbottom" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" style="color:#ffffff;font-size:12px;font-family:Arial;font-weight:bold;text-align:center;" bgcolor="#D50000">1</td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" style="display:block;" width="5" height="23" border="0" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="texttop" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" height="35" style="border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="6" colspan="3" valign="bottom"><img src="white-lotto-tp.jpg" alt="" width="35" height="6" align="absbottom" border="0" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="white-lotto-lt.jpg" border="0" width="5" height="23" alt="" /></td>
<td width="25" height="23" align="center" valign="middle" bgcolor="#000099"><span style="color:#ffffff;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">14</span></td>
<td width="5" height="23" align="left"><img src="white-lotto-rt.jpg" border="0" width="5" height="23" alt="" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="white-lotto-bt.jpg" border="0" width="35" height="6" align="texttop" alt="" /></td>
</tr>
</table></td>
<td width="5" height="35" ></td>
</tr>
</table>
Try a
vertical-align: middle;
in the style attribute of your image element. If that does not work, it would be great to get the complete HTML and an image that shows the issue.