Displaying data into HTML Tables

Question

I am able to display my data from db. I want to display in a table under tabs but then my data appears crooked. The rows are not straight. why is that happening to the table?

it is arranged kind of this way.

the updated code below doesn't provide the right format for the table Table

  id  name
     1    James
    4   Michel
   2  Jonathan

HTML

<div class="row">
    <div class="col-md-7">

        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                @foreach($items as $item)
                    <li><a href="#tab_{{ $item->id }}" data-toggle="tab" >{!!$item->name!!}</a></li>
                @endforeach             
            </ul>
            <div class="tab-content">
                @foreach($items as $item)
                    <div class="tab-pane active" id="tab_{{ $item->id }}">
                        @foreach($item->products as $product)
                            <table class="table">
                                <thead>
                                    <tr> 
                                        <th>No#</th>
                                        <th>Name</th>
                                        <th>Action</th>
                                    </tr>
                               </thead>
                               <tbody>
                                    <tr>
                                        <td>{{$product->id }}</td>
                                        <td>{{ $product->name}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        @endforeach         
                    </div>    
                @endforeach         
            </div>
        </div>
    </div>

Updated Code

Update

<div class="row">
    <div class="col-md-7">

        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                @foreach($items as $item)
                    <li><a href="#tab_{{ $item->id }}" data-toggle="tab" >{!!$item->name!!}</a></li>
                @endforeach             
            </ul>
            <div class="tab-content">
                @foreach($items as $item)
                    <div class="tab-pane active" id="tab_{{ $item->id }}">
                            <table class="table">
                                <thead>
                                    <tr> 
                                        <th>No#</th>
                                        <th>Name</th>
                                        <th>Action</th>
                                    </tr>
                               </thead>
                               <tbody>
                        @foreach($item->products as $product)

                                    <tr>
                                        <td>{{$product->id }}</td>
                                        <td>{{ $product->name}}</td>
                                    </tr>
                        @endforeach         

                                </tbody>
                            </table>
                    </div>    
                @endforeach         
            </div>
        </div>
    </div>

This ain't only HTML. The foreach is from a framework language. What framework do you use? And what Quentin says is the awnser — StuiterSlurf
– StuiterSlurf, Commented Nov 16, 2017 at 8:38
In your code 'th' number 3 but under tbody I can see only 2 'td', is this a cause? — Hanif
– Hanif, Commented Nov 16, 2017 at 8:41

Quentin · Accepted Answer · 2017-11-16 08:34:21Z

1

The start of your foreach products is before the <table> start tag.

You are, however, trying to generate one row per product, so it should be immediately before the <tr> start tag.

The matching endforeach should likewise be moved to just after the </tr> end tag.

answered Nov 16, 2017 at 8:34

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Peter B · Accepted Answer · 2017-11-16 09:32:27Z

0

You need to move the @foreach() + corresponding @endforeach inside the <tbody>, otherwise you are outputting a new table for each product. This is how it should be:

<table class="table">
    <thead>
        <tr> 
            <th>No#</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    @foreach($item->products as $product)
        <tr>
            <td>{{ $product->id   }}</td>
            <td>{{ $product->name }}</td>
        </tr>
    @endforeach      
    </tbody>
</table>

answered Nov 16, 2017 at 9:32

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

4 Comments

pogba Over a year ago

what about the @foreach() for the tab-content . this line ` <div class="tab-content"> @foreach($items as $item) <div class="tab-pane active" id="tab_{{ $item->id }}">`

pogba Over a year ago

do i have to maintain it?

Peter B Over a year ago

You'll probably need to keep it as it generates the tabs, each of which contains a table of products.

Peter B Over a year ago

Looks good to me, but it is up to you to decide if it does what you want.

Collectives™ on Stack Overflow

Displaying data into HTML Tables

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related