Align table text side by side in html - html

Question

Below is my html code in which I am trying to create a quotation form. I have added rate and below it I want to add the rates of each services.
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
Browser Result
I want to set it to the right in line with Below are the services that you will be provided:
Any help would be highly appreciated

Answer 1

I found two issues:
two tags were missing: <a> and </table>
there was a colspan and a float that were unnecessary
So your example is working as expected:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
If you want "Rate" to be aligned right with a big gap between the two cells, you just need to give the nested table a width: 100%;:
#nested_table {
width: 100%;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table id="nested_table" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
I don't know why you are nesting the tables since you get exactly the same result without nesting and a little css for the table row:
#secondTable tr {
display: flex;
align-items: center;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
...and width right alignment:
#secondTable tr {
display: flex;
align-items: center;
}
#secondTable td {
width: 50%;
}
#secondTable td p {
text-align: right;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>

Answer 2

Since you are using "h5" tag inside a "td" ;it create a margin , so you have to remove it:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr >
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5 style="margin-block-start:0; margin-block-end:0;">
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
<p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

Answer 3

Don't like tables approach, but starting from your snippet a possible solution is alter "Rate" td:
<td style="vertical-align:bottom;height:90px;">
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td style="vertical-align:bottom;height: 90px;">
<p>
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>

Answer 4

You may be able to utilize display: flex or display: grid to achieve this. I don't have a snippet that you can copy/paste, but these links above have a few.

Answer 5

maybe this can help,
you want result like this ?
table {
flex-wrap: nowrap;
}
table h5 {
display: inline-block;
}
table table {
display: inline-block;
vertical-align: middle;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>