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