使用 HTML 1.0 过渡不遵守表格宽度答案

【问题标题】：Table width not respected using HTML 1.0 transitional使用 HTML 1.0 过渡不遵守表格宽度
【发布时间】：2015-06-07 19:28:01
【问题描述】：

编辑：记住你的 COLSPANS。谢谢 Lynel Hudson。

似乎我无法让我的桌子尊重宽度。到目前为止，这是我的代码：

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

<head>

</head>

<body>

    <table width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="center">
        <tr width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle" *EDIT: colspan="3" /EDIT*>
                <img src="http://vixi.com/sites/default/files/imagecache/Frontpage/RawFood.jpg" style="display:block;" border="0" width="480px" height="200px"/>
            </td>
        </tr>
        <tr width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="red" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>

            <td width="440px" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="left" valign="middle" style="font-size:20px;">
                Stuff
            </td>

            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>
        </tr>
    </table>

</body>

现在，当您从代码中取出第二行时，表格的整体宽度会得到尊重。但是，在第二行添加三个数据单元格在一定程度上破坏了宽度。

看来，在第二行，我的两个带有空白文本 (&nbsp;) 的侧单元格的宽度没有得到尊重。

我试过table-layout:fixed和auto，还是不行。

另外，我知道 HTML 元素标签中的内联样式是不受欢迎的，但出于某种原因，这段特定的代码需要它。对于给您带来的不便，我深表歉意。

【问题讨论】：

您可能想尝试验证该 XHTML。它有相当多的错误。 validator.w3.org
当然，让我处理这个问题，我会用更正后的代码进行更新。
您似乎在滥用表格进行布局。不要那样做。你还没有设法让它工作，当你只想要一个给定宽度的容器保存一个图像，它下面有一些内容有边距时，它非常复杂..
我意识到表格和内联css不是理想的方法，但它需要这样。这些是我不确定我能说的原因。编辑：如果我不使用表格/html1.0，我就不会在这里
所以，这个问题已经通过另一个答案得到解决（我的第一个 TD 中的colspan=3），但我现在关心标记验证。似乎它在获取不在style=" " 标记内的任何样式代码时遇到了问题，但那些不在的样式代码仍然正确呈现。让代码保持现在的样子有什么可预见的实际后果吗？

标签： html html-table width cells

【解决方案1】：

这是因为您的第一行只有一个表格单元格，第二行有 3 个。顶行扩展以容纳这 3 个单元格。将colspan="3" 添加到第一行的第一个表格单元格以解决宽度问题。

<head>

</head>

<body>

    <table width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="center">
        <tr width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle" colspan="3">
                <img src="http://vixi.com/sites/default/files/imagecache/Frontpage/RawFood.jpg" style="display:block;" border="0" width="480px" height="200px"/>
            </td>
        </tr>
        <tr width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="red" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>

            <td width="440px" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="left" valign="middle" style="font-size:20px;">
                Stuff
            </td>

            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>
        </tr>
    </table>

</body>

使用内联 CSS 样式和表格进行布局通常不是一个好主意，这可能是导致您遇到此问题的一个因素。

【讨论】：

天哪……你是上帝。