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?
views:
341answers:
6
A:
sure but you need to wrap those "blocks" in separate tags and apply the alignment to those.
prodigitalson
2010-01-18 22:58:03
what tag would I use for those blocks?
Brian
2010-01-18 22:58:41
a div or a p depending. Id probably keep it block level though. the key diff between your div an p is that div is arbitary and really has no default styling where as a p semantically means a paragraph and has default margins and what not as defined by the browsers internal css rules (unless youve reset it, which is good practice).
prodigitalson
2010-01-18 23:03:01
A `div` `p`, or a `span`
Justin Johnson
2010-01-18 23:07:06
+2
A:
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>
<!-- ... --->
Balon
2010-01-18 22:59:00
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
2010-01-18 23:01:19
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.
Balon
2010-01-18 23:03:16
+8
A:
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
2010-01-18 23:00:50
Why o why would you use a float here when you can just use `text-align` on the same element instead?
prodigitalson
2010-01-18 23:04:30
then `<div style="float: right; text-align: right; width: 50%;">this is right</div>`
Balon
2010-01-18 23:05:25
@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
2010-01-18 23:11:59
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
2010-01-18 23:21:35
you could drop the div around the left text, and just have the right float. you could also drop the widths then.
Tor Valamo
2010-01-18 23:48:32
+1
A:
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
2010-01-18 23:03:59
A:
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
2010-01-18 23:04:21
If you use a span, you must also set `display: block` for the width property to take effect.
Justin Johnson
2010-01-18 23:09:26
+1
A:
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
2010-01-18 23:06:01