Need help? Check out our Support site, then


Image & text not align in html table

  1. I have try for few days to solve the image & text which is not align in the html table.

    Result at Visual Editor everything look like ok when i view it but it deference what happen in the page (please refer to this picture: http://postimg.org/image/q6nqnis7t/

    Attached is the code which i apply:

    <table>
    <tbody>
    <tr>
    <td>Element</td>
    <td><img title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here" /></td>
    <td><img title="Internet Explore" src="http://s15.postimg.org/i9oh2brg7/ie32.png" alt="description here" /></td>
    <td><img title="Firefox" src="http://s30.postimg.org/p6kfqq5bh/firefox32.png" alt="description here" /></td>
    <td><img title="Safari" src="http://s1.postimg.org/xaa0w398b/safari32.png" alt="description here" /></td>
    <td><img title="Opera" src="http://s27.postimg.org/ezxn6n20f/opera32.png" alt="description here" /></td>
    </tr>
    <tr>
    <td>Table</td>
    <td style="text-align:left;">Yes</td>
    <td style="text-align:left;">Yes</td>
    <td style="text-align:left;">Yes</td>
    <td style="text-align:left;">Yes</td>
    <td style="text-align:left;">Yes</td>
    </tr>
    </tbody>
    </table>

    what i have done is insert the following code
    <td style="vertical-align:top;">Element</td> but the image & text still not align.

    Actual link:
    http://learningschol.wordpress.com/2014/07/04/table-with-image/

    The blog I need help with is learningschol.wordpress.com.

  2. Hi nyobek2,

    So what you want is to have the word "Element " at the top or middle of the table cell?

    I looked at your link but I don't see where you have added the style attribute to the td tag.

    I gave it a quick test and when I do add something like
    style="vertical-align: top;" or style="vertical-align: middle;" they both seem to align the word properly.

    Are you able to add it back to your example so I can see what it is looking like on your site when it is there?

  3. Dear sandymcfadden & all,

    sorry for late reply.

    i already add the style="vertical-align: middle;"& it solve my first problem regarding the 'Element' word alignment . tq sandymcfadden.

    regarding my second problem @ http://postimg.org/image/q6nqnis7t/ , i also need to align the image to be at middle. Where should i put the style="vertical-align: middle;" inside this code <td><img title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here" /></td>

    I also just add another text beside the chrome icon. How to make sure text & icon is align @ center also.

    Actual link:
    http://learningschol.wordpress.com/2014/07/04/table-with-image/

  4. i already combine

    style="vertical-align: middle;"

    &

    <td><img title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here" /></td>

    to become

    <td style="vertical-align:middle;"><img title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here" />Chrome</td>

    but image still not align middle.

  5. i already combine

    style="vertical-align: middle;"

    &

    <td><img title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here" /></td>

    to become

    <td style="vertical-align:middle;"><img title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here" />Chrome</td>

    but image still not align middle.

  6. Hi nyobek2,
    You could try something like this. You need to add the styles to each of the td tags and images.

    <td style="vertical-align:middle; ">Element</td>
    <td style="vertical-align:middle; height: 32px; line-height: 32px;"><img style="float: left; margin-right: 10px; padding: 0;" title="Chrome" src="http://s8.postimg.org/hj8uek2xd/chrome32.png" alt="description here">Chrome</td>

    Let me know if that does what you're looking for.

  7. Dear sandymcfadden & all,

    heheeh...the code finally solve the issue. but how you determine all this

    (a) `height: 32px; line-height: 32px;">
    (b) <img style="float: left; margin-right: 10px; padding: 0;"`

  8. Hi nyobek2,

    a) Is fairly straight forward. The images you are using are 32px in height, so I just specified the height of the table cell and the line height for text to match it.

    b) I believe this is a correct explanation. Images are what are known as inline elements in HTML by default this leaves a space at the bottom of the image. By giving it a float style it takes it out of the normal flow of the document so that space is removed. I added the margin to keep the text from sitting right up next to the image. The padding I'm not even sure really needs to be there. I put it there just to be safe.

  9. Dear sandymcfadden

    tqvm for your guide & clear explanation for new wp user.

    I also try
    (a) make the

    table
    sentence to <table> as per image here http://postimg.org/image/6z5uai75p/ but the result very bad as per http://postimg.org/image/ramaaj1pr/

    (b) make column & border using the code below but still fail to see the column & border

    <table border="1">
     <tr>
      <td colspan="2">Row 1 - Col 1 & Col 2</td>
     </tr>
     <tr>
      <td>Row 2 - Col 1</td>
      <td>Row 2 - Col 2</td>
     </tr>
    </table>

    Ref:http://www.html-5-tutorial.com/table-tag.htm

    Actual link:
    http://learningschol.wordpress.com/2014/07/04/table-with-image/

  10. Hi nyobek2,

    First here is the code that you would need to use to get what you are looking for. Below I will explain what is going on and a suggestion.

    <table style="border: 1px solid #ccc;">
    <td style="border: 1px solid #ccc;"><code> <Table></code></td>

    What we are doing is over riding the default display that your theme has decided for tables. This is done with CSS. If you're going to be doing a lot of customization like this I would suggest getting the Custom CSS add-on and that would allow you to make these changes global across your site instead of having to put the style on each element in the editor.

    The reason the table tag was not showing up and just showing the word is that if you are entering this in the text mode it would treat it as an actual html tag and try to display it that way instead of displaying the actual text representation of the tag.

    To do this you need to use html entities as you can see above. The visual editor will automatically put these in for you, but if you are using the text you would need to manually put them in. < is the less than symbol and > is the greater than symbol.

    Hope that helps.

  11. I was afraid of that the forum converted them to the actual symbols.
    For the greater than symbol you would put "& gt;" without the quotes and space. The less than symbol would be "& lt;" again without the quotes and space.

    You might be able to see it better in this article http://www.w3schools.com/html/html_entities.asp

  12. Dear sandymcfadden,

    Tqvm for the detail explanation & link. sure i will apply the symbols.

  13. i already replace

    <table>
    <tbody>
    <tr>

    to

    <table style="border:3px solid #ccc;">
    <tbody>
    <tr>

    &

    <td style="border: 1px solid #ccc;"><code> <Table></code></td>
    <tbody>
    <tr>

    & the result as http://postimg.org/image/l1ed45j13/

    the border surrounding table function but how to get all cell / column border??

  14. Hi nyobek2,

    Here is an image of a post I did with the same theme you are using.
    It shows the results and the code below it used to get the results.
    http://postimg.org/image/f1jizqu7z/

    Hope that helps.

  15. wou....
    sandymcfadden tqvm for your help.
    i think it require css. i sure will try it

You must log in to post.

About this Topic