Ad

How Can I Center A Table Cell In A Row With Fewer Cells Than The Rest?

- 1 answer

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>

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad