How to align image left and text right in a table effectively? - html

Question

I'm showing a member who has a higher rank. Based on that, I have to show the user image along with the username.
but I'm not able to align the image and text efficiently..The problem is some username consists of a longer number of characters. As a result, the username showed in a zig-zag position..
so far, I've tried
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='../assets/img/gold.png'/>Rank</th>
<th><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
<tr>
<td>
1
</td>
<td>
<div class='text-center'>
<img src='images' alt='user dp' class=' img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>#$username</span>
</div>
<td>
</tr>
</thead>
<tbody>
Expected output:
Rank Member
1 image Dravid
2 image Richard Nixon
3 image GrahamBell
4 image Mark twains
Output's getting:
Rank Member
1 image Dravid
2 image RichardNixon
3 image GrahamBell
4 image Mark twains

Answer 1

img {margin-right:10px;};
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Member</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><img src="image"/>member</td>
</tr>
<tr>
<th scope="row">2</th>
<td><img src="image"/>anotherMember</td>
</tr>
<tr>
<th scope="row">3</th>
<td><img src="image"/>oneMoreMember</td>
</tr>
</tbody>
</table>
Please check your table markup, it doesn't seems to have any data in <tbody> . If you have to show the user image before the username place the <img/> inside the <td> tag just before the name of the member(in your case username). This will give you the alignment as per your need, no matter how long is the username provided that the size(mostly width) of all the images is same. I have included little CSS just to provide some space between all images and usernames. Also make sure this space remains constant for all images, if you wish to include it.

Answer 2

Your problem is that you are using the text-center class on each <tr>'s second <td> (to display the username). That's because your those are centered accordingly resulting in this bug:
In order to solve this you have to replace it with text-left like in this example. The same for the second <th>. In order to place your item more to the right, apply a padding-left, e.g., by adding Bootstrap's pl-5:
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='https://via.placeholder.com/25'/> Rank</th>
<th class="text-left pl-5"><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>Dravid</span>
</div>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>RichardNixon</span>
</div>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>GrahamBell</span>
</div>
</td>
</tr>
</tbody>
</table>
You can find a running fiddle here, which produces the following table: