CODEWITHSUNDEEP
htmlcss
Jefry90
Jefry90

Reputation: 89

HTML signature , image is not placed next to the text

I have a signature on which i need to add image beside it. But i am not sure how exactly and what the css to be. Currently it is displayed below the text , where exactly should i place the image? In the same tr or td ?

    <BODY style="font-size:10pt; font-family:Segoe UI, sans-serif;">
    
    <table cellpadding="0" cellspacing="0">
     <tbody style="vertical-align:top;">
    
      <tr>
       <td colspan="2" style="font-size:11pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top"><span style="font-weight: bold; color:#123E93">John Smith</span><br>
         <span>Sales Team</span></td>
      </tr>
      <tr>
       <td colspan="" style="font-size:8pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top">
        <span style="color:#123E93">Mobile </span><span>+359 88888888</span><br>
        <span style="color:#123E93">E-mail </span><a style="text-decoration: underline; color: #2a2a2a;" href="mailto:email@gmail.com"><span>email@gmaail.com</span></a><br>
        <span style="color:#123E93">Skype </span><span>skype ID</span><br>
        <span style="color:#123E93">Web </span><a style="text-decoration: underline; color: #2a2a2a;" href="https://www.something.com/" target="_blank"><span>https://something.com/</span><br></a>
       </td>
      </tr>
     <tr>
       <td>
        <img src="png">
       </td>
      </tr>
    </tbody>
  <table>

Upvotes: 0

Views: 422

Answers (4)

eye-wonder
eye-wonder

Reputation: 1193

It will have to be placed in the second <td> of one of the <tr>s. colspan="2" takes the space of two <td>s, even if it is only one in the first <tr>. Example:

<table>
    <tbody>
        <tr>
            <td colspan="2"><strong>John Smith</strong><br />
            Sales Team</td>
        </tr>
        <tr>
            <td>Mobile +359 88888888<br />
            E-mail <a href="mailto:email@gmail.com">email@gmaail.com</a><br />
            Skype skype ID<br />
            Web <a href="https://www.something.com/" target="_blank">https://something.com/</a></td>
            <td><img src="png" /></td>
        </tr>
    </tbody>
</table>

(I guess this is for some email signature)

<table>
    <tbody>
        <tr>
            <td colspan="2"><strong>John Smith</strong><br />
            Sales Team</td>
        </tr>
        <tr>
            <td>Mobile +359 88888888<br />
            E-mail <a href="mailto:email@gmail.com">email@gmaail.com</a><br />
            Skype skype ID<br />
            Web <a href="https://www.something.com/" target="_blank">https://something.com/</a></td>
            <td><img src="png" /></td>
        </tr>
    </tbody>
</table>

You can join two cells in a column as well:

<table cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td style="vertical-align:top"><strong>John Smith</strong><br />
			Sales Team</td>
			<td rowspan="2" style="vertical-align:top"><img src="png" /></td>
		</tr>
		<tr>
			<td style="vertical-align:top">Mobile +359 88888888<br />
			E-mail <a href="mailto:email@gmail.com">email@gmaail.com</a><br />
			Skype skype ID<br />
			Web <a href="https://www.something.com/" target="_blank">https://something.com/</a></td>
		</tr>
	</tbody>
</table>

Upvotes: 0

Siddiqui Noor
Siddiqui Noor

Reputation: 8036

Although you can do it in several ways but let's try this one:

I see you were trying to use colspan whether you needed the rowspan. If you really want to use the image inside the table. The best and easy thing is to create an extra <td> in your first row only and use rowspan=2 to enlarge until the next row like the following: 

<table>
  <tbody>
    <tr>
      <td style="font-size:11pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top"><span style="font-weight: bold; color:#123E93">John Smith</span><br>
      <span>Sales Team</span></td>
      <td rowspan="2" ><img width="150" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Kazuki_Nakajima_2008_Britain.jpg/1200px-Kazuki_Nakajima_2008_Britain.jpg"></td>
    </tr>
    <tr>
      <td colspan="" style="font-size:8pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top">
      <span style="color:#123E93">Mobile </span><span>+359 88888888</span><br>
      <span style="color:#123E93">E-mail </span><a style="text-decoration: underline; color: #2a2a2a;" href="mailto:email@gmail.com"><span>email@gmaail.com</span></a><br>
      <span style="color:#123E93">Skype </span><span>skype ID</span><br>
      <span style="color:#123E93">Web </span><a style="text-decoration: underline; color: #2a2a2a;" href="https://www.something.com/" target="_blank"><span>https://something.com/</span><br></a>
      </td>
    </tr>
</tbody>
    </table>

Upvotes: 2

DigitalSrc
DigitalSrc

Reputation: 9

Simply add a new cell within the same row as the name and then set a colspan="2" to a cell in a row below. That way you will keep everything within the table.

<BODY style="font-size:10pt; font-family:Segoe UI, sans-serif;">
    
    <table cellpadding="0" cellspacing="0">
     <tbody style="vertical-align:top;">
    
      <tr>
      <td>
        <img src="png">
       </td>
       <td style="font-size:11pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top"><span style="font-weight: bold; color:#123E93">John Smith</span><br>
         <span>Sales Team</span></td>
      </tr>
      <tr>
       <td colspan="2" style="font-size:8pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top">
        <span style="color:#123E93">Mobile </span><span>+359 88888888</span><br>
        <span style="color:#123E93">E-mail </span><a style="text-decoration: underline; color: #2a2a2a;" href="mailto:email@gmail.com"><span>email@gmaail.com</span></a><br>
        <span style="color:#123E93">Skype </span><span>skype ID</span><br>
        <span style="color:#123E93">Web </span><a style="text-decoration: underline; color: #2a2a2a;" href="https://www.something.com/" target="_blank"><span>https://something.com/</span><br></a>
       </td>
      </tr>
    </tbody>
    <table>

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

Move it outside the table and float it. Something like this maybe?

<BODY style="font-size:10pt; font-family:Segoe UI, sans-serif;">
<img src="png" style="float: left;">
<table cellpadding="0" cellspacing="0">
 <tbody style="vertical-align:top;">
  <tr>
   <td colspan="2" style="font-size:11pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top"><span style="font-weight: bold; color:#123E93">John Smith</span><br>
     <span>Sales Team</span></td>
  </tr>
  <tr>
   <td colspan="" style="font-size:8pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top">
    <span style="color:#123E93">Mobile </span><span>+359 88888888</span><br>
    <span style="color:#123E93">E-mail </span><a style="text-decoration: underline; color: #2a2a2a;" href="mailto:email@gmail.com"><span>email@gmaail.com</span></a><br>
    <span style="color:#123E93">Skype </span><span>skype ID</span><br>
    <span style="color:#123E93">Web </span><a style="text-decoration: underline; color: #2a2a2a;" href="https://www.something.com/" target="_blank"><span>https://something.com/</span><br></a>
   </td>
  </tr>
</tbody>
<table>

EDIT As for @Paul comment, another layout can be this:

<BODY style="font-size:10pt; font-family:Segoe UI, sans-serif;">
<img src="png" style="vertical-align: top;">
<table cellpadding="0" cellspacing="0" style="display: inline-block;">
 <tbody style="vertical-align:top;">
  <tr>
   <td colspan="2" style="font-size:11pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top"><span style="font-weight: bold; color:#123E93">John Smith</span><br>
     <span>Sales Team</span></td>
  </tr>
  <tr>
   <td colspan="" style="font-size:8pt; padding-bottom:10px; padding-top:0; padding-left:0; padding-right:0; vertical-align:top;" valign="top">
    <span style="color:#123E93">Mobile </span><span>+359 88888888</span><br>
    <span style="color:#123E93">E-mail </span><a style="text-decoration: underline; color: #2a2a2a;" href="mailto:email@gmail.com"><span>email@gmaail.com</span></a><br>
    <span style="color:#123E93">Skype </span><span>skype ID</span><br>
    <span style="color:#123E93">Web </span><a style="text-decoration: underline; color: #2a2a2a;" href="https://www.something.com/" target="_blank"><span>https://something.com/</span><br></a>
   </td>
  </tr>
</tbody>
<table>

Here i added to the table display: inline-block; and to the img vertical-align: top;

Anyway, you need to put out the image from the table.

Upvotes: 0

Related Questions