Question

我无法理解为什么这张桌子没有正确对齐。第一行有9张图片，第二行有3张图片。出于某种原因，这张桌子超出了必要的范围，并在图片之间产生间隙。桌子的宽度是990，每行的所有图片的宽度总和也是990（我不计算边框宽度，我只是将它包括在内以显示细胞分开的位置。图片之间的间隙是如此之大，无法用边框宽度来解释。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#008000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<table id="Table_01" width="990" border="1" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td colspan="1"><img src="images/index_02.jpg" width="90" height="52" /></td>
            <td colspan="1"><img src="images/index_03.jpg" width="102" height="52" /></td>
            <td colspan="1"><img src="images/index_04.jpg" width="112" height="52" /></td>
            <td colspan="2"><img src="images/index_05.jpg" width="120" height="52" /></td>
            <td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
            <td colspan="2"><img src="images/index_06.jpg" width="112" height="52" /></td>
            <td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
            <td colspan="1"><img src="images/index_08.jpg" width="134" height="52" /></td>
            <td colspan="1"><img src="images/index_09.jpg" width="80" height="52" /></td>
        </tr>
        <tr>
            <td colspan="4"><img src="images/index_11.jpg" width="346"/></td>
            <td colspan="3"><img src="images/index_12.jpg" width="308"/></td>
            <td colspan="4"><img src="images/index_13.jpg" width="336"/></td>
        </tr>
    </tbody>
</table>
</body>
</html>

这是它的外观。我将页面背景颜色设置为绿色，以便可以轻松地与图像分离：

Answer 1

这是我的版本：

<强> CSS

body { font-size:10pt; font-family:Verdana; }
.header ul li { background: url('tab-left.png') bottom left no-repeat; float:left; list-style:none; }
.header ul li a { background: url('tab-right.png') bottom right no-repeat; color:#fff; display:block; padding:10px 26px; text-decoration:none; }
.header ul li a:hover { text-decoration:underline; }

.sub-header { clear:both; }
.sub-header li { background: url('...'); }
.sub-header li a { background: url('...'); font-size:12pt; text-transform:uppercase; }

<强> HTML

<div class="header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Coordinates</a></li>
        <li><a href="#">Corporate Portfolio</a></li>
    </ul>
    <ul class="sub-header">
        <li><a href="#">Need Staff?</a></li>
        <li><a href="#">Looking for a job?</a></li>
        <li><a href="#">Something....</a></li>
    </ul>
</div>

图片

和

<强>结果

Answer 2

尝试创建包含以下代码的css文件，并将其链接到您的表格。

#table {
  border-collapse: collapse;
  border-spacing: 0;
}

这应该可以消除表格中的填充和边距

Answer 3

好的，所以这里是我的代码，我将如何使用一些CSS来解决这个问题，以帮助您找到最新的HTML技能。

我将从你的背景图片开始。目前，如果您在表格中拼凑的图像，则将其作为一部分。如果您的代码中存在语法错误，则可能会导致错误，就像您所看到的那样。相反，如果您将其定义为正文的背景图像，则永远不会发生这种情况。

接下来是导航。你有一堆标签。这些选项卡包含背景的一部分，它们实际上应该只是图像本身。导航是一个网页列表，因此实质上您应该使用无序列表，因为它们没有特定的顺序。 css选择器显示：内联;告诉列表的行项目改变它的显示类型，使所有图像彼此相邻，而不是彼此列出。在.nav类中，边距告诉它将它居中，宽度是不言自明的。

<head>
    <style type="text/css">
        body { background-image: url('/images/background-image.png') repeat-y; }
        .nav { width: 800px; margin: 0 auto; }
        .nav li { display: inline }
    </style>
</head>
<body>
  <ul class="header-nav nav">
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
  </ul>

  <ul class="other-nav nav">
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
    <li><a href="#"><img></a></li>
  </ul>
</body>

要解决上述问题，您需要从第一行中删除所有colspans。它们是无用的，然后让第二行中的colspans不超过第一行的行间距。在这样做之后，问题就是你的图像不能以数学方式加起来，所以它会出错。你真的需要重新制作你的图像。

Answer 4

绝对是人们发布的CSS版本。请不要延续1995年的HTML ....

但是，要回答原始问题，请加上您指定的宽度。

<td colspan="1"><img src="images/index_02.jpg" width="90" height="52" /></td>
<td colspan="1"><img src="images/index_03.jpg" width="102" height="52" /></td>
<td colspan="1"><img src="images/index_04.jpg" width="112" height="52" /></td>
<td colspan="2"><img src="images/index_05.jpg" width="120" height="52" /></td>

这些列对应于指定宽度为346的colspan=4组。您将分割最后一列，因为它的colspan为2.我的头已经疼了。

第二组是3列：

<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="2"><img src="images/index_06.jpg" width="112" height="52" /></td>

其中加起来为232px。下一个对应的行是colspan=3，总计为308.因为308！= 232，你将有空格。

冲洗并重复下一列。如果您将第一行与第二行中的列匹配，则您的空格会消失。如果我这样做（我不会这样做），我会只有一行和一个大列，里面有所有按钮......

Answer 5

请勿将第二个tr拆分为3个td。

只需在第二个td中设置1 tr并将其设为td colspan='9'

我还建议你不要在第一个td中做9 <tr>，因为它是多余的（图片会“推”到表格的边界以符合他们的规格，无论{{1高度/宽度设置。

Html表格单元格未正确对齐

5 个答案: