Table Structure Misalignment Issue

Below is the code used to align contact details:

<html>
  <body>
    <table width="900" class="contact-details">
      <tr>
        <td><img src="./images/Mobile.png"></td>
        <td>
          <p>832.674.6834</p>
        </td>
        <td><img src="./images/fax.png"></td>
        <td>
          <p>271.217.4981</p>
        </td>
        <td><img src="./images/email.png"></td>
        <td>
          <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384c5d4b4c784c5d4b4c4851565d5b5d5c165b5755">[email protected]</a></p>
        </td>
        <td><img src="./images/address.png"></td>
        <td>
          <p>1055 Loremips Tr. Kity, TX</p>
        </td>
      </tr>
    </table>

    <style>
      img {
        /* width: 100%; */
        display: block;
      }
    </style>
  </body>
</html>

There seems to be a noticeable gap difference between images and text content. Is there a way to make the gap equal and ensure the full content fits neatly inside the table class?

A screenshot for reference: https://i.sstatic.net/QKZt7.jpg

htmlcsshtml-table

Answer №1

utilize the css class in order to style td elements individually by specifying inline values for width and height

.img {
      background-repeat:no-repeat;
      background-size: cover;
}
<table width="900" class="contact-details">
    <tr>
        <td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
        <td><p>832.674.6834</p></td>
        <td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
        <td><p>271.217.4981</p></td>
        <td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
        <td><p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7e6f797e4a7e6f797e7a63646f696f6e24696567">[email protected]</a></p></td>
        <td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
        <td><p>1055 Loremips Tr. Kity, TX</p></td>
    </tr>
</table>

Answer №2

<table width="900" class="contact-details" >
    <tr>
        <td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
        <td>832.674.6834</td>
        <td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
        <td>271.217.4981</td>
        <td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedacbdddaeedacbdddadec7c0cbcdcbca80cdc1c3">[email protected]</a></td>
        <td style='width: 30px'><img  style='width: 30px' src="./images/address.png"></td>
        <td>1055 Loremips Tr. Kity, TX</td>
    </tr>

adjust the width in pixels to match the image dimensions

Answer №3

 **To enhance the layout, it is recommended to eliminate the width="900" attribute and introduce padding to the <td> element**

 <html>
 <head>
 <style>
  img {
    /* width: 100%; */
    display: block;
  }
  table{
        margin:0 auto;
  }
  td{
    padding-top:5%;
    padding-left: 1%;
  }
 </style>
 </head>
 <body>
 <table  class="contact-details">
  <tr>
    <td><img src="./images/Mobile.png"></td>
    <td>
      <p>832.674.6834</p>
    </td>
    <td><img src="./images/fax.png"></td>
    <td>
      <p>271.217.4981</p>
    </td>
    <td><img src="./images/email.png"></td>
    <td>
      <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c58495f586c58495f585c4542494f4948024f4341">[email protected]</a></p>
    </td>
    <td><img src="./images/address.png"></td>
    <td>
      <p>1055 Loremips Tr. Kity, TX</p>
    </td>
  </tr>
 </table>


 </body>
 </html>

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

"Efficiently setting up individual select functions for each option in a UI select menu

I've integrated UI Selectmenu into my current project UI selectmenu includes a select option that allows for setting select behavior across all selectmenu options, as shown in the code snippet below: $('.anything'). selectmenu({ ...

javascriptjqueryhtmljquery-uiselect-menu

When a CSS inline element encapsulates another inline replaced element

<div class="box"> <span> <img src="https://picsum.photos/id/127/300/200" alt="" /> </span> </div> The image has a width of 300px and height of 200px. Although the image is a child elemen ...

htmlcsslayoutinline

Understanding the separation and communication techniques in Vue.js components

I recently developed a small vuejs application and I find myself getting confused with the functioning of components. Here is the code snippet that I have been working on: <div id="app"> <div v-if="loggedIn"> <nav> <r ...

javascripthtmlvue.jsvue-component

Alter the background of cards in real-time

I am unfamiliar with JavaScript, but I wish to utilize a function to alter the background color of multiple cards. function ChangeColorToGreen() { document.getElementById("ChangingCard").style.background = "green"; } function ChangeColorToPurple() { ...

javascripthtmlcssbootstrap-5

What occurs when an image is unable to be rendered on the screen?

When an image cannot be displayed, what is the expected behavior of browsers? The information provided by official sources regarding this matter is intentionally vague. They mention that alt text should be utilized, but fail to clarify how it should be us ...

htmlimagecross-browser

Initiate an Elementor popup upon form submission (After submit event) using Contact Form 7 in WordPress

I have incorporated Elementor popups and contact form 7 into my WordPress website. Currently, my goal is to activate the Elementor popup after the contact form 7 form has been submitted. Below is what I have tried so far, and there have been no console er ...

javascripthtmljquerywordpress

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

htmlcss

Tips for maintaining consistent width of a div:

My current project involves designing a website that displays various quotes, with each quote rotating for a specific amount of time. However, I'm facing an issue where upon loading the page, the first quote triggers the appearance of a scrollbar, mak ...

javascripthtmlcss

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

javascripthtmlnode.js

The function is not recognized in C# programming language

Whenever I try to trigger functions by clicking buttons, nothing seems to happen and an error message appears in the console. Uncaught ReferenceError: AddressInputSet is not defined at HTMLButtonElement.onclick I'm new to this and could use ...

javascriptc#htmlasp.net-core

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Is it feasible to add a list of links to multiple HTML files? I was inspired by W3 School's W3 Include functionality, which allows you to import blocks of HTML code into various files simultaneously, making it convenient for making changes across many ...

javascripthtmlcss

Dynamic fields added using JavaScript are not recognized by PHP

I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...

javascriptphphtmlmysql

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

I've created a carousel that loads multiple images, but I'm experiencing an issue where each image is overlapping with another image from a different card. Here's a visual of the problem: As shown in the screenshot, parts of one image are a ...

csssencha-touchextjscarousel

Alignment and placement of rotated text within a table or grid in a vertical position

Struggling to rotate text in an HTML table, I've encountered alignment and text flow issues no matter what. Various CSS combinations of writing-mode and rotate have been attempted but the problem persists. Here is the test table: Code snippet: tab ...

htmlcsshtml-tablerotationcss-grid

Unusual actions regarding flexible CSS style sheet

There have been countless times when I have utilized a CSS technique that I discovered on my own. When I need a dynamic stylesheet that can be included in an HTML document, I use CSS files that are not actually CSS files, but PHP files instead. For example ...

phpcss

How can we reduce the jitter experienced during page initialisation?

Is there a way to reduce the jittering effect on a page when using frameworks like jQuery/UI, especially with widgets like the button widget during layout processing on page load? I found setting the body tag to display: none, and then using $(function() ...

jqueryhtml

Achieving vertical centering for content within :before/:after pseudo-elements

I'm striving to replicate a similar layout as shown in the image: Within a div element containing an image as part of a slideshow, I have utilized :before and :after pseudo-elements to create controls for navigating to the next (>>) or previous ...

csscss-selectorspseudo-element

Tips for Ensuring Consistent Logo Appearance Across Various Browsers

The text I added to a website appears perfectly aligned on Chrome and Explorer, but on Safari, it's positioned below the logo. How can I resolve this issue without affecting the view in other browsers? The desired layout should show as "LOGO | TEXT," ...

htmlcss

Parallax scrolling within a div creates a dynamic visual effect

Hello there, thank you for taking the time to read this. I am currently working on a website and encountering some challenges while trying to implement a specific effect. I am aiming to achieve a parallax effect similar to what can be seen on this page. As ...

jqueryhtmlcssparallax

Press a specific button within a row displayed in a table

I have a table displayed below: <table id="tabmailveille"> <tr><td> <button onclick="return Ajax(162, {'idc': '125').value,'action': 'ajout'});"><img alt="Add" src="/Images/tableaux/add.pn ...

htmlseleniumautomationselenium-idebuttonclick