テーブルタグの上下の隙間を消す(見えなくする)方法

au (EZweb)端末ではテーブルとテーブルの間に1ピクセルぐらいの隙間ができます。
<TABLE>タグに背景色があるとよくわかります。

かといってテーブルをつなげてしまうと、auの場合は読み込み中に伸びたり縮んだり変な挙動をします。
なるべく小さい単位でテーブルを作りたいところです。

同様にマーキー(<MARQUEE>)と画像、テーブルと画像の間にも隙間ができます。

普通にやるとこんな感じです。

<table border="0" bgcolor="#00ffff" width="100%">
  <tr>
    <td>テスト</td>
  </tr>
</table>
<table border="0" bgcolor="#0000ff" width="100%">
  <tr>
    <td>テスト</td>
  </tr>
</table>
<table border="0" bgcolor="#ff0000" width="100%">
  <tr>
    <td>テスト</td>
  </tr>
</table>

テーブルの下に1ピクセルのマージンができます。

テーブルの中にテーブルを作ろうとしてやってみると、内側のテーブルが消えてしまいます。
auではテーブルのネスト(入れ子)は禁止です。

そこで対処法ですが、テーブルを<DIV>タグで囲ってそこに背景色を付けると、隙間がないように見えます。


<div bgcolor="#0000ff">
<div bgcolor="#00ffff">
<table border="0" bgcolor="#00ffff" width="100%">
  <tr>
    <td>テスト</td>
  </tr>
</table>
<table border="0" bgcolor="#0000ff" width="100%">
  <tr>
    <td>テスト</td>
  </tr>
</table>
</div>
<table border="0" bgcolor="#ff0000" width="100%">
  <tr>
    <td>テスト</td>
  </tr>
</table>
</div>

タイトルには『テーブルタグの上下の隙間を消す方法』とありますが、実際には消えているわけではなくて、消えてるように見える方法です。

スポンサーリンク

関連記事

スポンサーリンク

Image.width

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る