Q:

HTML Email : put text on image in table

td {
  background: url(http://www.hubilo.com/theme/6/img/ribbon1.png);
  background-size: 220px 30px;
  background-position: center;
  background-repeat: no-repeat;
  padding-right: 10px;
  padding-top: 50px;
}

p {
  color: white;
  text-align: center;
  font-weight:100 ! important;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 1px;
  font-size: 10px;
  line-height:10px;
  font-family: 'open sans', arial, sans-serif;
}
<table bgcolor="red" width=600>
  <tr>
    <td valign="top" align="center">
      <p>Saturday 5TH MARCH, 2016</p>
    </td>
  </tr>
</table>

I want the text to be in the center of ribbon image. 
PS: As I am making HTML Emailer, I can't use div, position property.  have to stick to table tag and inline css , only. 
Thank You. 

A:

Remove padding on td tag:

<table bgcolor="red" width=600>
   <tr>
  <td valign="top" align="center" style=" background: url(http://www.hubilo.com/theme/6/img/ribbon1.png); background-size: 220px 30px; background-position: center; background-repeat: no-repeat; padding-right: 10px;">
     <p style="color: white; text-align: center; font-weight:100 ! important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 10px; line-height:10px; font-family: 'open sans', arial, sans-serif;">Saturday 5TH MARCH, 2016</p>
  </td>
   </tr>
</table>

JSFIDDLE https://jsfiddle.net/pzm4rknw/2/

