株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

05-05)　　1. セルから飛び出したような表現でテーブルの一列を目立たさせるデザイン

　

セルから飛び出したようなでテーブルの一列を目立たさせる。

ｃｓｓの書き方 /*-------------------------------------------------------
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円