横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
セルから飛び出したようなでテーブルの一列を目立たさせる。
cssの書き方 |
/*------------------------------------------------------- 05-05 セルから飛び出したような表現でテーブルの一列を目立たさせる -------------------------------------------------------- */ .tbl_941{ width: 690px; margin: 0 0 15px 15px; border-collapse: separate; border-spacing: 1px; } *html .tbl_941{ /*for IE6 hack*/ margin: 0 0 15px 0; } .tbl_941 th{ padding: 10px; vertical-align: middle; font-size: 90%; font-weight: normal; } .tbl_941 th.planListRow{ background-color: #FFC100; text-align: left; } .tbl_941 th.planListCol{ background-color: #FFFFFF; text-align: center; color: #00A6BF; } .tbl_941 tr.title th{ padding: 30px 10px 15px 10px; background-image: url("../images/cafe_css_adjust.gif"); background-repeat: repeat-x; background-position: left top; } .tbl_941 tr.title th.planListPickup{ width: 226px; text-align: center; color: #FFDE00; background-image: url("../images/cafe_bg_pickupHead.gif"); background-repeat: no-repeat; background-position: left top; } .tbl_941 tr.price th{ padding: 15px 10px 30px 10px; background-image: url("../images/cafe_css_adjust.gif"); background-repeat: repeat-x; background-position: left bottom; } .tbl_941 td{ background-color: #FFFFFF; text-align: center; font-size: 82%; } .tbl_941 .planListPickup{ width: 226px; background-color: #00A6BF; color: #FFFFFF; text-align: center; } .tbl_941 tr.price td{ padding: 15px 0 30px 15px; font-size: 140%; background-image: url("../images/cafe_css_adjust.gif"); background-repeat: repeat-x; background-position: left bottom; } .tbl_941 tr.price td.planListPickup{ background-image: url("../images/cafe_bg_pickupFoot.gif"); background-repeat: no-repeat; background-position: left bottom; } |
---|---|
HTMLの使用例 |
<h4><span>パーティープラン</span></h4> <table class="tbl_941"> <tr class="title"> <th scope="col" class="planListRow">プラン名</th> <th scope="col" class="planListPickup">ウィークデーバリュープラン</th> <th scope="col" class="planListCol">スタンダードプラン</th> <th scope="col" class="planListCol">アフタヌーンプラン</th> </tr> <tr> <th scope="row" class="planListRow">対象</th> <td class="planListPickup">金・土・日・祝・祝前日<br />を除く平日18時以降</td> <td>金・土・日・祝・祝前日<br />の18時以降</td> <td>土・日・祝の18時まで</td> </tr> <tr> <th scope="row" class="planListRow">スタイル</th> <td class="planListPickup">ビュッフェ</td> <td>ビュッフェ</td> <td>ビュッフェ</td> </tr> <tr> <th scope="row" class="planListRow">ドリンク</th> <td class="planListPickup">チケット制(お一人様3枚)</td> <td>フリードリンク</td> <td>フリードリンク</td> </tr> <tr> <th scope="row" class="planListRow">時間</th> <td class="planListPickup">入退場を含め2時間半</td> <td>入退場を含め2時間半</td> <td>入退場を含め2時間半</td> </tr> <tr class="price"> <th scope="row" class="planListRow">料金</th> <td class="planListPickup">4,500円</td> <td>6,000円</td> <td>5,000円</td> </tr> </table> |
プラン名 | ウィークデーバリュープラン | スタンダードプラン | アフタヌーンプラン |
---|---|---|---|
対象 | 金・土・日・祝・祝前日 を除く平日18時以降 |
金・土・日・祝・祝前日 の18時以降 |
土・日・祝の18時まで |
スタイル | ビュッフェ | ビュッフェ | ビュッフェ |
ドリンク | チケット制(お一人様3枚) | フリードリンク | フリードリンク |
時間 | 入退場を含め2時間半 | 入退場を含め2時間半 | 入退場を含め2時間半 |
料金 | 4,500円 | 6,000円 | 5,000円 |