横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
cssのクラスを利用して背景色を変える。
背景色(background-color)を変えたいtr要素(行データ)、th要素(列データ)の
cssにクラス単位で設定し、XHTMLの1つずつclass属性を設定して表示する。
jQueryの書き方 | ------------------- |
---|---|
cssの書き方 |
/*------------------------------------------------------- 41-02. CSSのクラスを使ったストライプテーブルの実装 -------------------------------------------------------- */ #tbl_412{ float: left; margin: 10px 0 0 35px; width: 600px; } #tbl_412 tr{ height:30px; /* セルの高さ */ background-color: #99CCFF; /* 水色 */ } #tbl_412 tr.even{ background-color: #C0C0C0; /*灰色*/ } #tbl_412 th{ width:120px; /*セルのサイズ幅*/ text-align:center; background-color: #000080; /*紺色*/ color: white; } #tbl_412 th.odd{ background-color: #3399FF; } #tbl_412 td{ text-align: right; padding: 0 10px 0 20px; font-size:small; } #tbl_412 td.left{ text-align: left; } #tbl_412 td.center{ text-align: center; } |
HTMLの書き方 |
<div id="tbl_412"> <table> <tr> <th class="odd">番号</th> /*列の背景色指定*/ <th>会社名</th> <th class="odd">売上高</th> /*列の背景色指定*/ <th>営業利益</th> <th class="odd">経常利益</th> /*列の背景色指定*/ </tr> <tr class="even"> /*行の背景色指定*/ <td class="center">1</td> <td class="left">横浜証券</td> <td>1,945,074</td> <td>155,718</td> <td>153,103</td> </tr> <tr> <td class="center">2</td> <td class="left">東京証券</td> <td>2,745,074</td> <td>255,718</td> <td>233,103</td> </tr> <tr class="even"> /*行の背景色指定*/ ------ (省略) ------- </tr> ------ (省略) ------- </table> </div> |
番号 | 会社名 | 売上高 | 営業利益 | 経常利益 |
---|---|---|---|---|
1 | 横浜証券 | 1,945,074 | 155,718 | 153,103 |
2 | 東京証券 | 2,745,074 | 255,718 | 233,103 |
3 | 川崎証券 | 3,745,074 | 325,718 | 333,103 |
4 | 静岡証券 | 4,745,074 | 445,718 | 433,103 |
5 | 埼玉証券 | 5,745,074 | 545,718 | 533,103 |
6 | 神奈川証券 | 6,745,074 | 645,718 | 633,103 |
7 | 銀座証券 | 7,745,074 | 745,718 | 733,103 |
8 | 大手町証券 | 8,745,074 | 845,718 | 833,103 |