I made a html email signature, opened it up in browser where it looks fine, and pasted it into my gmail signature section, and each individual block has now got padding in between, and some of the blocks are side by side instead of next to each other.
Strangely by some fluke I managed to get it to look fine on outlook.This is what it's supposed to look like this https://postimg.org/image/uytldx3zd/
Here is the code i'm using- what am I doing wrong?
Any fix would be much appreciated,
Thanks
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->
<title>emailsignature_500flat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (emailsignature_500flat.psd) -->
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href= callto:4411893280328><img src="https://s20.postimg.org/tk69dnist/emailsignature_500flat_01.jpg" width="254" height="50" alt=""><a href= callto:441189328032></td>
<td rowspan="3">
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/o8rcsyrl9/emailsignature_500flat_02.jpg" width="296" height="113" alt=""><a href=http://thereadinesscom.com></td>
</tr>
<tr>
<td>
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/s54ooxx59/emailsignature_500flat_03.jpg" width="254" height="32" alt=""></td>
</tr>
<tr>
<td>
<a href=https://www.linkedin.com/company/129626/><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href=mailto:info#thereadinesscomp.com><img src="https://s20.postimg.org/c6vyytq2l/emailsignature_500flat_05.png" width="550" height="146" alt=""><a href=mailto:info#thereadinesscomp.com></td>
</tr>
<tr>
<td colspan="2">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
I found the following errors in your code.
missing closing anchor tags,
missing colspan
CSS should be inline always
Here is the HTML you need:
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<a href=https://www.linkedin.com/company/1296265><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt="" style="display: block; float: left; padding: 0; " /></a>
</td>
</tr>
</table>
</td>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt="" style="display: block; float: left; padding: 0;">
</td>
</tr>
</table>
Let me know if this works for you.
Related
I'm trying to create an email signature and it looks fine in my web browser.
(https://i.postimg.cc/Pq2v5msd/Email-Right.png)
However, when I add it to Outlook, it creates weird padding around my image cells.
(https://i.postimg.cc/d0qTF5fW/Email-Wrong.png)
I'm not sure what step I'm missing in my code. Can I get some help please?
<html>
<head>
<title>Test Email</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 (Test Email.psd) -->
<table id="Table_01" width="510" height="170" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7">
<a href=https://www.website.com><img src="https://i.postimg.cc/HnQHs6wP/Email-Test-01.jpg" width="159" height="170" alt=""></td>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/BZDJgnrc/Email-Test-02.jpg" width="313" height="79" alt=""></td>
<td>
<a href=https://www.linkedin.com><img src="https://i.postimg.cc/9FYV6NFD/Email-Test-03.jpg" width="38" height="43" alt=""></td>
<td height="43" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.facebook.com><img src="https://i.postimg.cc/VL8mHc1y/Email-Test-04.jpg" width="38" height="43" alt=""></td>
<td height="36" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href="tel:7777777777"><img src="https://i.postimg.cc/rwycMCKQ/Email-Test-05.jpg" width="110" height="29" alt=""></td>
<td rowspan="2">
<a href="mailto:email#email.com"><img src="https://i.postimg.cc/RZPmF6t9/Email-Test-06.jpg" width="203" height="29" alt=""></td>
<td height="7" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.youtube.com><img src="https://i.postimg.cc/QMH3W8g7/Email-Test-07.jpg" width="38" height="42" alt=""></td>
<td height="22" nowrap></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href=https://goo.gl/maps><img src="https://i.postimg.cc/Pq9kWgKR/Email-Test-08.jpg" width="313" height="39" alt=""></td>
<td height="20" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.website.com><img src="https://i.postimg.cc/B6FfMmVQ/Email-Test-09.jpg" width="38" height="42" alt=""></td>
<td height="19" nowrap></td>
</tr>
<tr>
<td colspan="2">
<img src="https://i.postimg.cc/D0KkD19Q/Email-Test-10.jpg" width="313" height="23" alt=""></td>
<td height="23" nowrap></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<div style="background-color:#FFFFFF">
<style>
hr {
height: 1px;
background-color: #9d9d9d;
border: none;
}
div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 1px;
padding-left: 8px;
}
</style>
<body>
<hr>
<span style="font-size:9pt; font-family: 'Cambria','times new roman','garamond',serif; color:#223488;">This email may contain confidential and/or proprietary information. If you are not the intended addressee or have received this email in error, please inform the sender immediately and destroy this email. Unauthorized copying and/or forwarding of this email is strictly prohibited.
</p>
</div>
</body>
</html>
I have a problem when I send an HTML email signature from MS Outlook.
The problem is that the signature adds extra white space between all the elements and content such as text and even the horizontal line below the name.
The code in my HTML file looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<title>Boating World</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
background: #ffffff;
-webkit-text-size-adjust: none
}
/*]]>*/
</style>
</head>
<body style="padding:0 !important; margin:0 !important; display:block !important; background:#ffffff; -webkit-text-size-adjust:none">
<table width="500" height="180" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; width:500px; min-width:500px; margin:0" width="500">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style=" font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px;">
Kind Regards
</td>
</tr>
<tr>
<td height="5" style="font-size: 0px; line-height: 5px;">
</td>
</tr>
<tr>
<td style="font-family:Arial, sans-serif; font-size:16px; color:#002855; font-weight:600; line-height:20px; text-transform:uppercase; font-stretch:semi-expanded;">
<!-- Write your name and surname here -->
ELZAAN STEENKAMP
<!-- End of name -->
</td>
</tr>
<tr>
<td height="10" style="font-size: 0px; line-height: 10px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: none; font-size:0pt; line-height:0pt; text-align:left" height="1" bgcolor="#909090">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="200" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">T:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<a href="#" style="text-decoration:none; color:#444444; cursor:default;">
<!-- Write your landline telephone number here (Please type in same manner "+27 (0)21 418 0840”) -->
+27 (0) 21 418 0840
<!-- end of telephone number -->
</a>
</span>
</td>
</tr>
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">C:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<a href="#" style="text-decoration:none; color:#444444; cursor:default;">
<!-- Write the cellphone number here (Please type in similar manner "+27 (0)82 000 0000) -->
+27 (0) 83 400 3418
<!-- end of telephone number -->
</a>
</span>
</td>
</tr>
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">E:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<!-- To put in your email address, you need to add it twice, once next to where it states mailto: and then below, be careful not to change anything other than the email name. -->
<a href="mailto:accounts#boatingworld.co.za" style="text-decoration:none; color:#444444; cursor:default;">
<!-- End of email address code -->
<!-- Write your email address here as well -->
accounts#boatingworld.co.za
<!-- End of email address -->
</a>
</span>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" width="20" height="20" style="font-size:20px; line-height: 20px;">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="200" align="left" style="display:inline-table;">
<tr>
<td style="line-height:10px">
<img src="https://www.boatingworld.co.za/email_signature/bw_logo.jpg" style="display:block"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" align="left">
<a href="https://www.facebook.com/boatingworld?v=info" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/facebook.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="https://twitter.com/BoatingWorld1" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/twitter.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="https://www.instagram.com/boating.world/" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/instagram.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="http://www.youtube.com/user/BoatingWorldSA1" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/youtube.jpg" />
</a>
</td>
<td width="420" align="left">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight: 600; line-height:18px; text-transform:uppercase;">
<a href="https://www.boatingworld.co.za/" style="text-decoration: none;">
<span style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px; text-transform:uppercase;">
WWW.BOATINGWORLD.CO.ZA
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have tested multiple solutions answered elsewhere on the internet on different forums but to no avail.
Please can someone assist with this as this is for a very important client.
Thanks.
I had the same issue. I solved it by adding below styles for p tag.
p { margin-top: 1px; margin-bottom:1px; margin-left:1px; margin-right:1px; }
I'm working on HTML email template.
I created it with a few nested tables.
I found that there are spaces to the right of the images in Outlook.
So I tried to fix this, but it doesn't fix.
Finally I create a simple template depending on colored images which I create to make it possible identifying the table cells.
Here's my code (Please copy it and test on Outlook):
<!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>HTML Email Design Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
img { padding: 0; margin: 0; display:block;}
</style>
</head>
<body style="margin: 0; padding: 0;" bgcolor="#cccccc">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="600" style="border-collapse: collapse; border: 1px solid #000000;">
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
First Row
</td>
</tr>
<tr>
<td>
<table width="600" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
<tr>
<td width="300" height="600">
<img src="http://2a-web.com/email/test/images/img-01.jpg" width="300px" height="600px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="300" height="600">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="300">
<img src="http://2a-web.com/email/test/images/img-02.jpg" width="300px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="300" height="300">
<table width="300" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="300">
<img src="http://2a-web.com/email/test/images/img-03.jpg" width="150px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="150" height="300" bgcolor="#ffc33c">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="150">
<img src="http://2a-web.com/email/test/images/img-04.jpg" width="150px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="150" height="150" bgcolor="#16b512">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-05.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-06.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
Third Row
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
So, how can I remove the gap between cells ?
I'm appreciating your help.
After taking a look and testing in outlook with your provided HTML, I believe I know what you are experiencing, and it has to due with images.
First off, all the images in your HTML are not available so I had to test with my own images. These is where, I noticed the issue. My images were causing to email to expand beyond the specified width of 600. This is because for outlook if you are going to use width and height attributes for a element, you leave off the px part, it's assumed. I.E. 150 NOT 150px. As soon as I did everything snapped into place, no spacing issue.
I was only able to reproduce the vertical spacing/gapping on the right of the images after I forced one of the bottom images to have an exaggerated width, i.e. it's currently set to 150(same as the containing td), so I set it to 155. And bam! Got the spacing.
Meaning that your table layout/css is fine for the most part, outlook is probably freaking out because you are adding the px part. Either remove it or set the width/height with inline styling instead.
just created one email template for gmail
here is my html code.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance</title>
</head>
<body>
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
it is displaying only 1 image while other images are not displaying..
need help what am i doing wrong ?
If you see the code carefully you posted here; The last image should be inside the table but it has a closing tag only </table>. <table> open tag is missing in Layout.
You need to put the images on a server
<a href="http://www.xxx.net.au/" title="title"><img src="http://www.yourserver.com/images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
Luiggi
If you check your code, the table structure is incorrect. For the first row of image, you have added end tag of table. For 2nd and 3rd row of image, extra tag of </table> is there, which gives the error of not displaying those images. The HTML code will be as below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance</title>
</head>
<body>
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
</td>
</tr>
<tr>
<td>
<img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
</td>
</tr>
<tr>
<td>
<img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Have you tried giving complete URL (ie, http://<your_site_url>/images/top_logo_03.png) to image instead of images/top_logo_03.png??
Please check this code.
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
</table>
Your code is wrong: try it:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance</title>
</head>
<body>
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</body>
</html>
you had misplaced some tags
Looking into your code first of all you can see your table structure is incorrect. Try correcting it.
Secondly you have used relative paths for your images. Try using absolute path for your images.
For Ex-
instead of <img src="images/xyz.gif: />, use <img src="http:""www.example.com/images/xyz.gif">
I am looking to have a picture, name of the person, links to photos, biography, life, tell about you! a map tag where the location will be shown, also at the right, there will be details like like, Born: Nationality: Ocupation, Trakcs:
Can any body help me with a semantic html structure style with CSS Please use http://jsfiddle.net/ to build it online Thanks.
<!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>Your Yard Sales onproducts.line</title>
<link rel="stylesheet" href="" type="text/css" media="screen" />
</head>
<style type="text/css" >
#space {
margin-bottom:1.2em;
}
ul {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
li {
float: left; }
li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
</style>
<body>
<ul>
<li>Home</li>
<li>Members</li>
<li>Rollers</li>
<li>Info</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<div id="space">
Roberto Kirt
</div>
<!--<ul><li>'.$name2.'</li>
<li>'.$name2.'</li>
<li>'.$name2.'</li></ul>-->
<table width="1768" cellpadding="0" cellspacing="0" border="0.5">
<tr>
<td width="493" height="149"><img style="border:#666 1px solid;" src="images/profileimages/8.jpg" alt="Angel Pilier "align="left" width="100" height="130" border="1" /></td>
<td width="1275"><table width="880" border="0.5" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31"> </td><td></td>
</tr>
<tr>
<td height="44" align="right">Born:</td><td width="735">1975-11-23</td>
</tr>
<tr align="right">
<td height="38"></td>
>
</tr>
<tr>
<td height="36" align="right">Died:</td><td width="735">0000-00-00</td>
</tr>
</table></td>
</tr>
<tr><td height="31" colspan="2"> </td></tr>
<tr>
<td height="31">Photos</td>
<td rowspan="7"><table width="885" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31" align="right"> Nationality:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="25"> </td>
</tr>
<tr>
<td height="24" align="right">Spouse:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="28"> </td>
</tr>
<tr>
<td height="27" align="right">Ocupation:</td><td width="740">Pianist</td>
</tr>
<tr align="right">
<td height="27"> </td>
</tr>
<td height="27" align="right">Childhood:</td><td width="740"></td>
</tr>
<tr align="right"><td height="27"> </td>
</tr>
<td height="27" align="right">Tracks:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="119"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"> Biography</td>
</tr>
<tr>
<td height="25"> Life</td>
</tr>
<tr>
<td height="26">Tell an Anecdote</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td><iframe width="700" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Rochester,+New York,+United States&sspn=0.119541,0.110378&ie=UTF8&hq=&hnear=Rochester,+New York,+United States&z=14&output=embed"></iframe></td>
<!--<img src="images/foto.jpg" alt="nada" width="422" height="165" />-->
</tr>
</table>
</body>
</html>
#fello, there lot of things in your layout
1) use external stylesheet as much as possible because if you written your css in the head of html page it's make that html page heavy to load & you have to right new css in every new page.
2) try to avoid using table based structure as much as possible .Use div instead of table because it's flexible to use check this for more.
3)didn't use <br/> to much .If you want to give spacing you can give with margin & padding .
4)ever browser have applied some there own default properties .So, avoid it you have to use reset sheet .
5)for semantic markup check these links :
a) http://www.html-and-css-tutorial.com/tutorial-3.html
b) http://css-tricks.com/snippets/html/html5-page-structure/
c) http://themeshaper.com/2009/06/24/creating-wordpress-theme-html-structure-tutorial/
As far as I judge your question, use of some CSS framework like twitter-bootstrap will give you a very good and responsive layout in very less time :)
You might want to use hcard. This and other microformats are described here.