CODEWITHSUNDEEP
csshtml-table
user6381271
user6381271

Reputation:

Text and Image in Table HTML /CSS

Does anybody know how to get above and below the image, text in the table? Now I have this:

enter image description here

This is my code:

Code

Upvotes: 1

Views: 20144

Answers (3)

Molarosa
Molarosa

Reputation: 69

Add text before and after the img tag, and set "display:block" to the img tag. That solved the problem for me.

Upvotes: 0

s1h4d0w
s1h4d0w

Reputation: 781

Simply add the text before and after the <img>tags and add a linebreak.

You also have two closing </td> element after each image. Please see my code below for proper code.

The <br /> code you see stands for a line-break. It starts a new line. If you remove those codes the text and images would be next to eachother instead of below eachother.

Example:

/* ignore the CSS, it's mainly for looks */

table {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

td {
  padding-bottom: 20px;
}

img {
  width: 100px;
  height: 100px;
}
<table cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td>Text<br /><img src="image.jpg" /><br />Text</td>
    <td>Text<br /><img src="image.jpg" /><br />Text</td>
    <td>Text<br /><img src="image.jpg" /><br />Text</td>
  </tr>
  <tr>
    <td>Text<br /><img src="image.jpg" /><br />Text</td>
    <td>Text<br /><img src="image.jpg" /><br />Text</td>
    <td>Text<br /><img src="image.jpg" /><br />Text</td>
  </tr>
</table>

Upvotes: 4

JRsz
JRsz

Reputation: 2941

There are a couple of options. If you want it all very nice and clean I recommend more rows like this:

<table>
    <tr>
        <td>text above pic1</td>
        <td>text above pic2</td>
        <td>text above pic3</td>
    </tr>
    <tr>
        <td>pic1</td>
        <td>pic2</td>
        <td>pic3</td>
    </tr>
    <tr>
        <td>text below pic1</td>
        <td>text below pic2</td>
        <td>text below pic3</td>
    </tr>
    [...and so on...]
</table>

Upvotes: 0

Related Questions