こまかな設定はしていませんが、これだけでも十分に効果がありますね。
結構複雑ですが、スタイルシートだけで、実装しています。
|
大人気 Jimdo Pro |
|||
|---|---|---|---|
| Jimdo Free | Jimdo Business | ||
| 費用／年間 | 0円 | 11,340円 | 28,980円 |
| ドメイン | なし | １つ | ２つ |
| メールアドレス | なし | １メールアドレス | 20メールアドレス |
| アクセス解析 | なし | あり | あり |
| SEO | トップページのみ | 全てのページ | 全てのページ |
| 広告 | 表示 | 非表示 | 非表示 |
| モリサワフォント | なし | なし | あり |
上記のテーブルのHTML
<table align="" class="table4" style="width: 100%;">
<colgroup>
<col style="width: 23%;" />
<col style="width: 23%;" />
<col style="width: 31%;" />
<col style="width: 23%;" />
</colgroup>
<thead>
<tr>
<td> </td>
<td> </td>
<th rowspan="2">大人気<br /> Jimdo Pro</th>
<td> </td>
</tr>
<tr>
<td> </td>
<th>Jimdo Free</th><th>Jimdo Business</th></tr>
</thead>
<tfoot>
<tr>
<td>費用／年間</td>
<th>0円</th>
<th rowspan="2">11,340円</th>
<th>28,980円</th></tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>ドメイン</td>
<td>なし</td>
<td>１つ</td>
<td>２つ</td>
</tr>
<tr>
<td>メールアドレス</td>
<td>なし</td>
<td>１メールアドレス</td>
<td>20メールアドレス</td>
</tr>
<tr>
<td>アクセス解析</td>
<td>なし</td>
<td>あり</td>
<td>あり</td>
</tr>
<tr>
<td>SEO</td>
<td>トップページのみ</td>
<td>全てのページ</td>
<td>全てのページ</td>
</tr>
<tr>
<td>広告</td>
<td>表示</td>
<td>非表示</td>
<td>非表示</td>
</tr>
<tr>
<td>モリサワフォント</td>
<td>なし</td>
<td>なし</td>
<td>あり</td>
</tr>
</tbody>
</table>
テーブルのHTMLの貼り付け方
クリックすると拡大表示されます。右ボタンで作業の順番が表示されます。
左側からクリックしてください。
CSS
<style type="text/css">
.table4{
border-collapse:collapse;
padding:0;
margin:0;
border:none;
}
.table4 th,.table1 td{
font-weight:bold;
border:none;
padding:5px 5px 7px;
font-size:90%;
color:#333;
text-align:center;
vertical-align:middle;
font-size:80%;
color:#FFF;
}
.table4 thead th{
background:linear-gradient(#008080,#007070);
border:2px solid #333;
border-bottom:2px solid #333;
}
.table4 tbody td{
background:#444;
border-bottom:2px groove #CCC;
border-left:2px solid #000;
border-right:2px solid #000;
}
.table4 tfoot th{
background:#333;
border:2px solid #000;
border-top:none;
}
.table4 tbody tr:first-child td{
border-top:10px solid #3cb371;
}
.table4 tbody tr:last-child td{
border-bottom:2px solid #3cb371;
}
.table4 tfoot tr:last-child th,
.table4 tfoot tr:last-child td,
.table4 tehad tr:first-child th,
.table4 thead tr:first-child td{
padding:0;
font-size:10px;
}
.table4 tfoot tr th:nth-child(3),
.table4 tbody tr td:nth-child(3),
.table4 thead tr th{
background:#222;
font-size:120%;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
