SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble aligned data in tables in FF, IE is fine

    I have the following code that I use to display the results from my database, I am using a table to do this as I have read tabular data should be displayed using tables as that's why they were desiged. However my output is showing up fine in IE6 everything is aligned correctly underneath each other but in FF it is all srambled and doen't align up properly.

    Could someone have a look at my code and tell me what I am doing wrong, don't really understand tables so forgive my ignorance

    echo'<table align="center">
    <tr>
    <td width="5%" class="textform3">Interest</td>
    <td width="5%" class="textform3">Subject</td>
    <td width="5%" class="textform3">Level</td>
    <td width="5%" class="textform3">County</td>
    <td width="5%" class="textform3">Town/College</td>
    <td width="5%" class="textform3">Name</td>
    <td width="5%" class="textform3">Number</td>
    <td width="5%" class="textform3">More Info</td>

    </tr>

    </table>';




    if ($num > 0)
    { // If it ran ok , display the results

    $color="#FFF";

    while ($row = mysql_fetch_array($result,MYSQL_NUM))
    {
    echo "
    <table align='center'>
    <tr style='background: $color'>
    <td width='5%' class='textform4'>$row[0]</td>
    <td width='5%' class='textform4'>$row[1]</td>
    <td width='5%' class='textform4'>$row[2]</td>
    <td width='5%' class='textform4'>$row[3]</td>
    <td width='5%' class='textform4'>$row[4]</td>
    <td width='5%' class='textform4'>$row[5]</td>
    <td width='5%' class='textform4'>$row[6]</td>

    ";

  2. #2
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's hard to know without seeing an example of the generated HTML as well as the code generating it. The second bit of code you posted doesn't look as if it's complete but two problems jump out which may cause the mis-alignment:

    1. There's no closing </tr> tag at the end of each row.
    2. Each row is a separate table. That's wrong. You should take the closing </table> tag out of the first chunk, and the opening <table> tag out of the second chunk, then place a new closing </table> tag after the end of the while loop.

    Also, whilst you're quite right about tables being used for tabular data, you're only part way there. You're using some outdated attributes which belong in the CSS (align, width and style in this case), but you're not using the structural markup in the header which indicates that this is a table of data.

    On the structural markup side you need to change the <td> tags in the first chunk of code to <th> tags. You should also look at including either a caption element or a summary attribute.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •