ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

スタイルシートで表を見やすく装飾!(2ページ目)

ワープロで表を作成すると、様々な装飾ができますね。そのような表をウェブ上でも作ってみましょう! スタイルシートを使って、余白や文字間隔などを細かく調節し、自由自在に装飾する方法をご紹介。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

実践STEP.6-1 表の文字サイズを指定する

まずは、表全体の文字サイズを少し小さめにしてみます。
文字サイズを小さくするには、font-sizeプロパティを使用します。

table.noveltable th,
table.noveltable td, {
   font-size: 90%;
}

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

作品名 作家名 出版社 価格
合計 1,710円
涼宮ハルヒの憂鬱 谷川 流 角川書店 540円
ゼロの使い魔 ヤマグチノボル メディアファクトリー 580円
灼眼のシャナ 高橋弥七郎 メディアワークス 590円

font-sizeプロパティに、値として「 90% 」を指定したので、普通の文字サイズの9割の大きさで表示されるようになりました。

実践STEP.6-2 セルの余白を指定する

このままでは、線と文字が詰まっていて見にくいので、セルの内側に余白を設けましょう。
内側の余白を指定するには、paddingプロパティを使います。

セルの余白を指定する方法へ >>

表をワープロ並みに装飾する手順 (目次)

  • 前のページへ
  • 1
  • 2
  • 3
  • 7
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます