Solved

Making the columns in my table line up nice and neat

Posted on 2008-06-24
19
1,459 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:dm404
  • 9
  • 5
  • 2
  • +2
19 Comments
 
LVL 5

Expert Comment

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

Author Comment

by:dm404
ID: 21860501
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

0
 

Author Comment

by:dm404
ID: 21860504
Thats the HTML source  BTW ; )
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21860832
The tables are aligning properly using just the HTML code. So the problem is in your CSS.

Post the CSS file please.
0
 
LVL 17

Expert Comment

by:ram_0218
ID: 21860873
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.
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21860969
There's also an extra <tr> in your code on line 5.
<tr>        <tr>

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 200 total points
ID: 21861550
The last closing brace => }
is unmatched - probably because you did not post all your code. IF that was all your code, you will need to remove it. Having said that, try the attached code:
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

{

        ?>
 

	<?php

	if (empty($row4['EventFlyer']))

	{

	?>

	<td class="description" colspan="3" 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

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21861589
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.
0
 

Author Comment

by:dm404
ID: 21872276
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
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:dm404
ID: 21872312
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
0
 

Author Comment

by:dm404
ID: 21878654
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
0
 
LVL 82

Expert Comment

by:hielo
ID: 21879209
What's the HTML that your script is generating?
0
 

Author Comment

by:dm404
ID: 21879286
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
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 150 total points
ID: 21880003
If it is only happening on the latest IE, and FF, Mozilla and IE6 is rendering it correctly, then you may be able to write it off as just an IE7 bug, of which there are hundreds, at last count.  It is probably to do with something like the DOM model you are putting in your header, look at this line and adjust to correct specs --

http://www.w3.org/TR/xhtml1/
www.alistapart.com/stories/doctype/
0
 
LVL 5

Assisted Solution

by:codeQuantum
codeQuantum earned 150 total points
ID: 21880037
Try one of the following things :

- use "float : right;" on the image

Or :

- Set the width of the TD containing the image to the same size as the image. 65px. (Apply this size to class grey too.)

Or :

- put the image and the text in the same TD, insert the image before the text, and put "float : right;" in the style of the image
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21880047
DM404 if it still does not work after trying these things, post a screenshot.
0
 

Author Comment

by:dm404
ID: 21918839
bit of a silly question but how do I float image right?
0
 

Author Comment

by:dm404
ID: 21961469
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
0
 

Author Comment

by:dm404
ID: 21996497
It works fine on the server, must be a glitch using my local host. Thanks for all your help!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now