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

ブログの中に作ったテーブル(表)の見栄えをスタイルシートで調整します。
テーブルの罫線に好きな色をつける。テーブルの背景に好きな色をつける。
将来的には、外部スタイルシートと結びつける予定です。

スポンサーリンク


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

外枠だけはピンクになりました。
できれば、全部の枠をピンクで縁取りたい。そこで、すべてのマスのタグにスタイルシートを適用してみます。

<table style="border:2px solid #fcc;">
    <tr>
        <td  style="border:2px solid #fcc;">
            サイズアップ・ペニス増大商品
        </td>
        <td  style="border:2px solid #fcc;">
            商品購入金額の10%
        </td>
    </tr>
    <tr>
        <td  style="border:2px solid #fcc;">
            発毛・育毛無料体験
        </td>
        <td  style="border:2px solid #fcc;">
            予約1件につき3193円
            入会1件につき19163円
        </td>
    </tr>
    <tr>
        <td  style="border:2px solid #fcc;">
            高収入在宅チャットレディ
        </td>
        <td  style="border:2px solid #fcc;">
            登録・稼動確認後に3500円
        </td>
    </tr>
    <tr>
        <td  style="border:2px solid #fcc;">
            ペット保険
        </td>
        <td  style="border:2px solid #fcc;">
            申込み1件につき1900円
        </td>
    </tr>
    <tr>
        <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タグのstyleにbackgroundを追加してみます。

<table style=”border:2px solid #fcc;background:#ffc;”>

反映結果が下のようになります。


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

では、この状態で段のタグ tr にも背景指定をしたらどうなるんでしょう?
やってみましょう。赤い部分が変更箇所です。

<table style="border:2px solid #fcc;background:#ffc">
    <tr>
        <td  style="border:2px solid #fcc;">
            サイズアップ・ペニス増大商品
        </td>
        <td  style="border:2px solid #fcc;">
            商品購入金額の10%
        </td>
    </tr>
    <tr style="background:#ccf">
        <td  style="border:2px solid #fcc;">
            発毛・育毛無料体験
        </td>
        <td  style="border:2px solid #fcc;">
            予約1件につき3193円
            入会1件につき19163円
        </td>
    </tr>
    <tr>
        <td  style="border:2px solid #fcc;">
            高収入在宅チャットレディ
        </td>
        <td  style="border:2px solid #fcc;">
            登録・稼動確認後に3500円
        </td>
    </tr>
    <tr style="background:#ccf">
        <td  style="border:2px solid #fcc;">
            ペット保険
        </td>
        <td  style="border:2px solid #fcc;">
            申込み1件につき1900円
        </td>
    </tr>
    <tr>
        <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よりもtrが優先されるのがわかります。
さらにマスのタグtdの色指定をすると、それが優先されます。大きな括りよりも細部の指示の方が優先されると言うわけです。

ところでこのテーブル、今のままでは高さがそろっていないですよね。
段の高さを統一すれば見栄えがよくなるはずです。

またも文字数制限
ブログの表の見栄えを良くしたい!の巻 その3につづく。


関連コンテンツ

スポンサーリンク

コメントを残す

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

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