What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position.

Here is what I have tried so far:

<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
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

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 review your table structure, as there appears to be no content within the <tbody>. To display the user image next to the username, place the <img/> inside the <td> tag just before the username. This will ensure proper alignment, regardless of the username length provided all images are the same size (mostly in width). I have added some CSS to create spacing between all images and usernames. Ensure this spacing remains consistent for all images if you choose to include it.

Answer №2

The issue lies in your utilization of the text-center class on the second <td> within each <tr> tag where usernames are displayed. This results in misalignment, as demonstrated below:

https://i.sstatic.net/hTjoE.png

To correct this, you should replace text-center with text-left, similar to the example provided. Additionally, for better positioning on the right side, incorporate padding-left such as 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 view a working fiddle here, which will generate the following table:

https://i.sstatic.net/OLFbM.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

jqueryhtml

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

javascriptcssextjs

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

What is the best way to attach a CSS class using an onclick function?

I need to dynamically apply a CSS class to a specific div when clicked using JavaScript. Here is the HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&qu ...

javascripthtmlcss

Trouble with disabling default actions and transferring text

When the user clicks on loginAccount, the intention is to extract the text from the element with the id input-1 and assign it to username. This same process should occur for password, followed by form submission. However, despite using e.preventDefault() ...

javascriptjqueryhtmlajaxforms

Modify the colors of the chartist fill and stroke using JavaScript

Struggling to dynamically set colors in a chartist graph using JavaScript. How can custom colors be applied through JS? The attempted method below is not successfully changing the color for the showArea in the chartist graph. <!doctype html> <htm ...

javascripthtmlcsschartist.js

The variable continuously updates itself inexplicably, without any specific code dictating it to

In the sandbox-based game I am playing, two variables are present. blocks (this is an array) and blockssave (also an array) However, there are also functions included: var game = { blocksave: function() { blockssave = blocks; blo ...

javascripthtml

Allow for separation amongst my cellular components

I have a table with multiple cells and I would like to add some spacing between each <td> element. You can find an example of my code on JSFIDDLE. .line { border-bottom:1px solid black; } .textRotation { -webkit-transform: rotate(-90deg); ...

htmlcss

The function toggleClass() is malfunctioning

The .toggleClass() method seems to only be adding the "class" attribute to my selection, resulting in: <div id="toggle" class> ... rather than: <div id="toggle" class="on"> ... I've been trying to solve this issue for about 2 hours now ...

javascriptjqueryhtmlcss

Strategies for Connecting CSS, JavaScript, and Image Files in Django

Being new to Django 1.9.5 and working on Windows, I am facing difficulty in linking my CSS, images, and JS files to the Django template. This is how my project structure looks like: Here is my settings page: BASE_DIR = os.path.dirname(os.path.dirn ...

pythoncssdjango

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...

javascriptphphtmlcsswordpress

Legend alignment issue in Firefox disrupting Flexbox functionality

My fieldset has a legend containing text and a button. I am attempting to use flexbox to right-align the button within the legend. This setup works correctly in Chrome, but encounters issues in Firefox. I have managed to replicate the problem with a simpl ...

htmlcssflexbox

Spacing between the rows of a table

I am seeking to achieve a unique visual style for the rows in my table, similar to the one shown below. I attempted to use CSS border properties in the code snippet provided but desire more spacing between each row with a thin border and sharp edges. .dat ...

cssangularbootstrap-4ngx-datatableborder-spacing

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

Beneath the footer lies a blank space in white

Visit our site for information on various towns. However, we are facing an issue with the CSS when it comes to new or less populated towns like this one, where the footer is not aligning properly and leaving a large white gap below. We attempted to implem ...

htmlcss

Unable to display tags with /xoxco/jQuery-Tags-Input

I'm experimenting with the tagsinput plugin in a textarea located within a div that is loaded using the jquery dialog plugin. The specific plugin I am using is /xoxco/jQuery-Tags-Input. After checking that the textarea element is ready, I noticed th ...

javascriptjqueryhtmljquery-tags-input

Update the header by changing the background of all elements within it, while keeping the rest of the page as is

I am currently creating a Gatsby site with a layout and header component to construct pages. Each component has its own stylesheet (layout.module.scss and header.module.scss). Below is the code snippet: /* layout.js */ import React from "react" ...

htmlreactjssassgatsby

Creating trails by following the cursor's movement in KineticJS

Currently, I am working on a drawing application using KineticJS. While I have successfully used it to draw shapes and straight lines by following the method outlined in KineticJS - Drawing Lines with Mouse, I now need to draw a line along the mouse's ...

javascriptjqueryajaxhtmlkineticjs

Obtaining an Element using Selenium with a specific label

My goal is to align the texts (answers) beside the radio buttons in order to compare them with the correct answer. Below is the HTML snippet: <tbody> <tr> <td class="middle" width="15"> <input name="multiple_choice_resul ...

htmlselenium-webdriverlabel

Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

This webpack.config.js file is dedicated to the module section, where loaders are defined for JSX files and CSS. module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'bab ...

javascriptcssreactjswebpack-dev-serverwebpack-style-loader