ブログの表の見栄えを良くしたい!の巻 その3

ブログの中に作ったテーブル(表)の見栄えをスタイルシートで調整します。
テーブルのサイズ調整。テーブル内の文字レイアウト。テーブルの位置あわせ。
将来的には、外部スタイルシートと結びつける予定です。

スポンサーリンク


ブログの表の見栄えを良くしたい!の巻 その2のつづきです。

高さの指定にはheightを使います。
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;">
            商品購入金額の10%
        </td>
    </tr>
    <tr style="background:#ccf;height:5em">
        <td  style="border:2px solid #fcc;">
            発毛・育毛無料体験
        </td>
        <td  style="border:2px solid #fcc;">
            予約1件につき3193円
            入会1件につき19163円
        </td>
    </tr>
    <tr style="height:5em">
        <td  style="border:2px solid #fcc;">
            高収入在宅チャットレディ
        </td>
        <td  style="border:2px solid #fcc;">
            登録・稼動確認後に3500円
        </td>
    </tr>
    <tr style="background:#ccf;height:5em">
        <td  style="border:2px solid #fcc;">
            ペット保険
        </td>
        <td  style="border:2px solid #fcc;">
            申込み1件につき1900円
        </td>
    </tr>
    <tr style="height:5em">
        <td  style="border:2px solid #fcc;">
            亀頭増大,早漏,包茎の手術や治療
        </td>
        <td  style="border:2px solid #fcc;">
            初回来店で30000円
        </td>
  </tr>
</table>

結果はこうなります。


サイズアップ・ペニス増大商品 商品購入金額の10%
発毛・育毛無料体験 予約1件につき3193円
入会1件につき19163円
高収入在宅チャットレディ 登録・稼動確認後に3500円
ペット保険 申込み1件につき1900円
亀頭増大,早漏,包茎の手術や治療 初回来店で30000円

テーブルそのものに関しては、ほぼいい感じだと思います。そうしたら中の文字色を変えましょう。

ところで、提示しているソースをご覧になって、何か気になりませんか?
タグの中にやたら同じことが書いてある。しかも長い。
本当に毎度こんな事をしなくては表が作れないのなら表なんて大嫌いです!

何か解決策はあるんでしょうか?
もちろん、あるからこんなこと書いているんですね。

それに関しては後ほど説明します。

今、気づいたんですがファンブログのエディタで文字色変えられますね。太さも変えられる。そしたら、右寄せ、左寄せ、真ん中あわせだけやればいいか

文字の配置方法は、枠の中の背景に画像を使いたい!で説明しています。やり方は同じです。

では、あえて文字を全部真ん中合わせにしてみます。
tableタグの中身を変えて、テーブル全部に適用させます。

<table style=”border:2px solid #fcc;background:#ffc;text-align:center“>

下がその結果です。


テーブルの中の文字を真ん中合わせ

サイズアップ・ペニス増大商品 商品購入金額の10%
発毛・育毛無料体験 予約1件につき3193円
入会1件につき19163円
高収入在宅チャットレディ 登録・稼動確認後に3500円
ペット保険 申込み1件につき1900円
亀頭増大,早漏,包茎の手術や治療 初回来店で30000円

文字が真ん中合わせになりました。変更前は左寄せだったので、見比べて見てください。

では中の文字は左寄せのまま、表自体を画面の右に寄せるにはどうしたらよいでしょう?方法はいくつかあります。ひとつは画像の隣に文章を配置したいで使った、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>

div の width:100%によって、div タグに自分自身の横幅がいくらあるのか指示します。div が自分の横幅を把握していないと正しくマージンの値が算出できません。それから今回は、誰が試しても同じ結果になるようにpaddingの値を0でクリアします。

tableでは margin:0 auto を指定しています。(上下は0マージン、左右はautoと言う意味)
auto指定によって左右均等にマージンが割り振られます。


テーブルそのものを真ん中に配置

サイズアップ・ペニス増大商品 商品購入金額の10%
発毛・育毛無料体験 予約1件につき3193円
入会1件につき19163円
高収入在宅チャットレディ 登録・稼動確認後に3500円
ペット保険 申込み1件につき1900円
亀頭増大,早漏,包茎の手術や治療 初回来店で30000円

右寄せにしたい場合は、table の margin を 0 0 0 autoと指定します。
これはマージンの値が上右下は0、左はauto(右がゼロのこの場合はつまり、あるだけ全部)という意味です。

テーブルに関しては以上で終わります。

先ほど書いた、タグの中にぐちゃぐちゃ同じ事を書かないための方法は、シリーズ「タグの中にスタイルシートを直接書かない !」にまとめました。

それでは、皆様ごきげんよう!


関連コンテンツ

スポンサーリンク

「ブログの表の見栄えを良くしたい!の巻 その3」への1件のフィードバック

  1. こんばんわ。

    なんとなく 意味はわかるのですが、教えていただいたタグをコピペしてみましたが
    真ん中には行かないです・・??
    何か余分なスペースが入ってしまったかも・
    お暇な時に見ていただけますか・・
    たびたび 申し分けありませんm(__)m

    <は見つけました。 

    話は違いますが ↓ も来ていただけますか・・

    http://fanblogs.jp/mikannoheya/archive/519/0

    きっと ファンブログ特有の 余分なタグがスタイルシートにはいっているのではないかと 思うのですが・・・

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください