Display results into 2 columns of 6 rows

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
xenoulaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
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
xenoulaAuthor Commented:
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
RoonaanCommented:
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
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

xenoulaAuthor Commented:
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
RoonaanCommented:
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
xenoulaAuthor Commented:
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
xenoulaAuthor Commented:
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
RoonaanCommented:
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
xenoulaAuthor Commented:
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
xenoulaAuthor Commented:
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
RoonaanCommented:
You have to remove or change the width:300px in the style="" property of your <table> tag.

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
xenoulaAuthor Commented:
Yes you were right
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.