Images are different size - html

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.

Related

White lines appear on newsletter after using Slice Tool

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>

Image stretches unexpectedly in td

I'm just a beginner but I have been working with this problem for hours now.
Applying the image in the td will strech the whole table into a weird size and ruin everything. The table is 500 x 500 and 5 columns and rows, 2 columns are needed for that gif. The gif's size is 200 x 200. But why does it stretch that way ?
Before applying gif:
The code before gif is here:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#264663">
<table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="4" colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
And after:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#264663">
<table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="4" colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
EDIT: I tried removing height="100%" but then this happens:

The 100% height is causing the problem.
<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
As long as your image is square this should work.

Apparently, after hours of trial and error,this works:
Image
`
<head>
</head>
<body bgcolor="#264663">
<table style="table-layout:fixed;width:500px;height:500px;border-collapse:collapse;" bgcolor="#fddab4" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" background="/pics/5to1.jpg" height="100" width="100"></td>
</tr>
<tr>
<td rowspan="4" colspan="2" height="400" width="200"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
</tr>
<tr>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
</tr>
<tr>
<td height="100" width="100"></td>
<td height="200" colspan="2" rowspan="2" width="200" style="background-image:url(/pics/meanwhileatnintendo.gif)">
</td>
</tr>
<tr>
<td height="100" width="100"></td>
</table>
</body>
`
But, I want to know that is there a more effective and shorter way to make the cells keep their sizes even when content is being added!
That was my problem: The cells kept changing size even from adding a single letter in them. Now that I have stated the size of each cell individually, the cells won't resize anymore and that's great! But still, alot of typing needed for such a simple problem. Any other way?

Table doesn't center in website or in dreamweaver

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?

TD rowspan not working

I have the table:
<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70"
height="49" alt=""></td>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410"
height="21" alt="">
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410"
height="29" alt=""></td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195"
height="50" alt=""></td>
</td>
</tr>
</table>
It is supposed to be 3 columns table where second and third td are in one column. However, now it is in 2 columns.

Check your CSS
This prevents you to span:
td { display: inline-block; }
Another case according to Simon_Weaver as per later comment:
{ display: flex}

You used rowspan="2" on the first and last . Rowspan means that this cell spans two rows. If you want the cell to span over two columns in the same row, you have to use the colspan property. Check out the two snippets to see the difference:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
</tr>
</table>

You forgot to close the second <td /> tag.

You might create new table in the TD with 2 rows.
<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70"
height="49" alt=""></td>
<td>
<table width="410">
<tr>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410"
height="21" alt=""></td>
</tr>
<tr>
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410"
height="29" alt=""></td>
</tr>
</table>
</td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195"
height="50" alt=""></td>
</td>
</tr>
</table>

As mpcabd says in their answer, you're missing the </td> tag at the end of the second <td>
However, another issue is that you don't have a 2nd row for the rowspan="2" to go into.
My guess is you're after this...
<table>
<tr>
<td rowspan="2"><img ... /></td>
<td><img .. /></td>
<td rowspan="2"><img .. /></td>
</tr>
<tr>
<!-- Note, you don't need anything here, as the rowspan will take it's place -->
<td><img .. /></td>
<!-- Note, you don't need anything here, as the rowspan will take it's place -->
</tr>
</table>

Try this:
<table>
<tr>
<td rowspan="2">a</td>
<td>b</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
Fiddle:
http://jsfiddle.net/oc9vabvx/

The second image must be on the next line. By the rowspan=2 of the first column it will be added to the second column:
<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70"
height="49" alt=""></td>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410"
height="21" alt=""></td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195"
height="50" alt=""></td>
</tr>
<tr>
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410"
height="29" alt=""></td>
</tr>
</table>

Gaps in email template in Yahoo Mail

I am having a bit of trouble with a gap that appears only in IE (any version) and Yahoo Mail. I trying to create an email template with tables (with one nested table). As you can see in the image, there is a gap at the top and bottom of a TD that houses the header. If I try and view the HTML locally, I don't see the problem in IE so it's when it's inn Yahoo Mail that the issue is present. Other mail clients is fine.
Any help would be great.
Thanks
Screenshot of issue:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Email Template</title>
<style type="text/css">
body {
padding:0;
margin:0;
}
table {
margin:15px auto 50px auto;
}
td hr {
padding:0;
margin:10px;
background-color:rgb(0,13,221);
height:1px;
border:0;
}
td {
font-size:12px;
}
td p {
padding-top:7px;
}
td p a {
color:rgb(0,134,195);
}
td strong {
font-size:13px;
font-weight:900;
color:rgb(0,0,0);
}
.address {
margin-top:50px !important; !important;
font-size:11px;
color:rgb(79,83,87);
}
</style>
</head>
<body>
<table width="690" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, sans-serif">
<tr>
<td rowspan="5" width="20" valign="top">
<img src="#" width="25" height="538" style="background-color:blue;display:block" />
</td>
<td width="650">
<table width="650" border="0" cellpadding="0" cellspacing="0" style="margin:0">
<tbody>
<tr>
<td width="650" height="19" colspan="3" style="background-color:rgb(10,14,43)"></td>
</tr>
<tr style="background-color:rgb(10,13,44)">
<td height="1" width="3%"></td>
<td rowspan="49" width="7%">
<img src="#" width="192" height="72" style="background-color:blue;display:block" />
</td>
<td width="90%"></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,47)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="5"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,18,50)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,19,52)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,22,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,23,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,22,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,21,57)">
<td height="4"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,22,57)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,24,59)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,24,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,24,59)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,61)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,25,63)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,26,64)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,63)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,64)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(15,27,67)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,28,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,29,69)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,30,70)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,29,70)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,30,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,29,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,30,73)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,32,75)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,31,74)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(9,32,74)">
<td height="1"></td>
<td></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(10,31,74)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(11,32,77)"></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(11,34,78)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(13,34,79)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(12,35,79)"></td>
</tr>
</tbody>
</table>
</td>
<td rowspan="5" width="20" valign="top"><img src="#" width="25" height="538" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td width="650" valign="top">
<img src="#" width="650" height="10" style="background-color:blue;display:block" />
</td>
</tr>
<tr>
<td style="padding:0 10px 0 10px">
<p><strong>Headline</strong></p>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3 Link</p>
<p>Text Line 4</p>
<p></p>
<hr />
<p>Text Line 5</p>
<p style="margin-top:80px;font-size:11px;color:rgb(65,65,65);" class="address">Text Line 6</p>
</td>
</tr>
<tr>
<td align="center"><img src="#" width="626" height="68" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td align="right"><p>Text Line 7Link</p></td>
</tr>
</table>
</body>

I didn't test the email in any email clients BUT, i did find the problem occurring in firefox. Using firebug i corrected the problem by adding vertical-align:top on line 20 (the td style)
Just be aware that you may need to use inline styles as some email clients strip out stylesheets whether in the head or body of the document.
Here is a working version: http://jsfiddle.net/ypzA2/