HI ,
I am getting Gap(some white space) between the <HR> & <TABLE> tags in IE6. But the same code is working differently in IE8 & FF. Here is the my sample code.
<!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=ISO-8859-1">
<title>Insert title here</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="display: inline; height: 100%;" id="printdiv">
<table width="70%" id="Tableprint">
<tbody>
<tr>
<td style="padding-left: 15px;">
<table width="100%" style="border: 0px solid rgb(204, 204, 204);">
<tbody>
<tr>
<td nowrap="" colspan="2">
<span class="formLabel">dev site</span>
<span class="bodyText">Transfer Secure </span></td>
</tr>
<tr>
<td nowrap="" align="left" width="50%" valign="bottom">
<span><b>Current Date:Wednesday, 02 Mar 2011, 01:42 IST</b></span>
<span><b>Report Date</b></span>
<span>Wednesday,20 Oct 2010</span></td>
<td align="right" valign="bottom">
<input type="button" id="Buttoncancel" value="BACK">
</td>
</tr>
</tbody>
</table>
<hr align="left" width="100%">
<table cellspacing="0" width="100%" style="border: 1px;">
<thead>
<tr>
<td style=" width: 10%; padding-left: 5px;"><b>Column1</b></td>
<td align="right" style="padding-bottom: 3px; font-weight: bold;">Credit</td>
</tr>
</thead>
</table>
<hr align="left" width="100%">
<div id="Footer">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="right">Test Data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If I add the following style then I am getting space in IE 8 & FF but the problem is in IE 6 I am seeing extra space around the <HR>
hr {
margin-bottom: 7px;
margin-top: 7px;
}
Please Help me in this.
Thanks in Advanceenter code here
Add this CSS:
table, tr, td, hr {
line-height: 1.15;
}
hr {
clear: both;
display: block;
*margin: -7px 0; /* ie7 and below */
}
This helped me, but the site isn't working properly, so here's a cached link.
Related
I have a problem.
I'm using Node.JS nodemailer.
const url = `${url}`;
var mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: 'Please click this email to confirm your email: ${url}`'
};
The HTML is quite long. So I would have to link each line with
'Line1' +
'Line2' +
and unfortunately the uplines are shown an error see: align = 'center'
Is there a way to embed this HTML file simply and easily?
And if I can include the file separately I have created a variable and this should then be displayed in HTML. How would that work?
Can I somehow embed the file differently than directly in the code? I appreciate help!
This is my html
<!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>[SUBJECT]</title>
<style type="text/css">
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.tableContent img {
border: 0 !important;
display: block !important;
outline: none !important;
}
a{
color:#382F2E;
}
p, h1{
color:#382F2E;
margin:0;
}
p{
text-align:left;
color:#999999;
font-size:14px;
font-weight:normal;
line-height:19px;
}
a.link1{
color:#382F2E;
}
a.link2{
font-size:16px;
text-decoration:none;
color:#ffffff;
}
h2{
text-align:left;
color:#222222;
font-size:19px;
font-weight:normal;
}
div,p,ul,h1{
margin:0;
}
.bgBody{
background: #ffffff;
}
.bgItem{
background: #ffffff;
}
#media only screen and (max-width:480px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
td[class="left_pad"]
{
padding-left:15px !important;
padding-right:15px !important;
}
}
#media only screen and (max-width:540px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
.font {
font-size:18px !important;
line-height:22px !important;
}
.font1 {
font-size:18px !important;
line-height:22px !important;
}
}
</style>
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ffffff",
"link":"382F2E",
"color":"999999",
"bgItem":"ffffff",
"title":"222222"
}
</script>
</head>
<body paddingwidth="0" paddingheight="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
<table bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent" align="center" style='font-family:Helvetica, Arial,serif;'>
<tbody>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="MainContainer">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="40"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- =============================== Header ====================================== -->
<tr>
<td height='75' class="spechide"></td>
<!-- =============================== Body ====================================== -->
</tr>
<tr>
<td class='movableContentContainer ' valign='top'>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" align="center" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#222222;'><span class="specbundle2"><span class="font1">Welcome to </span></span></p>
</div>
</div></td>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#DC2828;'><span class="font">[CLIENTS.COMPANY_NAME]</span> </p>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign='top' align='center'>
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img src="images/line.png" width='251' height='43' alt='' data-default="placeholder" data-max-width="560">
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height='55'></td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<h2 >Will this be your welcome email?</h2>
</div>
</div>
</td>
</tr>
<tr><td height='15'> </td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p >
Here’s what you can say: Thanks again for signing up to the newsletter! You’re all set up, and will be getting the emails once per week. Meanwhile, you can check out our <a target='_blank' href='#' class='link1' >Getting Started</a> section to get the most out of your new account.
<br>
<br>
Have questions? Get in touch with us via Facebook or Twitter, or email our support team.
<br>
<br>
Cheers,
<br>
<span style='color:#222222;'>Peter Parker</span>
</p>
</div>
</div>
</td>
</tr>
<tr><td height='55'></td></tr>
<tr>
<td align='center'>
<table>
<tr>
<td align='center' bgcolor='#1A54BA' style='background:#DC2828; padding:15px 18px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<a target='_blank' href='#' class='link2' style='color:#ffffff;'>Activate your Account</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height='20'></td></tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height='65'>
</tr>
<tr>
<td style='border-bottom:1px solid #DDDDDD;'></td>
</tr>
<tr><td height='25'></td></tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p style='text-align:left;color:#CCCCCC;font-size:12px;font-weight:normal;line-height:20px;'>
<span style='font-weight:bold;'>[CLIENTS.COMPANY_NAME]</span>
<br>
[CLIENTS.ADDRESS]
<br>
<a target='_blank' href="[FORWARD]">Forward to a friend</a><br>
<a target="_blank" class='link1' class='color:#382F2E;' href="[UNSUBSCRIBE]">Unsubscribe</a>
<br>
<a target='_blank' class='link1' class='color:#382F2E;' href="[SHOWEMAIL]">Show this email in your browser</a>
</p>
</div>
</div></td>
<td valign="top" width="30" class="specbundle"> </td>
<td valign="top" class="specbundle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign='top' width='52'>
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/facebook.png" width='52' height='53' alt='facebook icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
<td valign="top" width="16"> </td>
<td valign='top' width='52'>
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/twitter.png" width='52' height='53' alt='twitter icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td height='88'></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="40"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You could simply keep your template-html in a file and use an arbitrary js-templating library (e.g. ejs) to parse the template data and render its html. Something like this should help you get started:
In your app.js do the following:
const fs = require('fs');
const eis = require('ejs');
const template = fs.readFileSync("/path/to/your/template.ejs");
const templateData = { url: `${url}`, otherDataYouNeedToSetInTemplate: "here" };
const renderedHtml = ejs.render(template, templateData};
const mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: renderedHtml
};
Then in your template.ejs you can access the properties from templateData and set its values in the html:
<!DOCTYPE html>
<html>
....
Please click this email to confirm your email: <%= url %>`
....
</html>
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive email</title>
<style type="text/css">
body {margin: 10px 0; padding: 0 10px; background: #F9F2E7; font-size: 13px;}
table {border-collapse: collapse;}
td {font-family: arial, sans-serif; color: #333333;}
#media only screen and (max-width: 480px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image img {
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="640" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF" style="font-size: 0; line-height: 0; padding: 0 0;" height="140" align="center" class="responsive-image">
<img src="SplashScreen_WithRMBLogo_Font48_36_AgencyFB.png" width="660" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td style="padding: 10px 10px 20px 10px;">
<div style="font-size: 20px;">Hey guys,</div>
<br />
<div>
Here is the summary report
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="1" bgcolor="#F9F9F9"> </td></tr>
<tr><td style="font-size: 0; line-height: 0;" height="30"> </td></tr>
<tr>
<td>
<div style="max-height: 300px; max-width: 640px; width: 640px; overflow-x: auto; overflow-y: auto">
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Hello</div>
<div>
Hello moto 1111111111111111111111111111111111111111111111111
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Ask</div>
<div>
How are you moto 22222222222222222222222222222222222222222222222222222222
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="display:inline-table">
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td style="padding: 0 10px 0 10px;">
<div style="font-weight: bold; font-size: 16px;">Moto Answer</div>
<div>
Cool thanks moto 33333333333333333333333333333333333333333333333333333
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</table>
</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td bgcolor="#A89C83">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
<tr>
<td style="padding: 0 10px; color: #FFFFFF;">
v1 Report
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Here is the code in jsfiddle: http://jsfiddle.net/nq3Re/124/
How do I get the three tables to be stacked horizontally? Currently they stack vertically.
The number of tables need not be just three, it could be N.
The solution to display HTML tables adjacent to each other without having them wrap but rather have a horizontal scroller come up.
CSS:
div.container {
display: inline-block;
}
HTML:
<div style="white-space:nowrap">
<div class="container">
<table border="2">
<tr>
<td>test 1 111111111111111111111111111111111111111</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 2 22222222222222222222222222222222222222</td>
</tr>
</table>
</div>
<div class="container">
<table border="2">
<tr>
<td>test 3 33333333333333333333333333333333333333333333</td>
</tr>
</table>
</div>
</div>
The important thing is to float the inner divs by using display: inline-block. The outer (or wrapper) div must have a white-space:nowrap
This is what the result looks like: https://jsfiddle.net/9k8ns73f/
Display them as inline-block:
<div class="container" style="display: inline-block"></div>
This can easily be done with floated divs:
CSS:
div.container {
float: left;
box-sizing: border-box;
text-align: center;
}
HTML
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
<div class="container">
<!-- Table or even just content here -->
</div>
You can add whatever necessary css to .container... you can also add additional css classes to each individual div if needed.
Here is the Fiddle:
I have a problem with Internet Explorer 9 and fixed height of a td
I need a td with 5px height but in IE9 its bigger than 5px.
In Chrome, Firefox and Safari it works
I tried with a transparent 1px gif to insert in the td, I set the font-size: 0px; line-height: 0px and it still won't work.
My test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.space{
height: 5px;
width: 5px;
font-size: 0px;
line-height: 0px;
background: none;
}
table{
border-spacing: 0px;
table-layout: fixed;
}
td{
background-color: red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1200px;">
<tr >
<td rowspan="5"> test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td rowspan="5"> test2<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td> test3</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
</table>
</body>
</html>
I have two images:
Chrome (working):
IE9:
You can place a div inside the td with a height of 5px. http://jsfiddle.net/aCrbz/3/
<td><div class="foo"></div></td>
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.