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

ネット活用術の頁

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

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

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

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

アドセンスのダブルレクタングルをテーブルコードで作成する方法!
今回ご紹介するのはGoogleアドセンスの配置として一躍人気者になっている、横並び広告スタイルです。ダブルレクタングルダブルレクタングルというテクニックは、現在多くのWebページにて採用されつつある配置スタイルの一種です。最近の人気...

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

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

<table>
<tr>
<td><左側のコード></td>
<td><右側のコード></td>
</tr>
</table>

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

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

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

 

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

 

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

 

 

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

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

 

スプーンが光っている女性 土下座中の男性

 

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

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

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

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

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

<table>
<tbody>
<tr>
<td>スプーンが光っている女性</td>
<td>土下座中の男性</td>
</tr>
</tbody>
</table>
&nbsp;

 

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

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

 

<table style="border-style: none;" border="1">
<tbody>
<td style="border-style: none;">スプーンが光っている女性</td>
<td style="border-style: none;">土下座中の男性</td>
</tr>
</tbody>
</table>

結果がこれです↓

スプーンが光っている女性 土下座中の男性

↑枠線が消えて表示されます。

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

 

結果がこれです↓

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

 

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

コメント

  1. mabo より:

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

    • おかえりなさい おかえりなさい より:

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

  2. 96taro より:

    管理人様
    始めまして96taroと申します

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

    • おかえりなさい おかえりなさい より:

      はじめまして96taroさん。
      お役にたてたようで嬉しく思います(*^^*)

トップへ戻る