CODEWITHSUNDEEP
htmlcsshtml-table
user1949387
user1949387

Reputation: 1285

Html tables how can I display a group of elements side by side

I have table elements that are nested within a foreach loop that displays profile pictures of people. My issue is that all of the pictures are shown on top of each other. How can I put the pictures side by side? Here is my code:

<table cellpadding="0" style="width:80%; " cellspacing="0">
    @foreach (var item in Model)
    {
        <tbody style="float:left;">
    <tr><td><img height="50" width="50" src="@Url.Content("~/uploads/profilepic/"+item.foldername+"/"+item.photo)" alt="" /></td></tr>
</tbody>
    }
</table>

I have about 20 pictures there and can't seem to put them side by side any suggestions would be great.

Upvotes: 0

Views: 348

Answers (2)

Andreas Aumayr
Andreas Aumayr

Reputation: 1006

With the tr-tag you start a new row. If you want to display multiple items within one row then you have to "keep the row open". You may use a simple counter variable in order to allow a certain amount of pictures per row..

Upvotes: 1

dashtinejad
dashtinejad

Reputation: 6263

Instead of creating rows for each user, create a column:

<table cellpadding="0" style="width:80%; " cellspacing="0">
<tbody><tr>

    @foreach (var item in Model)
    {
        <td><img height="50" width="50" src="@Url.Content("~/uploads/profilepic/"+item.foldername+"/"+item.photo)" alt="" /></td>
    }

</tr></tbody>
</table>

Upvotes: 3

Related Questions