How to center this table cell inside a row?

Question

How could I center the single cell inside a tr, is there a property that I'm not aware of perhaps? So, I would like that single cell to be centered no matter how many cells will be added above or below, if that's possible..? This is in the context of an email template.

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

I know you will say it's not a duplicate ... but it's as all you have to do is to center the table element using `margin:0 auto` — Temani Afif, May 14 '18 at 11:34
yeah, thanks...sorry, using it in the context of the e-mail template — Smithy, May 14 '18 at 11:35

score 0 · Accepted Answer · answered May 14 '18 at 11:32

0

just add align="center" to the table which you want to make center

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table align="center">
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

answered May 14 '18 at 11:32

Zuber

3,393
1
19
34

1

NO : https://www.w3schools.com/tags/att_table_align.asp --> **The align attribute of is not supported in HTML5. Use CSS instead.**
– Temani Afif May 14 '18 at 11:36
@smithy please don't accept this answer and don't use it ... it provides an obselete non supported way to center, refer to the link I shared. – Temani Afif May 14 '18 at 11:50
This is the right/easiest way of doing it if you're building html email – gj-wes May 15 '18 at 08:03

score 0 · Answer 2 · answered May 14 '18 at 11:36

Simple Apply left and right margin: auto of the inner table

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}

/*Apply left and right margin: auto of the inner table*/
#main table {
  margin:auto;
}

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

How to center this table cell inside a row?

2 Answers2