HTML 无效验证答案

【问题标题】：HTML invalid validationHTML 无效验证
【发布时间】：2013-07-31 23:53:07
【问题描述】：

HTML：

<table border="1" width="100%">
    <tr>
        <th style= "width: 10%"> Quantity </th>
        <th style= "width: 47%"> Info </th>
    </tr>
</table>

我尝试使用 XHTML 1.0 Strict 进行验证，但它告诉我在这个 HTML 版本中没有宽度元素的属性样式。有没有其他方法可以在没有验证问题的情况下编写宽度？

【问题讨论】：

border 和 width 属性在很久以前就被 CSS 弃用了。
您的意思是验证器说table 元素没有属性width。（以后，复制并粘贴错误消息。）
或者你的意思一定完全不同。该片段实际上是有效的 XHTML 1.0 Strict。
@Kolink，这些元素的属性在任何已发布的 HTML 规范中都没有被弃用，包括 XHTML 1.0。在 HTML5（正在进行中）中，table 的 width 属性被声明为已过时。

标签： html

【解决方案1】：

table 上的width 属性不会导致 XHTML 1.0 出现验证问题。但是，如果您出于其他原因希望摆脱它，您可以将其替换为将 width 属性设置为值 100% 的 CSS 代码。一种简单的方法是将属性替换为具有合适值的style 属性：

<table border="1" style="width: 100%">

不过，通常最好使用外部样式表，或者至少使用style 元素，而不是style 属性。

其他答案也解决了替换 border="1" 属性的问题，尽管没有要求这样做。它会稍微复杂一些，因为该属性也会影响单元格之间的边界；见我的Mapping presentational HTML to CSS。

【讨论】：

【解决方案2】：

我建议将id 分配给table，然后在外部CSS 样式表中对其进行样式设置。但这应该足以验证：

<table style="border: 1px solid black; width: 100%;">
    <tr style="border: 1px solid black;">
        <th style="width: 10%; border: 1px solid black;"> Quantity </th>
        <th style="width: 47%; border: 1px solid black;"> Info </th>
    </tr>
</table>

【讨论】：

无效的 CSS。修复后（使用1px 而不是1），仅在整个表格周围创建边框，而不是在单元格之间创建边框，就像border=1 所做的那样。
@JukkaK.Korpela 我想这是对的，但是为了模仿已弃用的border = 1，他将不得不使用外部样式表。我已经更新了我的答案。
外部样式表通常是最好的样式设置方法，但它不是需要的目的。可以在td 元素上使用style 属性，或者更合理的是style 元素。
@JukkaK.Korpela 是的。在这种情况下，使用内联样式虽然丑陋且不符合语义，但应该足以模仿 border = 1 并同时验证 HTML 和 CSS。

【解决方案3】：

使用CSS定义width和border：

HTML：

<table>
<tr>
    <th class="q"> Quantity </th>
    <th class="i"> Info </th>
</tr>
</table>

CSS：

table{
    width:100%;
    border: 1px solid magenta;
}
.q{
    width: 10%;
}
.i{
    width: 47%;
}

【讨论】：

或者我可以做数量信息吗？
@Fred 我更新了答案
如果它应该产生与HTML属性border="1"相同的效果，则答案是错误的。这可以通过比较原始标记的呈现以及答案中的 HTML 和 CSS 来看出。
“固定”CSS 代码无效，如您所见，例如通过使用 W3C CSS 验证器。即使实际修复，它也不会复制border="1" 的效果。