実践STEP.5 表のフッタ(下部)だけ装飾を変更する
表のヘッダが thead 要素に含まれるのと同じように、表のフッタは tfoot 要素に含まれます。
ですから、tfoot要素内のセルにだけ適用されるようなスタイルの記述方法を使えば、 フッタにだけ有効な装飾を作ることができます。
table.noveltable tfoot th {
/* th要素側（「合計」と書かれたセル側） */
background-color: #ffffcc;
border-right: 1px #cc0000 solid;
color: #cc0000;
}
table.noveltable tfoot td {
/* td要素側（「1,500円」と書かれたセル側） */
color: red;
font-weight: bold;
}
table.noveltable tfoot th ,
table.noveltable tfoot td {
/* 両方に共通のスタイル */
border-top: 2px solid #cc0000;
}
/* th要素側（「合計」と書かれたセル側） */
background-color: #ffffcc;
border-right: 1px #cc0000 solid;
color: #cc0000;
}
table.noveltable tfoot td {
/* td要素側（「1,500円」と書かれたセル側） */
color: red;
font-weight: bold;
}
table.noveltable tfoot th ,
table.noveltable tfoot td {
/* 両方に共通のスタイル */
border-top: 2px solid #cc0000;
}
このスタイルを適用させると、次のようになります。
| 作品名 | 作家名 | 出版社 | 価格 |
|---|---|---|---|
| 合計 | 1,710円 | ||
| 涼宮ハルヒの憂鬱 | 谷川 流 | 角川書店 | 540円 |
| ゼロの使い魔 | ヤマグチノボル | メディアファクトリー | 580円 |
| 灼眼のシャナ | 高橋弥七郎 | メディアワークス | 590円 |
フッタでは、「合計」と書いた th要素と、「1,500円」と書いた td要素で装飾内容が異なります。
そこで、スタイルシートでも、それらを別々に記述しています。
th要素側では、border-rightプロパティで右側の線を実線(＝solid)に指定しています。 さらに、background-colorプロパティで背景色を淡い黄色(＝#ffffcc)にし、 colorプロパティで文字色を濃い赤色(＝#cc0000)に指定しています。
td要素側では、colorプロパティで文字色を赤色(＝red)に指定し、 font-weightプロパティで文字を太字(＝bold)に指定しています。
さらに、th要素・td要素共通のスタイルとして、border-topプロパティを使っています。 border-topプロパティは「上部の枠線」を指定するプロパティです。 ここでは、線の太さを2ピクセル(＝2px)・線の色を濃い赤(＝#cc0000)・線の種類を実線(＝solid)にしています。
実践STEP.6
さて、ずいぶん完成に近づいてきました。
ここで、文字サイズや文字間隔・セルの余白を指定して、表をより見やすく装飾してみましょう。
表の文字サイズや文字間隔・セルの余白などを指定する方法へ >>
表をワープロ並みに装飾する手順 (目次)
- [HOME] はじめに：表の罫線をワープロ並みに装飾したい
- [準備STEP.1] HTMLで表を書く
- [準備STEP.2] サンプル表のHTML上のポイントを確認
- [実践STEP.1] 表の外枠を描く
- [実践STEP.2] 表の内側の線を描く
- [実践STEP.3] 縦線と横線で線種を変える
- [実践STEP.4] 表のヘッダ(上部)だけ装飾を変更する
- [実践STEP.5] 表のフッタ(下部)だけ装飾を変更する
- [実践STEP.6-1] 表の文字サイズを指定する
- [実践STEP.6-2] セルの余白を指定する
- [実践STEP.6-3] 文字を左右に寄せる
- [実践STEP.6-4] 文字と文字の間隔を広くする
- [実践STEP.6-5] フォントを指定する
- [まとめ] 記述したスタイルシートのまとめ
