[Resolved] Problems with images in tables

Home Forums Support [Resolved] Problems with images in tables

Home Forums Support Problems with images in tables

  • This topic has 3 replies, 2 voices, and was last updated 9 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #83088
    Alison

    Hi Tom,

    I’m experiencing a problem when I put an image in a cell of a table. My goal is to have two columns of information with one column having an image and the other having text, and the image and the text both aligning to the top of the cell. I’ve used similar sorts of tables on other sites I run with different themes, and haven’t encountered the problem I’m encountering – so I hope it’s something that’s easy to adjust!

    The problem that occurs is that, when I put an image in a cell , the image aligns really weirdly, out of the top of the cell. I took a screenshot of how it looks here: http://nifti.washington.edu/wordpress/wp-content/uploads/2015/03/AlignmentProblem.jpg.

    The only way I’ve been able to get the images to align “properly” is if I add some text on top of them in the same cell. But I don’t want text, so the best I’ve been able to do is add a nbsp and a carriage return on top of the image, but it’s only a temporary solution because I don’t want/need that extra space. This is what that makes it look like: http://nifti.washington.edu/about/leadership/ – you can see that the images and names don’t line up at the top of each row because of that extra space.

    I thought about using some of the column organizing widgets, but I need the rows of my tables to line up (i.e., so that images and text line up appropriately. I also thought about writing the table in CSS rather than HTML to see if that fixed the alignment issue, but my understanding is that there is no support in CSS for cells that span multiple rows, which I needed to use in order to solve a different problem…

    I’ve used similar sorts of tables on other sites I run with different themes, and haven’t encountered this problem. I’m hoping it’s just something to do with how images are set to float in this theme… or something? Any ideas?

    Thanks so much for your help.

    #83212
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Using tables for content like this is a pretty old method – tables are meant for tabular data.

    That being said – why have two different <tr> elements for the content? Why not something like this:

    <table>
          <tbody>
                <tr>
                      <td>Image in here</td>
                      <td>Content in here</td>
                </tr>
          </tbody>
    </table>

    Have you tried using a plugin like this?: https://wordpress.org/plugins/lightweight-grid-columns/

    It will allow you to create columns – one for the image, and one for the content.

    Let me know ๐Ÿ™‚

    #83435
    Alison

    Hi Tom,

    Thanks for your reply. The table had been set up with two <tr> elements because the cells in the left column spanned two rows in the right column… which I was doing because I was having problems with getting too much space between two paragraphs in the same cell – having two cells on top of each other solved the problem. Not an elegant solution, but I did test out your suggested table code and still have the same problem with how the image was aligning (or not aligning, as it were).

    In the end, I took your suggestion and used the plugin you suggested, which thankfully seems to be one of the few column-producing plugins that resizes images in the columns responsively – so thank you for that suggestion. I was still left with the issue of two much space between paragraphs, but I eventually figured out how to write the CSS for paragraph classes with smaller margins, and finally managed to get it to do what I needed, in probably a much more elegant way. Thanks for your help in getting there.

    #83440
    Tom
    Lead Developer
    Lead Developer

    Hi Alison,

    Glad you were able to sort it out and that my suggestion was somewhat helpful ๐Ÿ™‚

    Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.