Html 表格单元格未正确对齐答案

【问题标题】：Html table cells don't align properlyHtml 表格单元格未正确对齐
【发布时间】：2012-02-09 18:37:16
【问题描述】：

我不明白为什么这个表格没有正确对齐。第一行有 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>

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

【问题讨论】：

您不应该使用表格来布局非表格数据。我将尝试在下面用 div 为您提供一个更好的 CSS 示例。
@thenetimp 也许，但这个特殊情况有什么问题？我只是想对以这种方式构建的现有网站进行一些更改。

标签： html html-table

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这是我的版本：

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>

图片

和

结果

【讨论】：

【解决方案3】：

好的，下面是我的代码，我将如何使用带有一点 CSS 的 HTML 进行布局，以帮助您走上与 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>

要解决上述问题，您需要从第一行删除所有 colspan。它们没用，然后第二行的 colspans 不大于也不小于第一行的 rowspans。这样做之后，问题是您的图像不会在数学上相加，所以它会是错误的。你真的需要重新剪辑你的图像。

【讨论】：

【解决方案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>

加起来是 232 像素。下一个对应的行是colspan=3 加起来是 308。因为 308 != 232，所以你会有空格。

冲洗并重复下一列。如果您使第一行与第二行的列匹配，您的空间就会消失。如果我要这样做（我不会这样做），我只会有一行和一大列，其中包含所有按钮.....

【讨论】：

【解决方案5】：

不要将第 2 个 tr 拆分为 3 个 tds。

只需在第二个 tr 中添加 1 个 td 并使其成为 td colspan='9'

我还建议不要在第一个 <tr> 中执行 9 tds，因为它是多余的（无论td 高度/宽度设置如何，图像都会“推动”表格的边界以适应其规格.

【讨论】：