Positioning text inside HTML table with an image

Question

I need to have some text next to an image on an HTML page. So I figured a table was the best way to go...

<table width="500px" >
  <tbody>
     <tr>
        <td align="left">
           <p>
               <b>Isn't she hot??</b>
           </p>
        </td>
        <td align="right">  
            <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>  
        </td>
       </tr>
  </tbody>

Fiddle https://jsfiddle.net/abuMariam/rsnc9vjp/

Problem is what if I want to move that text all the way up or all the way down. I can't because the image width makes both td elements to be wide so I have no way to vertically position the text within its td.

Can I still keep the table but still move the text up and down in its cell?

_"So I figured a table was the best way to go"_ In 1995 maybe. You should use tables for tabular data, not layout. That's what CSS is for. — j08691, Jun 29 '16 at 15:10
yeah, I am an old timer. Could you please share the code of how this can be done with CSS? — AbuMariam, Jun 29 '16 at 15:29

APAD1 · Accepted Answer · 2016-06-29T16:05:46.003

Yes, just use vertical-align="top" or vertical-align="bottom" on the td. Do you really need to use a table for this though? Tables should seldom be used nowadays, and only for tabular data.

<table width="500px" >
  <tbody>
  <tr>
    <td align="left" style="vertical-align:top;">
      <p>
        <b>Isn't she hot??</b>
      </p>
    </td>
    <td align="right"> 
      <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>  
    </td>
  </tr>
  </tbody>
</table>

Here's one way you could do it without using a table, this method causes the divs to act like table cells:

.container {
  width:500px;
  display:table;
}
  .container > div {
    width:50%;
    display:table-cell;
  }
    .container > div p {
      margin:0;
    }
    .container .left {
      vertical-align:top;
    }
    .container .right {
      text-align:right;
    }

<div class="container">
  <div class="left">
    <p>
      <b>Isn't she hot??</b>
    </p>
  </div>
  <div class="right"> 
    <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>  
  </div>
</div>

`valign` was deprecated back in HTML 4.01 and obsolete in HTML 5. It's far better to advise the user to use CSS than use outdated HTML attributes. — j08691, Jun 29 '16 at 15:13
Your suggestion worked APAD1, could you also show how this can be done without using tables? — AbuMariam, Jun 29 '16 at 15:50
@AbuMariam sure thing, I have updated my answer. There are [a few different ways you could accomplish it without using a table](http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css). The way I presented treats the `divs` like table cells. Another solution would be to use absolute positioning to specify the vertical alignment of the text. — APAD1, Jun 29 '16 at 16:07

Positioning text inside HTML table with an image

1 Answers1