Right Align and Left Align Text in Same HTML Table Cell

Right align and left align text in same HTML table cell

If you want them on separate lines do what Balon said. If you want them on the same lines, do:

<td>
  <div style="float:left;width:50%;">this is left</div>
  <div style="float:right;width:50%;">this is right</div>
</td>

Aligning elements left and right inline in td for html email

please use this HTML - no need to cal or other HTML, table have different CSS so use table parameter or attribute for email.

<table width="100%" border="0" cellpadding="10" cellspacing="0">    <tr bgcolor="#00a2c5">     <td align="left" width="50%" height="40px"><a href="#" style="color:#ffffff;">Call 13 63 93</a></td>     <td align="right" width="50%"><a href="#" style="color:#ffffff;">Clarendon.com.au</a></td>    </tr></table>

How may I align text to the left and text to the right in the same line?

<p style="text-align:left;">    This text is left aligned    <span style="float:right;">        This text is right aligned    </span></p>

I want different text in the same line positioned to the left and right inside a table cell

I dont know why you are using floats for a table, but still, the solution to your problem is simple. Just add this to your css and you are good to go.

.classroom{
    text-align: right;
    float: right;
    position: relative;
    top: -15px;
}
.group{
    text-align: left;
    float: left;
    position: relative;
    top: -15px;
}

How did this solve the problem?
--> It's simple, you are setting the positions of those two elements to be relative, and then change the top to -15px so the text goes 15px above its original position.

Also, if you want to change how high the elements should go, just change the top: ; value to whatever you like.

align right in a table cell with CSS

Use

text-align: right

The text-align CSS property describes
how inline content like text is
aligned in its parent block element.
text-align does not control the
alignment of block elements itself,
only their inline content.

See

text-align

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

Text-align class for inside a table

Bootstrap 3

v3 Text Alignment Docs

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

Bootstrap 4

v4 Text Alignment Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

---

Bootstrap 5

v5 Text Alignment Docs

text-left has been replaced with text-start,
text-right has been replaced with text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Can I center some cells in a table and left align others?

Ok, please check this and see if this will help you. About the table issue.
Some Email program don't render Inline-CSS to the body of email. You may consider use the style attributes to support what Table design is missing. I used to do this when generating newsletter.

<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">  <tr>    <td>      <table cellspacing="0" cellpadding="0" border="0">        <tr>          <td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>          <td style="line-height:1.6;padding: 5px 15px;">            <div>Name Here, Position Title</div>            <div>Company Name</div>            <div>Stress address wrapped around here</div>            <div>Desk: 123.456.789 | Cell: 123.456.789</div>          </td>        </tr>      </table>    </td>  </tr>  <tr>    <td style="padding: 5px;">      <table width="100%" cellspacing="0" cellpadding="5" border="0">        <tr>          <td align="center">            <table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">              <tr>                <td> <a href="#">Icon1</a> </td>                <td> <a href="#">Icon2</a> </td>                <td> <a href="#">Icon3</a> </td>                <td> <a href="#">Icon4</a> </td>                <td> <a href="#">Icon5</a> </td>                              </tr>            </table>          </td>        </tr>        <tr>          <td align="center">            A Certified B Corporation <sup>®</sup>          </td>        </tr>      </table>    </td>  </tr></table>

Better way to right align text in HTML Table

Updated (after 10+ years!): Yes! It's possible to do this more efficiently now, with widespread practical browser support, using the nth-child selector.

HTML:

<table>
<tr>
<td>foo 1</td>
<td>bar 1</td>
<td>baz 1</td>
<td>bap 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>bar 2</td>
<td>baz 2</td>
<td>bap 2</td>
</tr>
</table>

CSS:

table td { width: 20em; border: 1px solid black; }
table td:nth-child(3) { text-align: end; }

https://jsfiddle.net/mv83qszL/

Previously, it was not possible to do this, because browser support used to be inconsistent and hit-or-miss, especially with regard to newer CSS features. This made it impossible to use more elegant, efficient solutions -- and required lots of repetitive markup and class definitions in order to get consistent results across the audience's browser space.

See the edit history for the previous version of this answer.

Align the columns of table to right and left

First of all, please fix the HTML errors in your examples in the question, and read on.

You can set text-align: right; on the second table cell. However it's recommend to avoid using table for layout, an example of using div with flexbox below.

table {  border-collapse: collapse;  border-spacing: 0;  width: 100%;}
td:last-child {  text-align: right;}
div {  display: flex;  justify-content: space-between;}

<table>  <tr>    <td><a>< Back</a></td>    <td><a>Next ></a></td>  </tr></table>
<hr>
<div>  <a>< Back</a>  <a>Next ></a></div>

---

Related Topics