記述したスタイルシートのまとめ
最後に、これまでの各ステップで記述してきたスタイルシートソースをまとめてご紹介しておきます。
/* ▼表全体の装飾▼ */
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円 |
おわりに
今回は、表を装飾する方法をステップごとにご紹介致しました。
これだけの方法を覚えておけば、スタイルシートを使って自由自在に表を装飾することができるでしょう。 ぜひ、試してみて下さい。
表の装飾に関する関連記事: