Table data not centering

Discussion in 'ASP .Net' started by franky, Oct 25, 2008.

  1. franky

    franky Guest

    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>
     
    franky, Oct 25, 2008
    #1
    1. Advertising

  2. 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.nathansokalski.com/

    "franky" <> wrote in message
    news:...
    > 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>
     
    Nathan Sokalski, Oct 25, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. NWx
    Replies:
    1
    Views:
    352
    Ivan Demkovitch
    Feb 11, 2004
  2. Tomas
    Replies:
    3
    Views:
    835
    Tomas
    Oct 31, 2003
  3. Joshua Beall

    Centering a table

    Joshua Beall, Apr 23, 2004, in forum: HTML
    Replies:
    16
    Views:
    731
    spaghetti
    Apr 24, 2004
  4. Replies:
    1
    Views:
    433
  5. Guy Noir

    Centering Text in Table in IE6

    Guy Noir, Nov 11, 2006, in forum: HTML
    Replies:
    0
    Views:
    345
    Guy Noir
    Nov 11, 2006
Loading...

Share This Page