Question

I’m trying to create a list of products using a <table> since it’s basically a table with rows and columns.

I want to have one of the columns list whether the item status is available or unavailable, and I’d like to represent this with a little green icon if available, red if otherwise. I also want that icon to be clickable to change it.

So I Googled and found I might be able to position it if it’s a background image, but I want it clickable, so that’s no good.

I’ve tried all the vertical aligns and centers etc.. that I’ve read and tried margins and padding and all sorts but I can’t get my little icon image to be in the middle (horiz and vert) of my little <td>.

To clear something up:

I just want to know how to align the image within the <td>. The image itself is the anchor, when its clicked, the page reloads and the icon chanages. I’ve tried positioning this image within the <td> but can’t. That’s my question: How to position it?

Answer 1

Not sure why you are having difficulty aligning your image within the table cell. Tables contain many helpful properties that help with alignment. Here’s an example table with images aligned to the center of the table cell.

http://jsfiddle.net/Puppies4Life/zka5Q/