cssで、テーブルのtdの中の文字を左右に分けたい

質問

テーブルの入れ子をせずに<span>などをつかって、
文字を左右に配置する事はできるのでしょうか？

<table width="200">
<tr><td>
左右
</td><tr>
</table>

　↓↓↓こんな感じに

----------------
｜左　　　　　右｜
----------------

よろしくお願いします

回答No.2

藤田 朋郎（@hujitomo） · ベストアンサー

＞かなり力技の様な気がするのですが…どうなんでしょうか？

はい。力技です。
だって『<span>などをつかって、』というお題があったから…

＞テーブルの入れ子で、最初は対応しようと考えていました。

あれれ？もしかしてこういうのを希望していたのでしょうか？

.L {
width:100px;
float:left;
}
.R {
text-align:right;
margin-left:100px;
}

<table width="200">
<tr><td>
<div class="L">左</div>
<div class="R">右</div>
</td></tr>
</table>

定石はやっぱり無理やり <span> を使うんじゃなく、今回の例のように素直に生粋のブロックレベル要素でレイアウトしてやる事だと思いますよ。

お礼

ありがとうございます。

>だって『<span>などをつかって、』というお題があったから…

すみません。
<div>がパッとでてこない位、初心者なもので・・・

まさに、私が求めていたものです。
このあと、右・左の位置を微妙に調整したいので、width:も必要でした。

本当にありがとうございました。

回答No.1

藤田 朋郎（@hujitomo）

td {
position:absolute;
}
.right {
display:block;
position:absolute;
top:0;
right:0;
}

<table width="200">
<tr><td>
左<span class="right">右</span>
</td><tr>
</table>

こんな感じでどうですか？

お礼

ありがとうございます。
試してみれば、希望どおりになりました。
今、CSSを勉強中です。
だからよくわかっていませんが、今回の方法は、かなり力技の様な気がするのですが…どうなんでしょうか？
そもそも、このようなことは、CSSでするべきではないのでしょうか？
今までテーブルタグばかり使っていたので、いまいちCSSの感覚がわかりません。
テーブルの入れ子で、最初は対応しようと考えていました。
しかし、フォントを％指定したところ、思うどおりのレイアウトができません。
そこで、何か定石な様なものがあるのかと思い質問しました。