Ricardo Ribeiro
Ricardo Ribeiro

Reputation: 87

HTML Table align images and text

In a sample article I added a html table widh 2 columns, left column for images and right column for image descriptions.

The problem is, the text description on the right column is below the images, it´s like the images are forcing the text to break into another line.

this is a sample code as I used:

<table>
<tr>
<td>Image.jpg</td>
<td>Image.jpg description</td>
</tr>
<tr>
<td>Image2.jpg</td>
<td>Image2.jpg description</td>
</tr>
</table>

You can see the problem here On this page

Upvotes: 4

Views: 22974

Answers (3)

Marc
Marc

Reputation: 11613

Try this CSS in the text <TD>:

vertical-align:top;

i.e.:

<td style="vertical-align:top;">
   Trio: Quaisquer três cartas do mesmo valor. Este exemplo ...
</td>

Upvotes: 1

Rachel Arts
Rachel Arts

Reputation: 45

So to understand you want the photo and the text to align correct? Can you use a valign attribute?

<table>
<tr>
 <td valign="top">January</td>
 <td valign="top">$100</td>
</tr>
<tr> 
<td valign="bottom">February</td>
 <td valign="bottom">$80</td>
   </tr>
</table>

Top, Bottom and Center should be used depending on how you want it to align.

Upvotes: 0

kpotehin
kpotehin

Reputation: 1035

You just have to add style="vertical-align:top" to td

Or vertical-align:middle if you'd like to position the text in the middle of the row

Upvotes: 8

Related Questions