Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Table data not centering

Reply
Thread Tools

Table data not centering

 
 
franky
Guest
Posts: n/a
 
      10-25-2008
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>
 
Reply With Quote
 
 
 
 
Nathan Sokalski
Guest
Posts: n/a
 
      10-25-2008
First of all, you have sloppy html. You should have an opening and closing
<tr> for 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
http://www.velocityreviews.com/forums/(E-Mail Removed)
http://www.nathansokalski.com/

"franky" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering Text in Table in IE6 Guy Noir HTML 0 11-11-2006 04:14 PM
Vertically centering a form in a table JonABurgess@gmail.com HTML 1 07-22-2006 10:00 PM
Centering a table Joshua Beall HTML 16 04-24-2004 09:59 AM
Centering ValidationSummary in a cell of a table NWx ASP .Net 1 02-11-2004 06:22 PM
Horizontal and vertical centering of a table Tomas HTML 3 10-31-2003 10:14 AM



Advertisments