Title: ***Table Coding Help***
Last modified: August 20, 2016

---

# ***Table Coding Help***

 *  [dhanken](https://wordpress.org/support/users/dhanken/)
 * (@dhanken)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/)
 * Hello,
 * I have a table on the following page with hyperlinked images: [http://www.charlesifergan.com/before-after/](http://www.charlesifergan.com/before-after/)
 * I would like to make the first row have 4 images, the second have 2, the third
   have 3, the forth have 4 again, etc. Just to give it some interest. The row with
   2 images is no problem as I can put empty cells in the first in last, but the
   third row is not coming out right. I need it to be centered, but I am having 
   a hard time finding the correct code to do so.
 * I tried rowspan = “4” on a <td> with 3 elements, but it puts each image on it’s
   own line.
 * I am just not sure where to go from here.
 * Any help would be greatly appreciated!!!
 * Thanks so much!
 * Danielle

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763221)
 * You might want to look at these errors before going any further — some are relevant
   to the table…
 * [http://validator.w3.org/check?uri=http%3A%2F%2Fwww.charlesifergan.com%2Fbefore-after%2F&charset=%28detect+automatically%29&doctype=Inline&group=0](http://validator.w3.org/check?uri=http%3A%2F%2Fwww.charlesifergan.com%2Fbefore-after%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763240)
 * Also, you need to use “colspan” not “rowspan”. The way to get three in a row 
   is to put all the images (and the anchor tags) inside ONE td tag that spans 4
   columns — this is your second row for example:
 *     ```
       <tr>
       <td colspan="4" style="text-align: center;"><a href="http://www.charlesIfergan.com/cynthia-before-after/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.charlesIfergan.com']);" target="_blank"><img class="size-thumbnail wp-image-1161 alignnone" title="Cynthia" src="http://www.charlesIfergan.com/wp-content/uploads/2010/08/Cynthia1-150x184.jpg" alt="" width="150" height="184" /></a>
       <a href="http://www.charlesIfergan.com/iwona-before-and-after/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.charlesIfergan.com']);" target="_blank"><img class="alignnone size-thumbnail wp-image-1346" title="Iwona" src="http://www.charlesIfergan.com/wp-content/uploads/2010/08/Iwona-150x184.jpg" alt="" width="150" height="184" /></a>
       <a href="http://www.charlesIfergan.com/iwona-before-and-after/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.charlesIfergan.com']);" target="_blank"><img class="alignnone size-thumbnail wp-image-1346" title="Iwona" src="http://www.charlesIfergan.com/wp-content/uploads/2010/08/Iwona-150x184.jpg" alt="" width="150" height="184" /></a>
       </td>
   
       </tr>
       ```
   
 * Another thing is that putting the style tag inside a span does not have the same
   effect as the style being inside the td tags — it’s not really evident in your
   table – because the images are the full size of the table cells, but FYI. In 
   general, you’d want to use CSS for that kind of style anyway:
 *     ```
       td {
          text-align: center;
       }
       ```
   
 *  Thread Starter [dhanken](https://wordpress.org/support/users/dhanken/)
 * (@dhanken)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763246)
 * Thank you so much for the help! I did try the code you posted above, but it seems
   to put all the images on different lines. Do you know how I can get around that?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763257)
 * Do you have the colspan=”4″ in the td tag in there? You might also need to make
   the images display: inline; so they go side by side rather than vertically…
 * Try adding this to style.css:
 * #beforeafter img {
    display: inline; }
 * Is there a reason you have so much inline CSS in your site? That’s really not
   ideal…
 *  Thread Starter [dhanken](https://wordpress.org/support/users/dhanken/)
 * (@dhanken)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763261)
 * This site is a mess. I’m just taking over now. It really needs a redesign.
 * As for the display: inline;, it didn’t seem to work…
 * Here is what I have for the table row:
 *     ```
       <tr>
       <td colspan="4" style="text-align: center;"><a href="http://www.charlesIfergan.com/cynthia-before-after/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.charlesIfergan.com']);" target="_blank"><img class="size-thumbnail wp-image-1161 alignnone" title="Cynthia" src="http://www.charlesIfergan.com/wp-content/uploads/2010/08/Cynthia1-150x184.jpg" alt="" width="150" height="184" /></a>
       <a href="http://www.charlesIfergan.com/iwona-before-and-after/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.charlesIfergan.com']);" target="_blank"><img class="alignnone size-thumbnail wp-image-1346" title="Iwona" src="http://www.charlesIfergan.com/wp-content/uploads/2010/08/Iwona-150x184.jpg" alt="" width="150" height="184" /></a>
       <a href="http://www.charlesIfergan.com/iwona-before-and-after/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.charlesIfergan.com']);" target="_blank"><img class="alignnone size-thumbnail wp-image-1346" title="Iwona" src="http://www.charlesIfergan.com/wp-content/uploads/2010/08/Iwona-150x184.jpg" alt="" width="150" height="184" /></a>
       </td>
       </tr>
       ```
   
 * and here is what I have for the CSS:
 *     ```
       .beforeafter {
         width:800px;
         border: 0px;
         cellspacing: 0px;
         cellpadding: 0px;
         align: center;
         display: inline;
       text-align: center;
       }
   
       .beforeafter td {
         padding-bottom: 10px;
       }
   
       .beforeafter img {
       display: inline;
       }
       ```
   
 *  Thread Starter [dhanken](https://wordpress.org/support/users/dhanken/)
 * (@dhanken)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763299)
 * I’m thinking my best option is to just not use a table for this. and just position
   my images with css.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763340)
 * Sorry for the delay — other stuff to do – it looks good now. Are you happy with
   it? Tables are not really for layout anymore anyway so probably a better way 
   to go…
 * > This site is a mess. I’m just taking over now. It really needs a redesign.
 * Oh, ugh — have to agree with you there. Good luck with it.
 *  Thread Starter [dhanken](https://wordpress.org/support/users/dhanken/)
 * (@dhanken)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763347)
 * No worries! Yes, I am happy now.
 * Thanks so much for your willingness to help!
 * And yeah, seriously. Need big time luck (or just redo the site myself without
   the client paying to make updates easier 🙂 ).
 * Thanks again!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘***Table Coding Help***’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [tables](https://wordpress.org/support/topic-tag/tables/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 2 participants
 * Last reply from: [dhanken](https://wordpress.org/support/users/dhanken/)
 * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/table-coding-help/#post-2763347)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics