0

私はウェブサイトhttp://pigymunk.co.ukを持っています、そしてあなたが見ることができるように、テーブルは2つのセルの間に大きなギャップがあるところにいくつかの欠点があります。誰かがその欠点を見つけるのを手伝ってもらえますか？

<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
   <td><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style="align:"middle"/></td>
   </tr>
<tr>
   <td><a href="http://pigymunk.co.uk/?page_id=2" target="_self"><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></a>    </td>
   <td><a href="http://pigymunk.co.uk/?page_id=76" target="_self"><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></a></td>

4

2 に答える 2

1

最初のセルのcolspan属性を変更して、他の列にまたがることができます。があるセルに注意してください<td colspan="4">。これを試して：

<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
   <td colspan="4"><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style=" align:"middle"/></td>
</tr>
<tr>
   <td><a href="http://pigymunk.co.uk/?page_id=2" target="_self"><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></a></td>
   <td><a href="http://pigymunk.co.uk/?page_id=76" target="_self"><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></a></td>
   <td><a href="http://facebook.com/jackweatherilt" target="_self"><img src="http://www.pigymunk.co.uk/Faceb%20icon.png" alt="Facebook" align:"middle"/></a></td>
   <td><a href="http://pigymunk.co.uk/distractions" target="_self"><img src="http://www.pigymunk.co.uk/distractions.png" alt="Demos" align:"middle"/></a></td>
</tr>
</table>

jsFiddleの例。

align="center"また、補足として、コードを更新し、 CSSなどの非推奨の属性を削除することを検討することをお勧めします。

于 2012-05-21T15:59:43.013 に答える
1

クイックフィックス：最初のをに変更<td>し<td colspan="4">ます。

テーブルには、最初の行に1つのセル、2番目の行に4つのセルがあります。これはHTMLテーブルモデルの原則に違反しているため、すべての賭けは無効です。実際に起こることは、ここに表示されていることです。最初のセル（大きな画像）は、最初の列にのみ属するものとして扱われます。

これは、たとえばFirefox Web Developer Extensionで見ることができます。これは、すべてのセルの周囲に境界線を描画する機能を備えています。

于 2012-05-21T16:01:49.900 に答える