Как выровнять текстовые кнопки в HTML

Question

Я пытаюсь выровнять 3 текстовых поля по горизонтали, хотелось бы получить совет / помощь!

Все они должны быть расположены в ряд, однако они располагаются горизонтально.

Я полагаю, что это как-то связано с тегами td и table.

 <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody>

     <td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>

 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>



          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">


     <td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">



 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>




             <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody>

     <td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>


 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
    </tr>
     </tbody>
   </table>
   </td>
    </tr>
  </tbody>
   </table></td>

Answer 1

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody>
 <td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>
<tr>
 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>
</tr>
</tbody></table>
</td>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>

<tr>

     <td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>

<tr>
 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td style="width:33%;">


             <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody><tr>

     <td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>
<tr>
 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
 </tr>
 </tbody></table>
</td>
</tr>
 </tbody></table>
 </td>
    </tr>
     </tbody>
   </table>