Aligning table headers with table data..

[dpedroia]

I have a table I created with HTML that is being used on my page as a sortable table. The code is below:

 

.....

    echo "<table class='sortable'>\n";
    echo "<tr>\n";
    echo "<th style=\"text-align:left\">Event ID</th>\n";
    echo "<th style=\"text-align:left\">Event Name</th>\n";
    echo "<th style=\"text-align:left\">Sport</th>\n";
    echo "<th style=\"text-align:left\">State</th>\n";
    echo "<th style=\"text-align:left\">Venue</th>\n";
    echo "<th style=\"text-align:left\">Date</th>\n";
    echo "</tr>\n";

    $col = 0;
    while($row = mysql_fetch_array($result))
    {
    extract($row);
    $col++;
    
    echo "<tr>\n";
    echo "<td align=char>$id</td>\n";
    echo "<td>$eventname</td>\n";
    echo "<td>$sport</td>\n";
    echo "<td>$state</td>\n";
    echo "<td>$venue</td>\n";
    echo "<td>$month $day, $year</td>\n";
    echo "</tr>\n";
    echo"</table>";

.....

 

The table works, the sort works, and all's well. However, as you can see in the attached picture the table headers are not aligned with the table cells below.

 

I've tried using colspan in the <td> tags but am sure there's a more surefire solution to properly lining up table cells with table headers. I'd like the cells to line up with their respective table headers as shown in the attached picture.

 

Because my table uses the 'sortable' class from my CSS file, I've included it here:

 

table.sortable thead {
float: left;
width: 100%;
background-color: #030708;
color: #ededed;
font: 12px verdana, sans-serif;
border-left: 1px dotted #0e2628;
border-right: 1px dotted #0e2628;
border-top: 1px dotted #0e2628;
cursor: default;
border-spacing: 8px;
}
table.sortable tbody {
float: left;
width: 100%;
background-color: #030708;
color: #ededed;
font: 12px verdana, sans-serif;
border-left: 1px dotted #0e2628;
border-right: 1px dotted #0e2628;
border-top: 1px dotted #0e2628;
border-bottom: 1px dotted #0e2628;
cursor: default;
border-spacing: 8px;
}

 

If there's something I could do to the table tags in the HTML or simply modify the CSS document that would be great.

 

Thank you.

 

[attachment deleted by admin]

[otuatail]

Why do you echo everyrhing you can use html as well as php.

what is /n on the end of each line

 

$col = 0; and $col++; don't do anything

 

extract($row); is not the best way of doing this try

<td align=char>$row[$id]</td>

<td align=char>$row[$eventname]</td>

 

border-left: 1px dotted #0e2628;

border-right: 1px dotted #0e2628;

border-top: 1px dotted #0e2628;

border-bottom: 1px dotted #0e2628;

 

this can be done in one line border: 1px dotted #0e2628;

 

have you got a URL link

 

[otuatail]

<td align=char> ?

left, right, center & justify are the choices

[haku]

PHP is irrelevant to HTML. Show us the HTML output for your table.

 

 

[dpedroia]

Thanks, I understand the basics of both HTML and PHP (maybe not in your eyes ) but not the more advanced stuff.. Anyway, the page where this table is live is:

 

http://www.vyfx.com/sportaccess/browseevents.php

 

It may look weird in IE but it's the page nonetheless.. still working on it a lot.

 

Thanks, and I'll give that a shot otuatail.

[haku]

Your doctype is all screwed up. It's been broken into multiple lines, and it has whitespace before it. Try fixing this - at the moment browsers aren't recognizing your doctype, which will put your document into quirksmode in IE. And quirksmode is... quirky.

[dpedroia]

Okay I've fixed the doctype on that page. Now, to clarify my issue a little since it may be confusing for some:

 

My problem is that the table I'm outputting on this page: http://www.vyfx.com/sportaccess/browseevents.php is not aligning properly.

 

My code to output the table, which displays data pulled from a MySQL database, is:

 

<?php

$max_col = 100;
$query = "SELECT * FROM events";
$result = mysql_query($query) or die(mysql_error());
    
echo "<table class='sortable'>
<tr>
<th>Event ID</th>
<th>Event Name</th>
<th>Sport</th>
<th>State</th>
<th>Venue</th>
<th>Date</th>
</tr>";

$col = 0;
while($row = mysql_fetch_array($result))
{
        extract($row);
        $col++;
    
echo "<tr>
<td>$id</td>
<td>$eventname</td>
<td>$sport</td>
<td>$state</td>
<td>$venue</td>
<td>$month $day, $year</td>
</tr>";
}
echo"</table>";

?>

 

I want to have the table headers align properly with the table cells, but as you can see on the page this isn't happening. I've tried using 'td colspan=' and 'td align=' but with no luck.

 

At this point I'm not sure if this is a CSS issue since technically it's an issue with the HTML, so if this needs to be moved feel free to move it.

 

Thanks for any help and for all of the help thus far.

 

Brian

[Pikachu2000]

For what it's worth, when I view it in Safari or Firefox, and disable CSS, it lines up just fine.

[dpedroia]

Okay, I fixed the issue.. the problem was that I had my CSS file telling both the table headers and table cells to "float: left;". This was causing all data to be forced to the left and become uneven. I removed the "float: left;" from my CSS file for both table headers and table cells and replaced it with "text-align: left;". The problem is now solved

 

Thanks again.

[haku]

Your doctype still isn't being recognized due to the whitespace before the doctype. And please don't post PHP in the CSS section.