I'm thinking this should be simple but I'm having massive problems getting something to work.
I basically want to create a table with a cell of fixed width which brings in data from a database whilst preserving line breaks and wraps the text should it be wider than the table width. It's for a helpdesk notification so the text could be details or a request or a link to a particular website etc.
<!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 content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 14px">
<table style="width: 700px; border: 20px solid #00AB66;table-layout:fixed">
<tr>
<td style="text-align: center">LOGO</td>
</tr>
<tr>
<td bgcolor="#000000" style="text-align: center; color: #FFFFFF; font-size: 18px">
Review Request</td>
</tr>
<tr>
<td>Dear XXXX<br />
The Service desk have xxxxx</td>
</tr>
<tr>
<td bgcolor="#000000" style="color: #FFFFFF; text-align: center; font-size: 18px">
Request Summary</td>
</tr>
<tr>
<td>
<table style="width: 100%;table-layout:fixed">
<tr>
<td style="text-align: right; width: 158px">ID:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Title:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px"><strong>Description</strong></td>
<td>
<pre style="font-size:14px;font-family:'Trebuchet MS';word-break:break-all;white-space: pre; width:75%">
dfdsfdsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</pre></td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Requested By:</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Review Instructions:</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
The template should support outlook and web based email like office 365. This is what currently happens.
With the white-space:pre-wrap in as instructed, the preview in expression web is this. Could it be the tool which is the issue?
Removing the <pre> and moving the inline styling to the nested <td> fixed this for me as well as removing the inline styling white-space: pre; fixed this for me.
Testing this section with a 144 character fake word is also bound to cause issues when you test an email since some devices wont break that into hyphens for multiple lines.
You may also want to consider using spacers for the sides to maintain consistency.
Related
I'm trying to put together some email signatures but am running in to issues when sending from outlook to gmail. Sending the signature from gmail to outlook looks good - and the signature looks good in the outlook client. BUT as soon as the email is sent from outlook to gmail it adds spacing and messes things up a little. I've done some research and tried to implement fixes but no luck as of yet.
Here is the email displaying correctly in outlook: and here it is displaying incorrectly once recieved by gmail
Weird thing is it works fine when sending from gmail, so something must be happening when along the way from outlook > gmail. Any tips would be greatly appreciated! I know my code isn't great, just a graphic designer battling my way through email styling!
UPDATE: It seems that this code in gmail is the issue, is there any way of overwriting this?IMAGE
Code below:
<head>
<style>
span, p, td, tr {color:#24406d; line-height: 90%;mso-line-height: taro-papo; font-family: Helvetica, Arial, sans-serif;}
</style>
</head>
<html>
<body>
<table bgcolor="#ffffff" style="width: 320px; background: white;">
<tr><td><hr></td></tr>
<td><span style="font-size: 22px; font-weight: 600;">Name Nameson</span></td></tr>
<tr><td><span style="text-transform: uppercase; font-size: 14px;">Customer Service Manager</span></td></tr>
<tr><td><hr></td></tr>
<tr><td><span style="font-weight: 600;">P.</span> <span>07 1111 1111</span></td></tr>
<tr><td><span style="font-weight: 600;">M.</span> <span>0401 111 111</span></td></tr>
<tr><td><span style="font-weight: 600;">E.</span> <span>test#venetablinds.com.au</td></tr>
<tr><td><span style="font-weight: 600;">A.</span> <span>13/14 Argyle St, Albion QLD 4010</td></tr>
<tr><td><span style="font-weight: 600;">W.</span> <span>www.venetablinds.com.au</p></td></tr>
<tr><td><img src="https://drive.google.com/uc?id=1xze-aa3lvrf6Rrvl0Krb5G2sfVA2LZFm" width="320px"></tr>
<tr><td><span style="white-space: nowrap;">
<a><img src="https://drive.google.com/uc?id=1jiViwT0NnYrNSeUbfjh1RwbyMfL4IACa"></a>
<a><img src="https://drive.google.com/uc?id=1S1wRD6Fqx8MqDu0RlCYauhgWiBMVCLyo"></a>
<a><img src="https://drive.google.com/uc?id=18yiUbFJ4NAapVLkMBBrAvo-HrQFNZ6-e"></a></td></span></tr>
</span>
</table>
</body>
</html>
Can you please check the below code? Hope it will work for you. You have to give cellpadding="0" and cellspacing="0" in table and we have change your HTML structure for desired output.
Please refer to this link: https://jsfiddle.net/yudizsolutions/rhL0p7nw/3/
<html>
<head>
<style>
span,
p,
td,
tr {
color: #24406d;
line-height: 90%;
mso-line-height: taro-papo;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width: 320px; background: white;">
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td><span style="font-size: 22px; font-weight: 600;">Name Nameson</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="text-transform: uppercase; font-size: 14px;">Customer Service Manager</span></td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td><span style="font-weight: 600;">P.</span> <span>07 1111 1111</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">M.</span> <span>0401 111 111</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">E.</span> <span>test#venetablinds.com.au</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">A.</span> <span>13/14 Argyle St, Albion QLD 4010</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">W.</span> <span>www.venetablinds.com.au</span></p>
</td>
</tr>
<tr>
<td><img src="https://drive.google.com/uc?id=1xze-aa3lvrf6Rrvl0Krb5G2sfVA2LZFm" width="320px">
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<a><img src="https://drive.google.com/uc?id=1jiViwT0NnYrNSeUbfjh1RwbyMfL4IACa"></a>
<a><img src="https://drive.google.com/uc?id=1S1wRD6Fqx8MqDu0RlCYauhgWiBMVCLyo"></a>
<a><img src="https://drive.google.com/uc?id=18yiUbFJ4NAapVLkMBBrAvo-HrQFNZ6-e"></a>
</td>
</tr>
</table>
</body>
</html>
Please check resulted image:
In a HTML-Table I have several columns, sortable by JavaScript. One column gets filled by numbers like 23, 61, 23 etc. and I would like to add some text after the numbers, which shall be used for sorting.
The numbers shall be visible <Font-Size=8> but the text behind shall have Size=0, in order not to increase the column with. My trials don't work, the text is still visible here:
<HTML>
<HEAD>
<TITLE>sortable table</TITLE>
<SCRIPT src="SortTable.js"></SCRIPT>
</HEAD>
<BODY>
<TABLE CLASS=sortierbar BORDER=1 WIDTH=100% SOLID=1 STYLE='font-size:10pt; empty-cells:show;'>
<THEAD>
<TR>
<TH CLASS=sortierbar WIDTH=8%>Idx - Id</TH>
<TH CLASS=sortierbar WIDTH=3%>Grid</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1 - 2630194544</TD>
<TD>2015-01-01 2268 </TD>
<TD>2021-02-25T18:26:05Z</TD>
<TD STYLE=text-align:center>23<font size=0><I>Walter"</I></font></TD>
</TR>
<TR>
<TD>2 - 9570194548</TD>
<TD>2015-01-01 2268 </TD>
<TD STYLE=text-align:center>62<font size=0><I>Peter</I></font></TD>
</TR>
<TR>
<TD>3 - 2630194548</TD> <TD>2015-01-01 2268 </TD>
<TD STYLE=text-align:center>23<font size=0><I>Susan</I></font></TD>
</TR>
</BODY>
</HTML>
my working solution: Created a new entry in the relevant CSS, there size=0 works:
H9
{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0pt;
font-weight: normal;
font-style: normal;
margin-top: 0pt;
margin-bottom: 0pt;
text-decoration:none;
background-color: transparent;
color: #0F408D}
So I'm trying to center my webpage but it doesn't seem to be working. I can get it to work for Internet Explorer but only when I'm accessing it while it's stored on a server. When it's stored locally, it isn't centered. In any case, it's never centered in Firefox or Chrome. Could someone take a look at my code and see if they have any solutions?
Sorry if the code is messy. Any cleanup tips would be appreciated as well :)
I used Dreamweaver CC.
<!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>Text</title>
<style type="text/css">
body {
background-image: url(images/image.jpg);
background-repeat: repeat;
font-family: "French Script MT";
display: table-cell;
vertical-align: middle;
position: relative;
color: #B9AB90;
}
.Memories {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18pt;
color: #360D11;
}
.Text {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #7A2500;
font-style: normal;
font-weight: bold;
}
.Bottom {
font-family: Tahoma, Geneva, sans-serif;
color: #000000;
}
.SessionMain {
color: #170C03;
font-family: special-elite;
font-style: normal;
font-weight: 400;
font-size: 24pt;
}
.SessionHead {
color: #4C3223;
font-family: ewert;
font-style: normal;
font-weight: 400;
font-size: 40pt;
vertical-align: middle;
text-align: center;
}
</style>
<meta name="keywords" content="test, test2" />
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/spicy-rice:n4:default;special-elite:n4:default;ewert:n4:default.js" type="text/javascript"></script>
</head>
<body background="image.png">
<p><a name="Top" id="Top"></a></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="70"> </td> <!-- Width here will set how far from the left the page is -->
<td><div align="center">
<table width="1030" border="0" cellpadding="0">
<tr>
<td height="87"><div align="center">
<table width="629" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" style="font-size: 46px; color: #4C3223;"><strong>Text</strong></div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
<div align="center">
</div>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="73"> </td>
<
<td width="629" height="87"><div align="center">
<table width="1020" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" class="SessionHead" style="font-size: 46px; color: #4C3223;">Text</div></td>
</tr>
</table>
</div>
<div align="center"></div></td>
<td> </td>
</tr>
</tbody>
</table>
</p>
<table width="100%" border="4" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="1364">
<p> </p>
<p> </p>
</td>
</tr>
</tbody>
</table> <p> </p>
<p> </p>
<p> </p>
<div align="center">
<table height="95" width="1016" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
<td width="986" height="18" bgcolor="#2E190B"> </td>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
</tr>
<tr>
<td height="77" bgcolor="#DFB47F"><table width="97%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="2%"> </td>
<td width="98%"><p class="Bottom"><a href="#Top">Back To Top</p>
<p class="Bottom">Last Updated: Sunday, January 4, 2015 10:42 AM</p></td>
</tr>
</tbody>
</table></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</td>
</tr>
</tbody>
</table>
</html>
Update your body style to the following (Remove display: table-cell and add width and margin properties):
body {
background-image: url(images/image.jpg);
background-repeat: repeat;
font-family: "French Script MT";
vertical-align: middle;
position: relative;
color: #B9AB90;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
Code Snippet:
<!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>Text</title>
<style type="text/css">
body {
background-image: url(images/image.jpg);
background-repeat: repeat;
font-family: "French Script MT";
vertical-align: middle;
position: relative;
color: #B9AB90;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.Memories {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18pt;
color: #360D11;
}
.Text {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #7A2500;
font-style: normal;
font-weight: bold;
}
.Bottom {
font-family: Tahoma, Geneva, sans-serif;
color: #000000;
}
.SessionMain {
color: #170C03;
font-family: special-elite;
font-style: normal;
font-weight: 400;
font-size: 24pt;
}
.SessionHead {
color: #4C3223;
font-family: ewert;
font-style: normal;
font-weight: 400;
font-size: 40pt;
vertical-align: middle;
text-align: center;
}
</style>
<meta name="keywords" content="test, test2" />
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/spicy-rice:n4:default;special-elite:n4:default;ewert:n4:default.js" type="text/javascript"></script>
</head>
<body background="image.png">
<p><a name="Top" id="Top"></a></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="70"> </td> <!-- Width here will set how far from the left the page is -->
<td><div align="center">
<table width="1030" border="0" cellpadding="0">
<tr>
<td height="87"><div align="center">
<table width="629" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" style="font-size: 46px; color: #4C3223;"><strong>Text</strong></div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
<div align="center">
</div>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="73"> </td>
<
<td width="629" height="87"><div align="center">
<table width="1020" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" class="SessionHead" style="font-size: 46px; color: #4C3223;">Text</div></td>
</tr>
</table>
</div>
<div align="center"></div></td>
<td> </td>
</tr>
</tbody>
</table>
</p>
<table width="100%" border="4" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="1364">
<p> </p>
<p> </p>
</td>
</tr>
</tbody>
</table> <p> </p>
<p> </p>
<p> </p>
<div align="center">
<table height="95" width="1016" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
<td width="986" height="18" bgcolor="#2E190B"> </td>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
</tr>
<tr>
<td height="77" bgcolor="#DFB47F"><table width="97%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="2%"> </td>
<td width="98%"><p class="Bottom"><a href="#Top">Back To Top</p>
<p class="Bottom">Last Updated: Sunday, January 4, 2015 10:42 AM</p></td>
</tr>
</tbody>
</table></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</td>
</tr>
</tbody>
</table>
</html>
Working fiddle
Remove display: table-cell from body
add new class inside body closing before </body>
.center-all {
margin: 0 auto;
width: 1030px;
}
Markup Validation Service
This validator examines markup for validity of Web documents in HTML,
XHTML etc
Note that you have so many syntax errors like </table> is not closing, </body> is closing inside table. You need to validate your HTML to fix HTML issues. So many compatibility errors are due to invalid HTML.
"Sorry if the code is messy." Indeed, like patricksweeney said start to clean your code :
your "body" balise end in the middle of nowhere !!!
you use the "table" balise everywhere for no reason
etc
I think the best thing to do right now is to start a new tuto and learn html/css step by step...
(PS : delete the "display: table-cell;" in body css to center the page.)
I have a webpage I was trying to develop, but I can't figure out what the problem is with the layout. The page goes all out of shape and out of width when I include the code below.
This particular code comes out well when viewed on a browser, but when I want to add another row BETWEEN the people picture and the RED Footer, everything breaks
<!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>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; width: 600px;" align="center">
<tr>
<td bgcolor ="#e4322d" valign="top" width="437" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td align="left" valign="top" width="14"> </td>
<td valign="top" width="151"><img src="premises.png" alt="" border="0" height="107" width="150" /></td>
</tr>
<tr>
<td align="center" colspan="3" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;">
<img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg">
<p />
</td>
</tr>
<!--I WANT THE COLUMN HERE-->
<tr>
<td bgcolor ="#e4322d" colspan="7" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br />
info#mywebsite.com
</span></p>
</td>
</tr>
</table>
</body>
</html>
Here's the code I want to insert in between the People image and the red footer.
<tr>
<td>
<table>
<tr>
<td>
<img src="premises.png" align="center" width="120px" height="128px"/>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tr>
<td> We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.
</td>
</tr>
</table>
</td>
</tr>
Here's the images of what they look like:
The last piece of code produces this image - which is what I want to insert in the page between the people picture and the red footer.
Update: Here's what the page looks like - the top column pushes to the left. It should stretch across and not push to one side: (
Try this site. It will tell you what's wrong with your code:
HTML Validator
One problem caught by the validator is that align cannot be "center"
Also, if that didn't work, do you realize that the code will try to stuff the 2 tables into the first 2 columns of your "master table"?
For example, here is what you basically have:
<tr>
<td>
<td>
<td>
<tr>
<td> //3 columns wide
<tr>
<td>
<td>
<tr>
<td> //7 columns wide
So, you are kind of saying, 3 columns then 3 columns then 2 columns then 7 columns.
I tried to do a quick edit. Maybe the following works?
<!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>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; border-bottom:none; width: 600px;" align="center">
<tbody>
<tr>
<td bgcolor="#e4322d" valign="top" width="937" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td valign="top" width="151"><img src="premises.png" border="0" height="107" width="150" /></td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #223e86;border-top:none; width: 600px;" align="center">
<tbody>
<tr>
<td colspan="6" align="center" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;"><img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg" />
<p> </p>
</td>
</tr>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td><img src="premises.png" align="center" width="120px" height="128px" /></td>
</tr>
</tbody>
</table>
</td>
<td colspan="3">
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tbody>
<tr>
<td>We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#e4322d" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"> Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br /> info#mywebsite.com </span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is a limitation of colspan. Even if all the column spans add up to the same for each row, at least one of your rows must consist of individual cells, otherwise you can't specify the widths correctly.
You are using some "old style coding" there ;)
The TR that you are inserting does not have the necessary amount of TD's inside it, thus causing the layout to break... or you forgot a "colspan" somewhere!
I believe that this is enough to cause what you are saying.
(I have not tested this! It's just an analysis by your code).
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.