asked on

Centering table for sending as html mail

HI,

I'v this code below wich should be centered (vertical & horizontal) without using any javascript or other scripting languages.
Because it's ment to be sent by mail (newsletter).
I'v already tried diff. technics like using div's and css, but without any results. (maybe i'm doing it wrong??!)

I would appreciate some help plz

thx in advanced,

G.
-------------------------------------------------This is what i'v tried till now-----------------------------------------------------------------------

<!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=iso-8859-1" />
<title>Untitled Document</title>

</head>
<style type="text/css">
body {background-color:#1f0e00; margin-top:0; }
.stylebodytext2Titel {
      color:#1F0E00;
      font-weight: bold;
      font-style: normal;
      font-size: 12px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-indent: 0px;
      margin-left: 10px;
      padding-left: 0px;
      text-align: left;
      padding-top: 2px;
      margin-top: 10px;
}
.styleDiv {
      top:50%;
}

.stylebodytext1 {
      color:#FFFFFF;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
}
.stylebodytext2 {
      color:#1F0E00;
      font-weight: normal;
      font-style: normal;
      font-size: 10px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-indent: 0px;
      margin-left: 10px;
      padding-left: 0px;
      text-align: left;
      margin-right: 10px;
}
.stylebodytext3 {
      color:#FFFFFF;
      font-weight: bold;
      text-decoration: underline;
}
.styleTable {

}

.stylebodytext2Link {
      color:#1F0E00;
      font-weight: bold;
      font-style: normal;
      font-size: 10px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-indent: 0px;
      margin-left: 0px;
      padding-left: 0px;
      text-align: left;
      text-decoration: underline;
}
</style>
<body bgcolor="FFFFFF">
<div align="center" class="styleDiv">
<table width="508" border="0" cellpadding="0" cellspacing="0">
<tr >
<td colspan="7"><img src="paginaTop.jpg" alt="head" width="508" height="142" /></td>
</tr>
<tr >
<td width="7" bgcolor="#FFFFFF" height="120"> </td>
<td><img src="menu.jpg" alt="pic" width="494" height="317" /></td>
<td width="7" bgcolor="#FFFFFF"> </td>
</tr>
      <tr ><td colspan="3" height="7" bgcolor="#FFFFFF" ></td></tr>

<tr >
<td width="7" bgcolor="#FFFFFF" height="120"> </td>
<td bgcolor="#DCE0E1" valign="top" width="494"><p class="stylebodytext2Titel">some text</td>
<td width="7" bgcolor="#FFFFFF"> </td>
</tr>
<td colspan="7"><img src="sloganBottom2.jpg" alt="bottom" width="508" height="20" /></td>
</tr>
</tr>
<td colspan="7"><img src="NieuwsBottom.jpg" alt="bottom" /></td>
</tr>
</table>
</div>
</body>
</html>

Roonaan

First a sidenote: For mail you should try to use inline styles (style="styles") rather than style blocks (<style></style>) for better results.

To center your table try using:
<body style="background:white;">
<div style="text-align:center;">
<table style="text-align:left;" ...etc.. >

-r-

ASKER CERTIFIED SOLUTION

gops1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Roonaan

@gops1,

Then it is easier to just use a <center> tag when you use that doctype.

-r-

gops1

Yes