0

I tried a to use center tags, I tried to use align: center. I tried a few things and nothing is getting my td tag to center. The td tag I am trying to get centered is the very last picture and it is stuck to the left hand side. also here is the link to the actual page since I used inline css and it might be easier to pick apart in the inspector.

<table>
  <tbody>
    <tr>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
    </tr>
    <tr>
      <td> <img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/38-Breckenridge-2-6-6T-Naked-Brass_large.jpg?v=1539704926" alt="" width="613" height="258" /></td>
    </tr>
  </tbody>
</table>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Ryder Thacker
  • 1,472
  • 3
  • 13
  • 33
  • 2
    Start by making it easier on yourself and put the CSS in css instead of a `style` attribute. – Mark Schultheiss Oct 16 '18 at 18:09
  • are you trying to center the images of the trains? – Sam Creamer Oct 16 '18 at 18:09
  • 1
    `` elements are for rendering spreadsheets. Are you counting trains? Using them for layout stopped being acceptable more than a decade ago.
     – tao Oct 16 '18 at 18:13
  • I don't usually use inline styles I am just getting something up on Shopify quick and didn't want to figure out there file system. This is probably going to be rebuilt in a week so I'm not going for elegence. – Ryder Thacker Oct 16 '18 at 18:19
  • 2
    Lesson one: Don't post an absurdly complex example of a problem that can be shown with a small fraction of the markup. – isherwood Oct 16 '18 at 18:22

1 Answers1

3

To make your last row's cell full width (so you can then center stuff inside it) you need to give it colspan="3".

<tr>
  <td colspan="3" style="text-align: center;">
    <a href> 
       <img  />
   </a>
 </td>

Please note the difference: you can't center a cell in a row. You can only span it over multiple columns and center stuff inside it.

While the above will work, I need to place emphasis on the fact you should not use <table> elements for layout. It stopped being an acceptable technique more than 10 years ago.

Instead you should use either grid, flexbox or block level elements.

tao
  • 82,996
  • 16
  • 114
  • 150
  • Will try that. And I just grabbed the code from codepen for a simple gallery. I tried turning the td into a div but that also did not work. – Ryder Thacker Oct 16 '18 at 18:21