Align table text side by side in html

user_6854117 0
Viewed 193

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

enter image description here

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

html
5 Answers

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>

user_153773550

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>
user_134276480

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>

user_12550230

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.

user_153497380

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>

user_130114860
Related