ブログの表の見栄えを良くしたい！の巻 その１のつづき外枠だけはピンクになりました。
できれば、全部の枠をピンクで縁取りたい。そこで、すべてのマスのタグにスタイルシートを適用してみます。
実際の表示結果。
これで、すべてのマスが線で区切られました。
つづいて、背景色をクリーム色にします。これは枠の中の背景を変えたいでやった事をテーブルに適用すれば出来ます。
tableタグのstyleにbackgroundを追加してみます。
反映結果が下のようになります。
では、この状態で段のタグ tr にも背景指定をしたらどうなるんでしょう？
やってみましょう。赤い部分が変更箇所です。
これを表示します。
tableよりもtrが優先されるのがわかります。
さらにマスのタグtdの色指定をすると、それが優先されます。大きな括りよりも細部の指示の方が優先されると言うわけです。
ところでこのテーブル、今のままでは高さがそろっていないですよね。
段の高さを統一すれば見栄えがよくなるはずです。
またも文字数制限。
ブログの表の見栄えを良くしたい！の巻 その３につづく。
できれば、全部の枠をピンクで縁取りたい。そこで、すべてのマスのタグにスタイルシートを適用してみます。
<table style="border:2px solid #fcc;">
<tr>
<td style="border:2px solid #fcc;">
サイズアップ・ペニス増大商品
</td>
<td style="border:2px solid #fcc;">
商品購入金額の１０％
</td>
</tr>
<tr>
<td style="border:2px solid #fcc;">
発毛・育毛無料体験
</td>
<td style="border:2px solid #fcc;">
予約１件につき３１９３円
入会１件につき１９１６３円
</td>
</tr>
<tr>
<td style="border:2px solid #fcc;">
高収入在宅チャットレディ
</td>
<td style="border:2px solid #fcc;">
登録・稼動確認後に３５００円
</td>
</tr>
<tr>
<td style="border:2px solid #fcc;">
ペット保険
</td>
<td style="border:2px solid #fcc;">
申込み１件につき１９００円
</td>
</tr>
<tr>
<td style="border:2px solid #fcc;">
亀頭増大,早漏,包茎の手術や治療
</td>
<td style="border:2px solid #fcc;">
初回来店で３００００円
</td>
</tr>
</table>
実際の表示結果。
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
これで、すべてのマスが線で区切られました。
つづいて、背景色をクリーム色にします。これは枠の中の背景を変えたいでやった事をテーブルに適用すれば出来ます。
tableタグのstyleにbackgroundを追加してみます。
<table style="border:2px solid #fcc;background:#ffc;">
反映結果が下のようになります。
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
では、この状態で段のタグ tr にも背景指定をしたらどうなるんでしょう？
やってみましょう。赤い部分が変更箇所です。
<table style="border:2px solid #fcc;background:#ffc">
<tr>
<td style="border:2px solid #fcc;">
サイズアップ・ペニス増大商品
</td>
<td style="border:2px solid #fcc;">
商品購入金額の１０％
</td>
</tr>
<tr style="background:#ccf">
<td style="border:2px solid #fcc;">
発毛・育毛無料体験
</td>
<td style="border:2px solid #fcc;">
予約１件につき３１９３円
入会１件につき１９１６３円
</td>
</tr>
<tr>
<td style="border:2px solid #fcc;">
高収入在宅チャットレディ
</td>
<td style="border:2px solid #fcc;">
登録・稼動確認後に３５００円
</td>
</tr>
<tr style="background:#ccf">
<td style="border:2px solid #fcc;">
ペット保険
</td>
<td style="border:2px solid #fcc;">
申込み１件につき１９００円
</td>
</tr>
<tr>
<td style="border:2px solid #fcc;">
亀頭増大,早漏,包茎の手術や治療
</td>
<td style="border:2px solid #fcc;">
初回来店で３００００円
</td>
</tr>
</table>
これを表示します。
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
tableよりもtrが優先されるのがわかります。
さらにマスのタグtdの色指定をすると、それが優先されます。大きな括りよりも細部の指示の方が優先されると言うわけです。
ところでこのテーブル、今のままでは高さがそろっていないですよね。
段の高さを統一すれば見栄えがよくなるはずです。
またも文字数制限。
ブログの表の見栄えを良くしたい！の巻 その３につづく。