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">.

您的表格第一行有一个单元格，第二行有四个单元格。这违反了 HTML 表格模型原则，所以所有的赌注都没有了。在实践中发生的事情就是您在此处看到的：第一个单元格（大图像）被视为仅属于第一列。

这可以在例如 Firefox Web Developer Extension 中看到，它具有在所有单元格周围绘制边框的功能。

于 2012-05-21T16:01:49.900 回答