4/7 スタイルシートで表を見やすく装飾！ [ホームページ作成] All About

実践STEP.6-3 文字を左右に寄せる

価格は、右寄せで表示するのが一般的です。
HTMLでは、そのままでは左寄せで表示されてしまうので、ここでは「価格」を表示しているセルに対してだけ、右寄せで表示されるようなスタイルを書いてみましょう。

価格を表示しているセル（＝td要素）には、「price」というクラス名を付加（＝「 class="price" 」という記述を付加）していました。ですから、このpriceクラスのみを対象にするスタイルを記述すればよいことになります。

table.noveltable td.price {

    text-align: right;

 }

上記のソースでは、「td要素」のうち「price」というクラスに対してだけスタイルを適用するように記述しています。
text-alignプロパティは、文字の配置を指定するプロパティです。値に「right」と記述すれば「右寄せ」で表示できます。

このスタイルを適用させると、次のようになります。

価格を表示しているセルだけ、「右寄せ」で表示されるようになりました。

さらに、「作品名」は左寄せで表示させてみましょう。
「作品名」は、th要素を使っているため、標準でセンタリング（＝中央寄せ）されて表示されています。これを左寄せで表示させるには、次のように記述します。

table.noveltable tbody th {

    text-align: left;

 }

ここでは、表のヘッダやフッタを除いた「表のメイン部分」のth要素のみを対象にしたいので、「tbody要素の内側にあるth要素」だけにスタイルを適用するように記述します。

このスタイルを適用させると、次のようになります。