First of all, you have sloppy html. You should have an opening and closing
<trfor every row, and quotes around all attributes (yes, even border and
colspan). Try this:
<table class="style1" border="0">
<tr>
<th colspan="3" class="style5">...</th>
</tr>
<tr>
<th colspan="3">...</th>
</tr>
<tr>
<th class="style3">...</th>
<th class="style2">...</th>
<th>...</th>
</tr>
<tr>
<th colspan="3">...</th>
</tr>
</table>
Some browsers do not like tables that do not have closing tags for tr, th,
and td. But why are you expecting your cells to be centered? You do not use
style4 in anything, which is the only style class that would center
anything. Another suggestion, although it can sometimes be a pain, is to add
an extra row at the beginning to specify the widths, because the only row
whose cell widths the browser pays attention to is the first one. You will
obviously want to add a style attribute to this row of visibility:collapse;
so that the row does not make your table look different than expected. And
this is just a personal preference, but when using CSS, I always use td
instead of th, since I am setting the styles anyway, why would I want to
worry about what different browsers like to do with the rendering of th
tags? But something that is even more important is I would suggest trying to
be more compliant with xhtml. This is not hard, the basic most common things
to note are:
1. Always have a closing tag. You can use the self-closing slash, like you
do with the <img/>, but you must do this even with tags like <br/>.
2. Only lower case is allowed for tag and attribute names.
3. You must use quotes for all attribute values.
For example, <TH COLSPAN=3 class="style5"is incorrect because of the
capitalization and missing quotes. It should be changed to <th colspan="3"
class="style5">. You should also include:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
as the first line in every page to let the browser know your code is xhtml.
It is a very simple transition to make, after a few days it will be as
automatic as the html you are doing now, but it is strongly recommended that
you make the transition. Hopefully all this helps. Good Luck!
--
Nathan Sokalski
nj********@hotmail.com http://www.nathansokalski.com/
"franky" <fr****@discussions.microsoft.comwrote in message
news:04**********************************@microsof t.com...
Hello,
I've created a table that has two rows that are span across three columns.
The third row has three columns, each with an image. The last row is also
span accross three columns. The span rows are centering their data.
however, the row with three columns, each with images (myimages1-3) are
not
centering with the rest of the table. Any idea why?
Thanks in advance!
See below code:
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 188px;
}
.style3
{
width: 224px;
}
.style4
{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.style5
{
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="style1" border=0>
<TH COLSPAN=3 class="style5">The images below the greyHorizLine
are not centering<TR><TH COLSPAN=3>
<img alt="" src="images/greyHorizLine.JPG" style="width:
700
px; height: 8px" /><TR>
<TH class="style3">
<img alt="" src="images/wsconstruction/myimage1.JPG"
style="width: 125px; height: 140px; float: right;" />
<TH class="style2">
<img alt="" src="images/wsconstruction/myimage2.JPG"
style="width: 167px; height: 137px" />
<TH>
<img alt="" src="images/wsconstruction/myimage3.JPG"
style="width: 102px; height: 135px; float: left;"
/><TR>
<TH COLSPAN=3>
<img alt="" src="images/greyHorizLine.JPG" style="width:
500px; height: 8px" />
</table>
</div>
</form>
</body>
