Question

我有一个网站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>

Answer 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 example

作为旁注，您可能需要考虑更新代码并删除已弃用的属性，如align="center"和内联CSS等。

Answer 2

快速修复：将第一个<td>更改为<td colspan="4">。

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

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

如何摆脱细胞之间的大空间？

2 个答案: