[HTML] テーブルの１つのセル内の左右にテキストを配置する

テーブルのセルのテキストは、tr、td、thタグに、align属性や valign属性を指定することで右詰めや中央に配置することができますが、セル全体に影響を与えてしまいます。

align、valign属性

alignは水平位置、valignは垂直の位置を設定しる属性で、値は次の値を設定することができます。

align		left 左寄せ center 中央揃え right 右寄せ justify 両端揃え
valign		top 上揃え middle 中央揃え bottom 下揃え baseline 1行目をベースラインで揃える

しかし、これらの属性は、セル全体に影響を及ぼすため例えば左右にそれぞれテキストを配置することができません。

スタイル設定　float

では、１つのセル内にテキストを左右に配置して表示するサンプルを掲載します。他にもあるとは思いますが、知らないもので・・・・

spanタグのスタイルにfloat属性を指定して左右にテキストを配置する方法です。

<table>
  <tr>
    <td>
      <span style="float: left;">左寄せ</span>
      <span style="float: right;">右寄せ</span>
    </td>
  </tr>
</table>

では、実際に表示させてみます。

左寄せ 右寄せ

う～～～ん。みにくい。