Question

所以我想删除这里显示的红色墨水中突出显示的额外空格： http://i.stack.imgur.com/d7Kwo.png

当我删除顶部图像时，表格宽度变得正确：800px

但我想要的是：http://i.stack.imgur.com/XPsz2.jpg

这是我目前的代码：

<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
    <tr>
    <td colspan=3><img src="N13BANNER.PNG"></td>
    <td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
    <td style="width:176px"><img src="N13BUTTON1.PNG"></td>
    <td width=176><img src="N13IMG5.jpg"></td>
    <td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
    <td width=176><img src="N13BUTTON2.PNG"></td>
    <td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
    <td width=176><img src="N13BUTTON3.PNG"></td>
    <td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
    <td width=176><img src="N13BUTTON4.PNG"></td>
    <td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
    <td width=176><a href="mailto:xahc@cie.org.uk?Subject=Adventure%20Me%20Up..."><img src="N13BUTTON5.PNG"></a></td>
    <td width=176><a href="mailto:xahc@cie.org.uk?Subject=Adventure%20Me%20Up..."><img src="N13IMG6.jpg"></a></td>
</tr>
<tr>
    <td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>

Answer 1

代码示例，更新了没有图像的表格布局。

这是你想要的吗？ ...然后你的图像很大，并且推动细胞太宽。

table {
  width: 800px;
}
td {
  background-color: gray;
  width: 20%;
  height: 85px;
}
tr:last-child td {
  height: 40px;
}
img {
  vertical-align: top;
}

<table>
<tr>
    <td colspan=4></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td colspan=3 rowspan=6></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td><a href="mailto:xahc@cie.org.uk?Subject=Adventure%20Me%20Up...">mail</a></td>
    <td><a href="mailto:xahc@cie.org.uk?Subject=Adventure%20Me%20Up...">mail</a></td>
</tr>
<tr>
    <td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>

如何删除表格中图像周围的空白

1 个答案: