ブログの表の見栄えを良くしたい！の巻 その２
のつづきです。高さの指定には height
を使います。
height 、そして width については以前、 枠の中の背景に画像を使いたい！ で書いています。
下の赤い部分が変更箇所です。
結果はこうなります。
テーブルそのものに関しては、ほぼいい感じだと思います。そうしたら中の文字色を変えましょう。
今、気づいたんですがファンブログのエディタで文字色変えられますね。太さも変えられる。そしたら、 右寄せ、左寄せ、真ん中あわせだけやればいいか 。
文字の配置方法は、 枠の中の背景に画像を使いたい！ で説明しています。やり方は同じです。
では、あえて文字を全部真ん中合わせにしてみます。
table タグの中身を変えて、テーブル全部に適用させます。
下がその結果です。
テーブルの中の文字を真ん中合わせ
文字が真ん中合わせになりました。変更前は左寄せだったので、見比べて見てください。
では 中の文字は左寄せのまま、表自体を画面の右に寄せるには どうしたらよいでしょう？方法はいくつかあります。ひとつは 画像の隣に文章を配置したい で使った、 float を使う方法です。このやり方は そのときの記事 を見てください。ただ float には left と right しかないので 真ん中合わせは出来ません 。
他には、 table をもっと大きな要素に入れて、その要素と table との margin で調整する 方法があります。この方法だと 真ん中合わせが可能 です。
もっと大きな要素に今回は、 div を使います。
div の width:100% によって、div タグに自分自身の横幅がいくらあるのか指示します。div が自分の横幅を把握していないと正しくマージンの値が算出できません。それから今回は、誰が試しても同じ結果になるようにpaddingの値を0でクリアします。
tableでは margin:0 auto を指定しています。(上下は0マージン、左右はautoと言う意味)
auto 指定によって左右均等にマージンが割り振られます。
右寄せにしたい場合は、table の margin を 0 0 0 auto と指定します。
これはマージンの値が上右下は0、左はauto(右がゼロのこの場合はつまり、あるだけ全部)という意味です。
テーブルに関しては以上で終わります。
先ほど書いた、 タグの中にぐちゃぐちゃ同じ事を書かないための方法 は、シリーズ「 タグの中にスタイルシートを直接書かない ！ 」にまとめました。
それでは、皆様ごきげんよう！
height 、そして width については以前、 枠の中の背景に画像を使いたい！ で書いています。
下の赤い部分が変更箇所です。
<table style="border:2px solid #fcc;background:#ffc">
<tr style=" height:5em ">
<td style="border:2px solid #fcc;">
サイズアップ・ペニス増大商品
</td>
<td style="border:2px solid #fcc;">
商品購入金額の１０％
</td>
</tr>
<tr style="background:#ccf; height:5em ">
<td style="border:2px solid #fcc;">
発毛・育毛無料体験
</td>
<td style="border:2px solid #fcc;">
予約１件につき３１９３円
入会１件につき１９１６３円
</td>
</tr>
<tr style=" height:5em ">
<td style="border:2px solid #fcc;">
高収入在宅チャットレディ
</td>
<td style="border:2px solid #fcc;">
登録・稼動確認後に３５００円
</td>
</tr>
<tr style="background:#ccf; height:5em ">
<td style="border:2px solid #fcc;">
ペット保険
</td>
<td style="border:2px solid #fcc;">
申込み１件につき１９００円
</td>
</tr>
<tr style=" height:5em ">
<td style="border:2px solid #fcc;">
亀頭増大,早漏,包茎の手術や治療
</td>
<td style="border:2px solid #fcc;">
初回来店で３００００円
</td>
</tr>
</table>
結果はこうなります。
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
|---|---|
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
テーブルそのものに関しては、ほぼいい感じだと思います。そうしたら中の文字色を変えましょう。
ところで、提示しているソースをご覧になって、何か気になりませんか？
タグの中にやたら同じことが書いてある。しかも長い。
本当に毎度こんな事をしなくては表が作れないのなら表なんて大嫌いです！
何か解決策はあるんでしょうか？
もちろん、あるからこんなこと書いているんですね。
それに関しては後ほど説明します。
タグの中にやたら同じことが書いてある。しかも長い。
本当に毎度こんな事をしなくては表が作れないのなら表なんて大嫌いです！
何か解決策はあるんでしょうか？
もちろん、あるからこんなこと書いているんですね。
それに関しては後ほど説明します。
今、気づいたんですがファンブログのエディタで文字色変えられますね。太さも変えられる。そしたら、 右寄せ、左寄せ、真ん中あわせだけやればいいか 。
文字の配置方法は、 枠の中の背景に画像を使いたい！ で説明しています。やり方は同じです。
では、あえて文字を全部真ん中合わせにしてみます。
table タグの中身を変えて、テーブル全部に適用させます。
<table style="border:2px solid #fcc;background:#ffc; text-align:center
">
下がその結果です。
テーブルの中の文字を真ん中合わせ
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
|---|---|
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
文字が真ん中合わせになりました。変更前は左寄せだったので、見比べて見てください。
では 中の文字は左寄せのまま、表自体を画面の右に寄せるには どうしたらよいでしょう？方法はいくつかあります。ひとつは 画像の隣に文章を配置したい で使った、 float を使う方法です。このやり方は そのときの記事 を見てください。ただ float には left と right しかないので 真ん中合わせは出来ません 。
他には、 table をもっと大きな要素に入れて、その要素と table との margin で調整する 方法があります。この方法だと 真ん中合わせが可能 です。
もっと大きな要素に今回は、 div を使います。
<div style=" width:100%;padding:0
">
<table style="border:2px solid #fcc;background:#ffc; margin:0 auto ">
(省略)
</table>
</div>
<table style="border:2px solid #fcc;background:#ffc; margin:0 auto ">
(省略)
</table>
</div>
div の width:100% によって、div タグに自分自身の横幅がいくらあるのか指示します。div が自分の横幅を把握していないと正しくマージンの値が算出できません。それから今回は、誰が試しても同じ結果になるようにpaddingの値を0でクリアします。
tableでは margin:0 auto を指定しています。(上下は0マージン、左右はautoと言う意味)
auto 指定によって左右均等にマージンが割り振られます。
テーブルそのものを真ん中に配置
| サイズアップ・ペニス増大商品 | 商品購入金額の１０％ |
|---|---|
| 発毛・育毛無料体験 | 予約１件につき３１９３円 入会１件につき１９１６３円 |
| 高収入在宅チャットレディ | 登録・稼動確認後に３５００円 |
| ペット保険 | 申込み１件につき１９００円 |
| 亀頭増大,早漏,包茎の手術や治療 | 初回来店で３００００円 |
右寄せにしたい場合は、table の margin を 0 0 0 auto と指定します。
これはマージンの値が上右下は0、左はauto(右がゼロのこの場合はつまり、あるだけ全部)という意味です。
テーブルに関しては以上で終わります。
先ほど書いた、 タグの中にぐちゃぐちゃ同じ事を書かないための方法 は、シリーズ「 タグの中にスタイルシートを直接書かない ！ 」にまとめました。
それでは、皆様ごきげんよう！
