Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Display results into 2 columns of 6 rows

Posted on 2006-04-18
12
Medium Priority
?
176 Views
Last Modified: 2013-12-12
Hello,

I have created a website which takes information from the database and displays the results in the web page.The table that takes that information is called jobs. The problem I have is with the layout of the results.I would like to dipslay the results into two columns of 6 rows.The tricky thing is that I want for every job to print in one row the title and in the second the other information for the specific job.An example of the layout is the following.

Customer Care                                                  Customer Care
£16K     REF.:IMU0121        More Info                 £16K     REF.:IMU0121        More Info

Sales Executive                                                 Sales Executive
£35k     REF.:KTJ0140        More Info                  £35k     REF.:KTJ0140        More Info

Customer Care                                                Customer Care
£16K     REF.:IMU0121        More Info               £16K     REF.:IMU0121        More Info

Sales Executive                                               Sales Executive
£35k     REF.:KTJ0140        More Info                £35k     REF.:KTJ0140        More Info

Sales Executive                                               Sales Executive
£35k     REF.:KTJ0140        More Info                £35k     REF.:KTJ0140        More Info


Sales Executive                                                Sales Executive
£35k     REF.:KTJ0140        More Info                £35k     REF.:KTJ0140        More Info  

I would really appreciate if somebody could help me do the alrgorithm and how the code will be to diaply the correct layout

Thank you in advance,
Xenia
0
Comment
Question by:xenoula
  • 7
  • 5
12 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16476899
Use the strenghts CSS offers you:

Have a container with a certain width. Then have each table float left inside that container. By adjusting the width of the container and the inner tables you can create as many columns as you like.
By setting the container to width:auto; you can even have a variable amount of columns based on screen width.

<div id="container" style="width:610px;">
  <?php
     $result = mysql_query('SELLECT ID, Name, Price, Ref FROM table');
     while($row = mysql_fetch_assoc($result)) {
          $titleCell = htmlspecialchars($row['Name']);
          $leftCell = '&pound;'.htmlspecialchars($row['Price']);
          $midCell = htmlspecialchars($row['Ref']);
          $rightCell = '<a href="moreinfo.php?id='.$row['ID'].'">More info</a>';
          ?>
          <table style="width:300px;height:100px;float:left;" cellspacing="0" cellpadding="0">
          <tr><th colspan="3"><?=$titleCell;?></th></tr>
          <tr><td><?=$leftCell;?></td><td><?=$midCell;?></td><td><?=$rightCell;?></td></tr>
          </table>
          <?php
     }
  ?>
  <div style="clear:both;"></div>
</div>

-r-
0
 

Author Comment

by:xenoula
ID: 16477079
Roonaan it is exacly what I wanted to do thank you very much.
However, i would like to ask you some questions regarding the code in order to understand how it is working.

What is the container, it is an element of CSS?
Where exacly in the code I assign that when the rows are 6 then go to the next column?
Moreover, how I can change the format of the tabel,for example after the title not to have so many cab.

Thank you very much,
Xenia

0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16477132
The container is the <div style="width:610px;">

But actually , I think the code isn't what you where after, afterall. This code can only do the columns easily, not the next-col-after-6-rows.

But do you expect to have more than 12 elements actually?

-r-
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:xenoula
ID: 16477376
I want to display 6 jobs in one column and 6 jobs in the second column.
Totally will be 12 jobs.I test it and is working.It displays the latest 12 jobs as I wanted.

Every time it will display 12 jobs only no more
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16477550
In current setup it shows indeed 6x2 table, but the ordering is
1 2
3 4
5 6

Whereas in your question the ordering should be as below, shouldn't it?
1 4
2 5
3 6

-r-
0
 

Author Comment

by:xenoula
ID: 16477798
Yes you are right and I just realise now that it printd 7 and 8 rows it doen't display only 6 rows in every column.
0
 

Author Comment

by:xenoula
ID: 16477895
So please if you could help me to add a code in order to display 6 jobs in one column and 6 jobs to the second column,
I would be very gretfull.

Thank you,
Xenia
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16477945
Your query should be like:

$query = 'SELECT .... FROM table WHERE .... LIMIT 12';

Then have:

<div style="width:300px;float:left">
   <?php
      $i = 0;
      while($i++ < 6 && $row=mysql_fetch_assoc()) {
          //output table
      }
   ?>
</div>
<div style="float:left;">
   <?php
      while($row=mysql_fetch_assoc()) {
          //output table
      }
   ?>
</div>
<div style="clear:both;">

-r-
0
 

Author Comment

by:xenoula
ID: 16478472
Actually  I add a code in the exiting code and is working now ,it diplays in 6 rows:
<div id="container" style="width:610px;">
  <?php
     $result = mysql_query('Select * from Jobs ORDER BY job_reference DESC');
     while($row = mysql_fetch_assoc($result)) {
                  if ($_i > 0 && $_i % 2 == 0 && $_i<=12)   {
        echo "</TR>\n<TR>";
    }if ($_i<12){
          $titleCell = htmlspecialchars($row['job_title']);
          $leftCell = '&pound;'.htmlspecialchars($row['salary']);
          $midCell = 'REF.:'.htmlspecialchars($row['ref']);
          $rightCell = '<a href="more_info.php?job_reference='.$row['job_reference'].'" target="name" onclick="window.open("more_info.php","name","height=255,
 width=250,toolbar=no,directories=no,status=no,
 menubar=no,scrollbars=no,resizable=no"); return false;" class="moreinfotext" target="_blank">More info</a>';
          ?>
          <table border="0" width="258" height="18" cellpadding="0" cellspacing="0" style="width:300px;height:30px;float:left;">
          <tr>
                    <td height="19" colspan="3" align="left" class="navitextjobsbld"><?=$titleCell;?></td>
              </tr>
          <tr>
                    <td width="54" class="navitextjobs" ><?=$leftCell;?>&nbsp;</td>
                  
                    <td width="54" class="navitextjobs" ><?=$midCell;?>&nbsp;</td>
                  
                    <td width="150" class="navitextjobs" ><?=$rightCell;?></td>
                  
                  </tr>
                  <tr><td><img src="images/spacer.jpg" height="9px"></td></tr>
  </table>
 

          <?php
     } $_i++;}
  ?>
  <div style="clear:both;"></div>
</div>
what I wanted to ask you if I want to descrase the gap between the first colum of the jobs with the second.
How I can do that?

0
 

Author Comment

by:xenoula
ID: 16478597
The gap that I want to decrease is between the column of the jobs like the following example:
Customer Care                                        Customer Care
£16K     REF.:IMU0121        More Info       £16K     REF.:IMU0121        More Info

Instead of the bigger gap as the following:
Sales Executive                                                                   Sales Executive
£35k     REF.:KTJ0140        More Info                                    £35k     REF.:KTJ0140        More Info
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 2000 total points
ID: 16478729
You have to remove or change the width:300px in the style="" property of your <table> tag.

-r-
0
 

Author Comment

by:xenoula
ID: 16479320
Yes you were right
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month20 days, 19 hours left to enroll

810 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