CODEWITHSUNDEEP
htmlcsshtml-table
Vishnu
Vishnu

Reputation: 724

Alignment Issue with Table Structure

Here is the code for aligning 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>[email protected]</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>

You can see there is gap difference in between images and text content. Can you please help me to make equal gap difference and fit full content inside the table class.

Please see the screenshot attached: https://i.sstatic.net/QKZt7.jpg

Upvotes: 1

Views: 64

Answers (3)

sukanya mohan
sukanya mohan

Reputation: 1

 **You have to remove width="900" and add padding to <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>[email protected]</p>
    </td>
    <td><img src="./images/address.png"></td>
    <td>
      <p>1055 Loremips Tr. Kity, TX</p>
    </td>
  </tr>
 </table>


 </body>
 </html>

Upvotes: 0

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

use css class for td and for each td can specify the inline width & 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>[email protected]</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>

Upvotes: 1

Raymond Tey
Raymond Tey

Reputation: 494

<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>[email protected]</td>
        <td style='width: 30px'><img  style='width: 30px' src="./images/address.png"></td>
        <td>1055 Loremips Tr. Kity, TX</td>
    </tr>

just change the width px according to the image width

Upvotes: 0

Related Questions