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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

記述したスタイルシートのまとめ

最後に、これまでの各ステップで記述してきたスタイルシートソースをまとめてご紹介しておきます。

/* ▼表全体の装飾▼ */
table.noveltable {
   border-collapse: collapse;
   border: 2px #cc0000 solid;
   font-size: 90%;
   font-family: Verdana,sans-serif;
}

/* ▼表のセル(全部)の装飾▼ */
table.noveltable th,
table.noveltable td {
   padding: 0.3em;
   border-style: solid dashed;
   border-color: #cc0000;
   border-width: 1px;
}

/* ▼表のヘッダ(上部)の装飾▼ */
table.noveltable thead th {
   border-bottom: 3px double #cc0000;
   background-color: #ffdddd;
   letter-spacing: 0.15em;
}

/* ▼表のフッタ(下部)の装飾▼ */
table.noveltable tfoot th {
   background-color: #ffffcc;
   border-right: 1px #cc0000 solid;
   letter-spacing: 2em;
   color: #cc0000;
}
table.noveltable tfoot td {
   color: red;
   font-weight: bold;
}
table.noveltable tfoot th,
table.noveltable tfoot td {
   border-top: 2px solid #cc0000;
}

/* ▼価格セルの装飾▼ */
table.noveltable td.price {
   text-align: right;
}

/* ▼作品名セルの装飾▼ */
table.noveltable tbody th {
   text-align: left;
}

このスタイルシートで、以下のような表の装飾になります。

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

 

おわりに

今回は、表を装飾する方法をステップごとにご紹介致しました。
これだけの方法を覚えておけば、スタイルシートを使って自由自在に表を装飾することができるでしょう。 ぜひ、試してみて下さい。

表の装飾に関する関連記事:

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 5
  • 6
  • 7
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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