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

実践STEP.6-4 文字と文字の間隔を広くする

さて、「価格」・「合計」といったヘッダセルは、セルの横幅に対して文字数がかなり少ないため、文字が詰まって見えます。文字と文字の間隔を広くして、ヘッダらしく見えるようにしてみましょう。

table.noveltable thead th {

    letter-spacing: 0.15em;

 }

table.noveltable tfoot th {

    letter-spacing: 2em;

 }

letter-spacingプロパティは、文字と文字の間隔を指定するプロパティです。
ここでは、ヘッダ部分にあるth要素には「0.15文字分」の間隔を開け、フッタ部分にあるth要素には「2文字分」の間隔を開けています。

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

ちょっと違いが分かりにくいかも知れないので、以下に画像で説明しておきます。

letter-spacingプロパティで文字間隔を拡張したところ

ヘッダにある「作品名」や「価格」といった文字には 0.15文字分の間隔が開き、フッタにある「合計」文字には 2文字分の間隔が開きました。
これで、文字のつまりが解消され、ヘッダらしく見えるようになりました。

価格などの数値を表示する場合は、欧文フォントの方が見やすいので、フォントを指定してみましょう。