asked on

Making the columns in my table line up nice and neat

Hi there,

I have a query that retrieves events. These events are each displayed in individual tables.

There are two type of events, one with a flyer one without. With the help of EE i have it so that table changes depending on whether the flyer is empty.

Table is alway 800 in width

With flyer
- 1st row has name, price and time.
- 2nd row has description and flyer. Description colspan at two.

No flyer
- 1st row has name, price and time.
- 2nd row has description. Description colspan at 3.

The problem is that I can never get the columns to appear in line on both a table with a flyer and a table without a flyer. It is always the price and time that appear 'out of step' so to speak.

In an ideal world I'd want name to have a width of 550 and align left. Time to have width of 125 and align left and Price to have with width of 125 and align right. No flyer would have description spanning all 3 and with flyer would description spanning name and time, with flyer spanning price and align right.

My code always produces out of step columns when both type of tables are displayed.

Any idea?

Thanks in advance,

Dan

echo '<div class="center">
 
<table class="event" width="800" align="center">
 
<tr><td class="bold" align="left" width="600">' . $row4['EventName'] . '  at <a href="venueprofile.php?VenueID=' . $row4['VenueID'] . '">' . $row4['VenueName'] . '</a></td><td class="grey" align="left" width="100">Time:' . substr($row4['EventTime'],0,5) . '</td><td class="grey" align="right" width="100">Price:' . $row4['EventPrice'] . '</td>
</tr>
<tr>';
if (empty($row4['EventFlyer']))
{
        ?>
        <td class="description" colspan="3" align="left"><?php echo $row4['EventDescription'];?></td>
        <?php
}
else
{
        ?>
        <tr>
<?php
if (empty($row4['EventFlyer']))
{
	?>
	<td class="description" colspan="2" align="left"><?php echo $row4['EventDescription'];?></td>
	<?php
}
else
{
	?>
	<td class="description" colspan="2" align="left"><?php echo $row4['EventDescription'];?></td>
 
	<td align="right" width="100" colspan="1"><img id="<?php echo $row4['EventID'];?>" alt="" src="http://localhost/mywebsite/uploads/Thumbs/<?php echo $row4['EventFlyer']; ?>" pbsrc="http://localhost/mywebsite/uploads/<?php echo $row4['EventFlyer']; ?>" style="width: 65px; height: 65px;" class="PopBoxImageSmall" title="<?php echo $row4['EventName']; ?> at <?php echo $row4['VenueName']; ?>. It starts at <?php echo $row4['EventTime']; ?>. Entry is <?php echo $row4['EventPrice']; ?>" onclick="Pop(this,60,'PopBoxImageLarge');" ondblclick="Revert(this,60,'PopBoxImageSmall');"/></td>
	<?php
}
?>
</tr>
 
</table>
 
<?php
} echo '</div>';
}
 
?>

Open in new window

codeQuantum

It would help if you ran this code on your server, and gave us a real sample of the HTML code that is produced.

dm404

ASKER

Hi there, thanks for your comment

Here is a quick example i did, one table has the flyer, one doesn't.

Thanks in advance,

Dan

<table class="event" width="800" align="center">
 
<tr><td class="bold" align="left" width="600">HONEY  at <a href="venueprofile.php?VenueID=1">My Bar</a></td><td class="grey" align="left" width="100">Time:17:30</td><td class="grey" align="right" width="100">Price:£8</td>
</tr>
<tr>        <tr>
	<td class="description" colspan="2" align="left">How hgvvbh hhjbnash idkhkaj nhbhbdas dhjas hjbsadhbaswnm dk uihuihu whe jh ckjas cjh askj cj cj ak  jajc   j jjjn i ruled the world! WOOWMMknjcdjs  njsbhdjkabnjdk kj cdsbh sa bhc asc j hjsd ajh xdksw g jch jsd chjs adc  hjas ck ask chas cks ach jh jk jck asc kas chjas hjc lasj h hac kasj cjkas ck asjc h</td>
 
	<td align="right" width="100" colspan="1"><img id="1" alt="" src="http://localhost/mywebsite/uploads/Thumbs/ELERCT.jpg" pbsrc="http://localhost/mywebsite/uploads/ELERCT.jpg" style="width: 65px; height: 65px;" class="PopBoxImageSmall" title="HONEY at My Student Bar. It starts at 17:30:00. Entry is £8" onclick="Pop(this,60,'PopBoxImageLarge');" ondblclick="Revert(this,60,'PopBoxImageSmall');"/></td>
	</tr>
 
</table>
 
</div><div class="center">
 
<table class="event" width="800" align="center">
 
<tr><td class="bold" align="left" width="600">TEST  at <a href="venueprofile.php?VenueID=2">The Hobbit</a></td><td class="grey" align="left" width="100">Time:16:30</td><td class="grey" align="right" width="100">Price:£25</td>
</tr>
<tr>        <td class="description" colspan="3" align="left">MOENY hjbasdb csahjbcdash cb  savch as hvcb asj as g cas ch  hj gcsancnm k  hc asc h  jhavbscbs hjbhasdc jh jh sahjcb hjs  hjbhasb c  jhbchas c hj bhac vhj  hbscvahj chj b ghasc hj  hjcs ahj chj hjc ahjsc hj hjc jhsc hjas chj h jc hasj chb hj jh cha hs chj hjb  jhca hjc a chj ahjs c hj chjas chas  jghas c ahsc hjas  jhascb hjas c jhbcahs c  jhhasjcbhjas c njklas hcvhsabc hja chasjch hc ac ahjs hj ch</td>
        </div>

Open in new window

dm404

ASKER

Thats the HTML source BTW ; )

codeQuantum

The tables are aligning properly using just the HTML code. So the problem is in your CSS.

Post the CSS file please.

ram_0218

rowspan or colspan are only effective in the *same* table not across different tables. even though browsers like firefox or safari may show your page correctly but IE

since the table width is *fixed* as in your case its 800px:

replace your colspan="2" with width=700px
replace your colspan="3" with width=800px

this is just visible from the layout you constructed so far. replace the values and post back if you still have issues.

codeQuantum

There's also an extra <tr> in your code on line 5.

<tr>        <tr>

Open in new window

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scrathcyboy

GENERALLY speaking, you can save yourself a lot of problem with COLSPAN.

Since this code is being output from either PHP or some other server language, simply avoid the COLSPAN tag by putting the data that doesn't need to be spanned in one table, and starting a new table for the data that would span the columns of the other table. In other words --

<TABLE><TR><TD> several TDs of data here </TD></TR></TABLE>
then a new table to avoid the colspan = 2 or 3
<TABLE><TR><TD> fewer TDs of data here </TD></TR></TABLE>

All you have to do is make the WIDTHS of the TDs (adding 2 or 3 widths, depending on colspan=2 or 3 add up to the same width as the width of the TD containing the image, and it will ALWAYS align right.

If you use that practice in outputting PHP, you will never have this problem. Sure you can fix an individual issue like this by hacking the PHP output, but as a global solution -- 2 separate tables.

dm404

ASKER

HI all,

Thanks for your comments!

Hiele- I tried your code. Unfortunately it brang about the same results as before with Price and Time being out of step.

Ram0218 - When I replace the colspans with the widths, the description only sits under one column so the others are pushed further out of step.

Code Quantum - The CSS I'm using on the tables & div at the moment..

table.event { margin: 1em; border: 1.7px solid #ccc; }
.center { text-align: center; }
.center table {
margin-left: auto;
margin-right: auto;
text-align: left;
}

td.grey {
color: rgb(186,189,188);
font-weight: 700;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

td.bold {
font-size: 90%;
font-weight: 700;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #444;
}

td.description {
color: #444;
font:13px verdana, sans-serif;
*font-size:small;
*font:x-small;
}

Thanks in advance!

Dan

dm404

ASKER

scrathcyboy - I see your logic but how would I go about making that second table fit nicely with the first table. Eg I have a thin grey border around each event table. Also how do I make sure the related tables are close togther, whereas the event tables are divided by a bigger gap.

Thanks in advance!

Dan

dm404

ASKER

HI there,

So I've tested my table on different browsers.

My code works pefectly in Mozilla Firefox 3!! But still looks out of step on IE!

Any idea why?

Thanks again,

Dan

hielo

What's the HTML that your script is generating?

dm404

ASKER

So I've done some more investigation.

The particular <td> that is out of place is the EventTime when there is an image.

It happens on the latest IE and it basically doesn't align right even though I've changed my code to align that cell right!!

It is still perfect on the latest firefox

SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

codeQuantum

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

codeQuantum

DM404 if it still does not work after trying these things, post a screenshot.

dm404

ASKER

bit of a silly question but how do I float image right?

dm404

ASKER

codequantum,
I floated image right and adjusted the td size but it was unsuccesful. I'm in the middle of transfering the site to a server, you will then be able to see the code in action!
Thanks again,
Dan

dm404

ASKER

It works fine on the server, must be a glitch using my local host. Thanks for all your help!