Table in loop dynamic values

Question

I have the following loop, showing me results from a certain page.

foreach($json->rooms as $room)
{
    echo '<p><b>' . $room->name . '</b></p>';

    foreach($room->meetings as $meeting)
    {
        echo '<p><b>' . $meeting->subject . '</b></p>'; 
        echo '<p><b>Organizor:</b> ' . $meeting->organizer . '</p>';
        echo '<p><b>Start:</b> ' . $meeting->start . '</p>';
        echo '<p><b>End:</b> ' . $meeting->end . '</p>';
        echo '<p><b>Duration:</b> ' . $meeting->duration . '</p>';          
    }
}

This shows me a result like:

Room 1
     Subject
          startTime
          endTime
          totalTime 
     Subject
          startTime
          endTime
          totalTime  Room 2
Room 2

Room 3

Room 4

As you can see, we have 4 rooms. in 1 room there are 2 appointments (at different times of the day).

My question: With only 2 appointments, the screen won't be filled alot. But if we have a appointment in every room, the page will get very long.

What i would like is something like this:

Room 1
     Subject              Subject
          startTime            startTime
          endTime              endTime
          totalTime            totalTime

Room 2

Room 3

Room 4

So that every appointment of the same room, will be next to the other of that room.

How do i do this while it is in a loop?

@NaijaProgrammer Not at all - thankfully we're not in the nineties anymore. — Kallum Tanton
– Kallum Tanton, Commented Mar 22, 2016 at 10:50

Community · Accepted Answer · 2017-05-23 12:23:47Z

4

First, wrap the entire meeting in a <div> tag by adding <div class="meeting"> to the very start of the first echo in the meeting loop. Then add a closing </div> to the end of the last echo in the meeting loop. Then you can use some CSS styling like the following to display this correctly:

.meeting {
    width:200px;
    display:inline-block;
}

This will make them sit inline - you can adjust the width to your preference.

Edit

You could use floats (float:left) but that add's a whole new level of complexity with the requirements of a clearfix, but you can read more on that here if you wish:

What is a clearfix?

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 22, 2016 at 10:49

Kallum Tanton

7777 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitch Over a year ago

Oh wauw, this did it. I feel soo stupid right now... But thanks!

klaar Over a year ago

Balls, I shouldn't have bothered writing a snippet and thus losing valuable time. =)

klaar · Accepted Answer · 2016-03-22 10:53:00Z

Wrap each subject in the same room inside its own <section class='subject'> (or <div class='subject'>, whatever you like) and use CSS (display: inline-block;) to make those <section>s go next to eachother instead of beneath eachother.

.subject {
  border: 1px solid #888;
  display: inline-block;
}

<h1>Schedule</h1>
<section class='room'>
  <h2>Room 1</h2>
  <section class='subject'>
    <h3>Subject 1.1</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
  <section class='subject'>
    <h3>Subject 1.2</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
</section>
<section class='room'>
  <h2>Room 2</h2>
</section>
<section class='room'>
  <h2>Room 3</h2>
  <section class='subject'>
    <h3>Subject 3.1</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
  <section class='subject'>
    <h3>Subject 3.2</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
</section>
<section class='room'>
  <h2>Room 4</h2>
</section>

Collectives™ on Stack Overflow

Table in loop dynamic values

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related