アクセストリガー

暮らしのエンタメブログ

WebDesign

HTMLテーブルタグで表示される枠線を消す方法!

HTMLテーブルタグで表示される枠線を消す方法!

HTMLコードでテーブルタグを書いて表などを作成することができますね。

私の場合は、アドセンスの広告などを横並びにしたり画像を横並びにしたりとする方法を行う際に利用してきました。

表の枠線気になりませんか?

例えばアドセンスのダブルレクタングルといって、広告を横並びに配置したら収益化がアップしたなどという例にならったりするため、その方法のひとつとして試みたことがありました。

AdSenceのダブルレクタングルをテーマに頼らず自分で作成する方法!

おかえりなさい @okaerinasainet です。今回ご紹介するのはGoogleアドセンスの配置として一躍人気者になっている、横並び広告スタイルです。ダブルレクタングルダブルレクタングルというテクニックは、現在多くの…

この方法で作成するために指定したテーブルタグを書くためのコードはシンプルな構造でした。

 

ご紹介した投稿内でのコードの部分は、<左側の広告コード><右側の広告コード>としていますが、今回は広告ではなく画像を使った例としますので、単に<左側のコード><右側のコード>として考えて下さい。

この方法であると、テーブルの表の枠線が表示されるため枠線を消してすっきりさせたいなと思うようになりました。

枠線がそのままだとこうなる

例えば先ほどのテーブルタグのコードの中の<左側のコード>の箇所へ次の画像を入れます。

孔明

 

そして<右側のコード>の方へは次の画像を入れました。

テッテレー (1)

 

すると次のように表示されます。

 

孔明 テッテレー (1)

 

左右の画像の外側に枠線があるので気になる方には気になりますよね!

これがテキストのテーブル(表)であるとそうでもないのですが・・・。

 

孔明 テッテレー

 

枠線はこのようにして消す

このようなテーブルの枠線を指定する方法として、新たにこの後紹介するコードを追記するとで可能になります。

テキストで説明する方がわかり易いので今回はテキストによる説明を行います。

テキストで<左側のコード>の部分に「孔明」、<左側のコード>の部分に「テッテレー」を使っています。

元のコードはこちらになっています。(枠線あり)

 

これに対して次のように追記しました。

次のコードで書くと枠線は消えます。(枠線なし)

結果がこれです↓

 

孔明テッテレー

 

同様にこれを画像バージョンの方でもやってみました。

 

結果がこれです↓

孔明 テッテレー (1)

枠線が消えていますよね!

 

いかがですかすっきりしていて見やすいでしょう!

 

テッテレー!!

 

ついつい右側のお役人風の2人が悪だくみをしていそうな画像がメディアファイルに残っていたため使ってしまいましたが、あまり使うと三十路男さん @30sman_blog にしかられそうですね(*’▽’)

なかなか味のあるイラストでついついまた使ってしまいました(‘◇’)ゞ


コメント

  • Comments ( 4 )
  • Trackbacks ( 0 )
  1. 管理人様
    始めまして96taroと申します

    「テーブルタグの枠線なし」にする記事を
    利用させていただき、大変助かりました。
    感謝申し上げます。

  2. 管理人様
    はじめまして、maboと申します。
    枠線を消す記事で、たいへん助かりました。
    ありがとうございます。
    自分はブログを始めて5カ月くらいなんですが、
    ずっとなんとかならないか悩んでいました。
    取り急ぎお礼申し上げます。

    • mabo様。
      私はブログ歴2年目ですが、まだまだへなちょこな知識のためブログに活用できそうなアイデアを手探りで情報収集しております。
      そして他人にも勧めれそうなものをお伝えしているような感じでやっています。
      今回の記事がお役に立てたようで何よりです。
      maboさんからのコメント嬉しかったです(^^)/

コメントをどうぞ

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

アクセストリガーは暮らしの総合エンタメブログです!

こんな人がこのブログを書いています

このブログ「アクセストリガー」の管理人のおかえりなさい @okaerinasainet です。 妻と子ども1人の3人暮らし現役看護師➕ライター兼業のアラフォーパパ。

詳細なプロフィールを見る 

取材・寄稿・ネット対談などの依頼は お問い合わせページ からお願いしますm(__)mまた雑談や相談が出来る友達も募集しています。よろしかったらポチっとだけお願いします。

友だち追加

アクセストリガーの購読はこちらから

SNSをフォローする

follow us in feedly
  • ピックアップ