63

I have a cell in an HTML <table>. I would like part of the cell contents to be left justified and part to be right justified. Is this possible?

Jørn Schou-Rode
  • 37,718
  • 15
  • 88
  • 122
Brian
  • 26,662
  • 52
  • 135
  • 170
  • 3
    @duffy: no he means aligned. Ive noticed that people often confuse "justify" with "aligned" not making the distinction between justification - ie. a flush line edge - and alignment - a ragged edge. in fact in many applications there is only "left justify". – prodigitalson Jan 18 '10 at 22:59
  • thanks for the correction - I guess I'm one of those confused people. – duffymo Jan 18 '10 at 23:54
  • I'm confused why I used 'justify" as opposed to aligned. Apologies. – LukeP Jul 18 '13 at 13:36

7 Answers7

96

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>
Tor Valamo
  • 33,261
  • 11
  • 73
  • 81
  • 1
    Why o why would you use a float here when you can just use `text-align` on the same element instead? – prodigitalson Jan 18 '10 at 23:04
  • 6
    then `
    this is right
    `     – kjagiello Jan 18 '10 at 23:05
  • 2
    @Luke: Oh i see where you guys are going this... making columns which i suppose would be the natural interpretation of what he asked... :-) – prodigitalson Jan 18 '10 at 23:11
  • 2
    Is there a way to prevent line breaks in "this is left" and "this is right" My td has no specified width, and my page has plenty of room, but the browser keeps inserting a break. – Brian Jan 18 '10 at 23:21
  • 2
    you could drop the div around the left text, and just have the right float. you could also drop the widths then. – Tor Valamo Jan 18 '10 at 23:48
  • @TorValamo that didn't work for me, it made text overflow the td. – elig Jul 02 '20 at 18:25
16

I came up with this while trying to figure out how to display currency ('$' to left, number to right) in table cells:

<div class="currency">20.34</div>

.currency {
   text-align: right;
}

.currency:before {
   content: "$";
   float: left;
   padding-right: 4px;
}
Matt Field
  • 25
  • 5
Iain
  • 2,259
  • 1
  • 16
  • 18
  • I think this answer is superior for the following reasons, the cell is the actual value, so it can be treated like a number, eg if the user copy it, values paste cleaner to excel, if you add a js library like sorttable it will identify the values better, it's also less code. – Joel Davis Oct 28 '22 at 00:56
13

It is possible but how depends on what you are trying to accomplish. If it's this:

| Left-aligned       Right-aligned | in one cell then you can use floating divs inside the td tag:

<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>

If it's | Left-aligned
                                           Right Aligned |

Then Balon's solution is correct.

If it's: | Left-aligned    |   Right-Aligned |

Then it's:

<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>
James Thomas
  • 743
  • 1
  • 5
  • 9
  • The HTML `align` attribute is deprecated since [HTML 5](https://dev.w3.org/html5/pf-summary/Overview.html#non-conforming-features). – BairDev Jun 17 '19 at 12:09
5

Tor Valamo's answer with a little contribution form my side: use the attribute "nowrap" in the "td" element, and you can remove the "width" specification. Hope it helps.

<td nowrap>
  <div style="float:left;">this is left</div>
  <div style="float:right;">this is right</div>
</td>
Sergiu
  • 349
  • 4
  • 8
3

Do you mean like this?

<!-- ... --->
<td>
   this text should be left justified
   and this text should be right justified?
</td>
<!-- ... --->

If yes

<!-- ... --->
<td>
   <p style="text-align: left;">this text should be left justified</p>
   <p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->
kjagiello
  • 8,269
  • 2
  • 31
  • 47
  • 1
    I don't think this is what the OP wants. My guess is that he needs a solution where the two strings are placed next to each other - "in the same line". – Jørn Schou-Rode Jan 18 '10 at 23:01
  • You may be right. I wasn't sure what he exactly asked for. Anyway I'll leave my comment as it may be useful for somebody. – kjagiello Jan 18 '10 at 23:03
2

td style is not necessary but will make it easier to see this example in browser

<table>
 <tr>
  <td style="border: 1px solid black; width: 200px;">
  <div style="width: 50%; float: left; text-align: left;">left</div>
  <div style="width: 50%; float: left; text-align: right;">right</div>
  </td>
 </tr>
</table>
LukeP
  • 10,422
  • 6
  • 29
  • 48
1

You could use something like:

<td> 
  <div style="float:left;width:49%;text-align:left;">this is left</div> 
  <div style="float:right;width:49%;text-align:right;">this is right</div> 
</td>

The 49% is to give some room for the renderer to wrap things around.

And you can use either <div> or <span>

Paulo Santos
  • 11,285
  • 4
  • 39
  • 65