ブログの表の見栄えを良くしたい！の巻 その１
のつづき外枠だけはピンクになりました。
できれば、全部の枠をピンクで縁取りたい。そこで、すべての マスのタグ にスタイルシートを適用してみます。
実際の表示結果。
これで、すべてのマスが線で区切られました。
つづいて、背景色をクリーム色にします。 これは枠の中の背景を変えたい でやった事をテーブルに適用すれば出来ます。
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の色指定をすると、それが優先されます。 大きな括りよりも細部の指示の方が優先される と言うわけです。
ところでこのテーブル、 今のままでは高さがそろっていない ですよね。
段の高さを統一すれば見栄えがよくなるはずです。
またも文字数制限 。
ブログの表の見栄えを良くしたい！の巻 その３ につづく。
