WordPress.org

Support

Support » How-To and Troubleshooting » Displaying Images Without Tables – how?

Displaying Images Without Tables – how?

  • Thea

    @dorothy1508

    I want to display four images side-by-side on one of my pages. I used a table but can’t get it to centre nicely. On researching how to fix it, I learned that using tables to display images is old hat.

    So I know I need to use code, but I can’t find out how. Can someone point me in the right direction?

    I only want to have these four images side-by-side, it’s not something I need to do anywhere else on the site.

    http://bellydanceoz.com

Viewing 8 replies - 1 through 8 (of 8 total)
  • Here is an article with sample code that shows how to display posts in a row. You will need to adapt the code to your theme.
    http://wordpress.mcdspot.com/2010/11/28/align-posts-in-a-row/

    Thea

    @dorothy1508

    Thanks vtxyzzy, but they’re not posts. They are images.

    WPyogi

    @wpyogi

    Forum Moderator

    The CSS code would be the same concept — you’d just be using images rather than divs for the posts. This reference page explains the CSS:

    http://www.w3schools.com/css/css_float.asp

    Krishna

    @1nexus

    Member

    If you want to use tables, try this:
    http://www.w3schools.com/tags/tag_table.asp

    Thea

    @dorothy1508

    Thanks yogi. I can see what that’s doing, but have no idea how to apply it to my page. I’m a total dunce at CSS I’m afraid, I’m not even sure where to paste it. Maybe I’ll just live with it as is, thanks for trying to help!

    Thea

    @dorothy1508

    Krishna, I have used a table, but I’m told that’s not a good idea.

    Perhaps you can do something like this:

    1) Setup your HTML like this:

    <div class="image-wrapper">
    <img class="special" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/bellydanceclass3.jpg">
    <img class="special" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/find-a-belly-dancer2.jpg">
    <img class="special" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/blog.jpg">
    <img class="last" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/dreamstime_xs_15712507.jpg">
    </div>

    Now setup your css like this:

    .image-wrapper {
    	text-align: left;
    }
    img.special {
    	float: left;
    	margin-right: 10px;
    	width: auto;
    	height: auto;
    	border: 2px blue solid;
    	padding: 2px;
    }
    img.last {
    	float: left;
    	width: auto;
    	height: auto;
    	border: 2px blue solid;
    	padding: 2px;
    }

    That is all there is to it.

    If you want to have text below or above the picture then you can put each individual image into its own DIV and have a P tag to add your text.

    Good luck.

    @thea, the code would be nearly identical. The only difference would be that you would display the image instead of the post content.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Displaying Images Without Tables – how?’ is closed to new replies.
Skip to toolbar