First of all, way too much y2k table nesting.
Second, I tried like hell to get that white line to disappear. No go. Don't know why. I suspect it has something to do with rowspan and colspan in the next nested table but that may be incorrect.
Anyhow, this renders EXACTLY as your code (including the white line 
) but with a lot less mess:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>#</title>
<style media="all" type="text/css">
table, td {
border-collapse: collapse;
padding: 0px;
margin: 0px;
vertical-align: top;
}
table {
display: block;
}
img {
border: 0px;
display: block;
}
#main {
width: 640px;
margin: auto;
}
#labels {
width: 61px;
}
#content {
width: 191px;
}
#leftcell {
background-image: url('http://s16.postimg.org/gm252smud/content_04_01.jpg');
width: 213px;
}
#rightcell {
background-image: url('http://s16.postimg.org/5ce0ll76p/content_04_04.jpg');
width: 175px;
}
.labels {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 14px;
color: #919191;
padding-top: 8px;
text-align: right;
}
.content {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #3c3c3c;
padding-top: 6px;
padding-left: 18px;
}
.code {
color: #da3024;
}
</style>
</head>
<body>
<table id="main">
<tr>
<td id="leftcell"></td>
<td>
<table id="labels">
<tr>
<td></td>
<td rowspan="2">
<img src="http://s22.postimg.org/h9drw8eal/content_04_02_01.jpg" alt="content_04_02_01" width="61" height="30" />
</td>
</tr>
<tr>
<td colspan="2" class="labels">From:</td>
</tr>
<tr>
<td></td>
<td rowspan="2">
<img src="http://s16.postimg.org/9cgkk389t/content_04_02_02.jpg" alt="content_04_02_02" width="61" height="30" />
</td>
</tr>
<tr>
<td colspan="2" class="labels">To:</td>
</tr>
<tr>
<td></td>
<td rowspan="2">
<img src="http://s16.postimg.org/mungwdkf5/content_04_02_03.jpg" alt="content_04_02_03" width="61" height="31" />
</td>
</tr>
<tr>
<td colspan="2" class="labels">CODE:</td>
</tr>
</table>
</td>
<td>
<table id="content">
<tr>
<td></td>
<td rowspan="2">
<img src="http://s16.postimg.org/byw310zhh/content_04_03_01.jpg" alt="content_04_03_01" width="191" height="30" />
</td>
</tr>
<tr>
<td colspan="2" class="content">Feki</td>
</tr>
<tr>
<td></td>
<td rowspan="2">
<img src="http://s16.postimg.org/l5edob4px/content_04_03_02.jpg" alt="content_04_03_02" width="191" height="30"/>
</td>
</tr>
<tr>
<td colspan="2" class="content">Bobo</td>
</tr>
<tr>
<td></td>
<td rowspan="2">
<img src="http://s16.postimg.org/q7vpj3e05/content_04_03_03.jpg" alt="content_04_03_03" width="191" height="31"/>
</td>
</tr>
<tr>
<td colspan="2" class="content code">123456789</td>
</tr>
</table>
</td>
<td id="rightcell"></td>
</tr>
</table>
</body>
</html>
Now, what you really need to do to get rid of the white line is use the unsliced/undiced version of the image as the background for the entire table. If you don't have that image, stitch together the images you use in your code to come up with it (no, I absolutely will not do it for you). Then your code becomes very much simpler and the white line disappears. The following code should then work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#</title>
<style>
#main {
width: 640px;
margin: auto;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
background-image: url('unsliced image');
}
.labels {
font-style: italic;
font-size: 14px;
color: #919191;
padding-top: 6px;
text-align: right;
width: 274px;
}
.content {
font-size: 17px;
color: #3c3c3c;
padding-top: 6px;
padding-left: 16px;
}
.code {
color: #da3024;
}
</style>
</head>
<body>
<table id="main">
<tr>
<td class="labels">From:</td>
<td class="content">Feki</td>
</tr>
<tr>
<td class="labels">To:</td>
<td class="content">Bobo</td>
</tr>
<tr>
<td class="labels">CODE:</td>
<td class="content code">123456789</td>
</tr>
</table>
</body>
</html>
You will probably have to play around with paddings, etc. to get the text aligned the way you want. Left to right the above is pretty close to original. Top to bottom might need a little work. One of the advantages to this is that it reduces 8 HTTP requests for images to one. That and a lot less code. And it's a lot easier to understand what's happening where.
In an ideal world you wouldn't even use a table for this. Check this out. It also assumes you have an unsliced version of the background image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#</title>
<style>
#main {
width: 640px;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
background-image: url('unsliced image');
}
#labels {
font-style: italic;
font-size: 14px;
color: #919191;
text-align: right;
width: 274px;
float: left;
padding-top: 3px;
line-height: 28px;
}
#content {
font-size: 17px;
color: #3c3c3c;
padding-left: 16px;
float: left;
line-height: 28px;
padding-top: 4px;
}
.code {
color: #da3024;
}
</style>
</head>
<body>
<div id="main">
<div id="labels">
From:<br>
To:<br>
CODE:
</div>
<div id="content">
Feki<br>
Bobo<br>
<span class="code">123456789</span>
</div>
</div>
</body>
</html>
Dangerously close to your original (at least in text placement), no? Play with line-heights, margins, paddings, etc. to get an exact fit.
