表のボーダーを表示する(CSS編)その四

| コメント(1) | トラックバック(0)


価格表をCSSファイルを使って表示する。


表のボーダーを表示する(CSS編)その二その三」では単なる表の作成でしたが、今度は価格表を作成するためにCSSファイルを変更したいと思います。


このスタイルで価格表を作成します。


パーツメーカー型式金額
合計48,980円
マザーボードMSIG965MDH-FI6,000円
CPUIntelPentium D4,200円
メモリーCFDSDRAM PC5400(DDR2-667)13,000円
キャプチャーボードI・O DATAGV-MVP/HS9,000円
HDDHITACHIDeskster HDP725050GLA3604,720円
光学ドライブLGGH22NP204,080円
ケースSCY0939series7,980円



CSSファイルに関して基本的な所は表と同じなので、表で使用したものを追加変更していきます。


初めに価格表を作成します。


<table>
<tr><th>パーツ</th><th>メーカー</th><th>型式</th><th>金額</th></tr>
<tr><th colspan="3">合計</th><td>48,980円</td></tr>
<tr><td>マザーボード</td><td>MSI</td><td>G965MDH-FI</td><td>6,000円</td></tr>
<tr><td>CPU</td><td>Intel</td><td>Pentium D</td><td>4,200円</td></tr>
<tr><td>メモリー</td><td>CFD</td><td>SDRAM PC5400(DDR2-667)</td><td>13,000円</td></tr>
<tr><td>キャプチャーボード</td><td>I・O DATA</td><td>GV-MVP/HS</td><td>9,000円</td></tr>
<tr><td>HDD</td><td>HITACHI</td><td>Deskster HDP725050GLA360</td><td>4,720円</td></tr>
<tr><td>光学ドライブ</td><td>LG</td><td>GH22NP20</td><td>4,080円</td></tr>
<tr><td>ケース</td><td>SCY</td><td>0939series</td><td>7,980円</td></tr>
</table>


ここで気づいた方も居られると思いますが、表と違うところは「合計金額」の部分が二段目に来ているところです。

なぜ?

これには理由があるようです。

モニターに何かを表示するためには、プログラムが順番にスキャンされ実行されていきます。
と言うことは、表で記述したCSSファイルの実行プログラムは、全てを処理して初めて表をモニターに表示していることに成りますね。

これだと体感的に表示されるのが遅く感じるのでは無いでしょうか?

そこで、表示するのが体感的に早いと思わせる為には、ここが「表の始まり」で、ここが「表の終わりです」を早く認識させ表示し、後から中身を表示していく方法が良いようです。


では、どうすれば?

表の始まり(ヘッダ)、表の終わり(フッタ)、表の中身(ボディ)を表に定義付けします。

<thead></thead>(ヘッダ)、<tfoot></tfoot>(フッタ)、<tbody></tbody>(ボディ)を追加します。


<table>
<thead>
<tr><th>パーツ</th><th>メーカー</th><th>型式</th><th>金額</th></tr>
</thead>
<tfoot>
<tr><th colspan="3">合計</th><td>48,980円</td></tr>
</tfoot>
<tbody>
<tr><td>マザーボード</td><td>MSI</td><td>G965MDH-FI</td><td>6,000円</td></tr>
<tr><td>CPU</td><td>Intel</td><td>Pentium D</td><td>4,200円</td></tr>
<tr><td>メモリー</td><td>CFD</td><td>SDRAM PC5400(DDR2-667)</td><td>13,000円</td></tr>
<tr><td>キャプチャーボード</td><td>I・O DATA</td><td>GV-MVP/HS</td><td>9,000円</td></tr>
<tr><td>HDD</td><td>HITACHI</td><td>Deskster HDP725050GLA360</td><td>4,720円</td></tr>
<tr><td>光学ドライブ</td><td>LG</td><td>GH22NP20</td><td>4,080円</td></tr>
<tr><td>ケース</td><td>SCY</td><td>0939series</td><td>7,980円</td></tr>
</tbody>
</table>


これで定義付けは終わりです。


次に、CSSファイルを実行させるために tableタグ に class="pricelist" を追加します。

<table class="pricelist">


価格の部分はスタイルを別にしたいので、価格を表示する全てのセルの tdタグに class="price" を追加します。

<td class="price">48,980円</td>


これで表の準備は完了です。
続いてCSSファイルの追加、変更に入ります。

「表のボーダーを表示する(CSS編)その三」で記述したプログラムと同じプログラムを利用しますので、コピー&ペーストし準備して下さい。
追加はピンク、変更はベージュ、削除はブルーと言った形で色分けしています。



/*表の外枠*/
table.pricelist {
   border: 2px #002800 solid;   /*2px の実線で表示*/
   border-collapse: collapse;   /*隣り合うセルの枠線を重ねて表示*/
}
/*表の内側全体*/
table.pricelist th,
table.pricelist td {
   padding: 0.3em;              /*セルの余白*/
   font-size: 90%;              /*全体の文字を縮小*/
   border: 1px #002800 solid;   /*1px の実線で表示*/
   border-style: dashed solid;  /*波線(上下) 実線(左右)*/
   border-color: #002800;       /*線の色*/
   border-width: 1px;           /*線の太さ*/

}
/*ヘッダを装飾*/
table.pricelist thead th {
   border-bottom: 3px double #002800;/*3px の二重線で表示*/
   background-color: #FFAAFF;        /*背景色*/
}
/*フッタを装飾*/
table.pricelist tfoot th {
   /* th要素(「合計」と書かれたセル) */
   color: #cc0000;                   /*文字色を指定*/
}
table.pricelist tfoot td {
   /* td要素(「48,980円」と書かれたセル) */
   color: red;                  /*文字色を指定*/
   font-weight: bold;           /*文字スタイルを太文字に*/
}
table.pricelist tfoot th ,
table.pricelist tfoot td {
   border-top: 2px solid #002800;/*両方を共通のスタイルに*/
   background-color: #ffffcc;        /*背景色*/
}
/*価格表示を右寄せ*/
table.pricelist td.price {
   text-align: right;           /*右寄せ*/
}
/*文字の間隔を調整*/
table.pricelist thead th {
   letter-spacing: 0.15em;      /*ヘッダの文字間隔を指定*/
   text-align: center;          /*ヘッダの文字をセンタリング*/
   color: #000000;                   /*文字色を指定*/
}
table.pricelist tfoot th {
   letter-spacing: 2em;         /*フッタの文字間隔を指定*/
}



注意
border-style: dashed solid;  /*波線(上下) 実線(左右)*/の部分で
border-style: solid dashed;  /*実線(上下) 波線(左右)*/と反対にした場合は
「/*フッタを装飾*/」の中に
 border-right: 1px #002800 solid;  /*右側の線を実線に*/
を記述してやる必要があります。

このように、CSSファイルに記述する事によって様々なフォーマットの表を作成することが出来ます。応用次第で、表の作成がグッと楽になるのでは無いでしょうか?


最後に、参考にさせていただいたAllAbout さんに、この場を借りてお礼申し上げます。





参考になった方はクリック

↓ ↓ ↓ ↓ ↓ ↓

にほんブログ村 IT技術ブログ 自宅サーバー構築へ


トラックバック(0)

トラックバックURL: http://jisakupc.ddo.jp/cgi-bin/mt/mt-tb.cgi/3930

コメント(1)

こんにちわ!

CSSを弄れるブログでエントリーを作ることになりました。
さっそく試させて頂いております(コピーです)。

透明人間◆PCブログ
http://toumei59.blog99.fc2.com/

もし宜しければご訪問下さい。

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

インフォブログランキング
知識の杜