How get rid of this problem of inserting image in table or td?Need help please

  • shakir

    #5114

    I am using this theme since last 2 months but this is the first i needed to insert a image in a table.I took a image of of 383px width and 500px height and also took a td with the same width and height in a table.I took table with 0px border.Then i insert the image to that td but after publishing i see the image in bellow way:

    seezw.jpg

    And code of my table and image is bellow:

    <table width="483" border="o" cellspacing="0" cellpadding="0">
    <tr>
    <td width="383" height="500"><img src="http://sitename.com/wp-content/uploads/2012/03/hello.png" alt="" title="hello" /></td>
    <td width="100" height="500">hello</td>
    </tr>
    </table>

    So now can anyone help me please how to get remove automatic space from the 4 side of the image and automatic border size?

    Mod

    Kenneth John Odle

    #30705

    Moved to Support. Please post in the correct section next time.

    In your custom CSS or child theme css, define a special image class and apply it in your table.

    CSS:

    .imgshakir {
    padding: 0;
    margin: 0;
    }

    In your post:

    <img src="http://sitename.com/wp-content/uploads/2012/03/hello.png" alt="" title="hello" class="imgshakir" />

    You can name the class whatever you like, just be sure to make it something unique.

    shakir

    #30706

    So if i will post 5 different image in 5 table then will I need to use 5 different code in custom css with the name of 5 image ?

    shakir

    #30707

    And no it did not work fully.It only reduced the space size of top and bottom of the table but nothing happened in left or right side and also still now table border is showing.So any more way please?

    Mod

    Kenneth John Odle

    #30708
    Quote:
    So if i will post 5 different image in 5 table then will I need to use 5 different code in custom css with the name of 5 image ?

    No. You will apply the same class to all images.

    Quote:
    And no it did not work fully.It only reduced the space size of top and bottom of the table but nothing happened in left or right side and also still now table border is showing.

    That’s probably because the table cells have some padding applied to them. You can add the same class to them, as well:

    <td width="383" height="500" class="imgshakir" >

    You can visit http://www.w3schools.com to learn more about how to control padding, margins, borders, and tables.

    shakir

    #30709

    Thanks for your answer.I do not understand well about coding for that i can not find our the answer from w3school.You last solution helps me to remove space from 3 side now only in right side left.Can you help me to remove that in any way?please

    Mod

    Kenneth John Odle

    #30710

    Not without a link to your site. But you can use Firebug to isolate those codes and experiment. Josh has a good video tutorial here:

    http://www.joshlobe.com/2011/10/using-mozilla-firebug-to-inspect-css-files/

    shakir

    #30711
    Mod

    Kenneth John Odle

    #30712

    I just realized that you are using this code:

    <td width="383" height="500" class="imgshakir" >

    Since you are specifying the width of the table cell, if the image is not wide enough to fill it, there will be space left over. Try this code instead:

    <td class="imgshakir" >

    It is generally a bad idea anyway to add styling information to HTML. You should define your styles in your CSS and apply them as classes or ID’s in your HTML.

    shakir

    #30713

    ok changed but now it takes more space.can i do some change in style.css?

Viewing 10 posts - 1 through 10 (of 11 total)
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!