HTML signature , image is not placed next to the text

Question

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>

score 3 · Accepted Answer · edited Nov 14 '19 at 11:47

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>

I like this solution, though i think image should be place outside the table... — A. Meshu, Nov 14 '19 at 11:48
@Jefry90 if this was the right answer for you then you should accept the answer as a right answer by clicking on the Tick icon. — Siddiqui Noor, Nov 14 '19 at 11:55

A. Meshu · Answer 2 · 2019-11-14T11:36:46.660

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.

[Avoid float](https://blog.prototypr.io/should-we-stop-using-floats-e01742a88f8d) at all costs. — Paul, Nov 14 '19 at 11:32
Perhaps I should qualify that a little more. [This question/answers](https://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place) gives a little more insight into my statement. Personally, I've never had anything good from them; they're confusing at the least, and can be destructive to your overall page design; it just takes a little change here or there to the HTML and you have to re-think chunks of mark-up. — Paul, Nov 14 '19 at 11:37
I guess it's an email template and flex won't work in all cases. — A. Meshu, Nov 14 '19 at 11:39
@myonline - With flexbox you do still need to [take into account older browsers](https://caniuse.com/) that don't support it. — Paul, Nov 14 '19 at 11:39
What @Paul wrote + this is something that good-old `display: inline-block` can help you without adjusting and extra code the other elements. — A. Meshu, Nov 14 '19 at 11:41
@Paul - flexbox now is supported to old browsers like ie11 and up. — myonline, Nov 14 '19 at 11:41
@A.Meshu - the OP didn't say that this was an email template. If it is the case, then all CSS is severely restricted. — Paul, Nov 14 '19 at 11:42
@myonline - [No, it's not](https://caniuse.com/#search=flexb). IE11, like Edge and even Chrome has partial support for Flexbox. IE11 has a very poor support for it. — Paul, Nov 14 '19 at 11:44

score 0 · Answer 3 · edited Nov 14 '19 at 11:47

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>

eye-wonder · Answer 4 · 2019-11-14T11:54:40.200

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>

HTML signature , image is not placed next to the text

4 Answers4