HTML table content alignment - html

Question

This is my code
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:40px;line-height:2px;color:red;">◖</td>
<td style="width:80px;height:30px;background-color:red;"></td>
<td style="font-size:40px;line-height:2px;color:red;">◗</td>
</tr>
</table>
Fiddle Example
What I want to do is to appear my table content as the div below ( with border radius )
<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>
I have to do it with table like this because this code will use in html email for Outlook Desktop client which doesn't support border-radius .

Answer 1

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<div style="padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
background-repeat:no-repeat;
transform: rotate(180deg);
height: 186px;
width:90px;
display:inline-block;
">
</div>
<div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
<div style="
padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
height: 186px;
background-repeat:no-repeat;
width:90px;
display:inline-block;
background-position: 0px 7px;
"></div>
</tr>
</table>
JSFiddle
Use images instead of characters.

Answer 2

Completely based on div.
div.my-button{
padding: 12px 18px 12px 18px;
border: 1px solid #e9703e;
background-color: #EB7035;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
width: 119px;
}
div.my-button a{
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
<div class="my-button">
I am a button →
</div>