W3C Validator 告诉我出现错误，不知道如何修复答案

【问题标题】：W3C Validator tells me I have an Error, not sure how to fixW3C Validator 告诉我出现错误，不知道如何修复
【发布时间】：2013-09-14 05:26:30
【问题描述】：

所以我正在为我的班级写一个css页面，我注意到我应用到span的样式根本不适用，所以我去http://validator.w3.org/检查我做错了什么，它给了我这个错误留言

"Line 32, Column 6: Start tag span seen in table."

这是我的第 32 行

<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td><td>$130,503,621</td><td>2011</td></tr></span>

这是特定样式的代码

span{background-color=:#666;font-weight:bold;color:white;}

基本上，我的目标是使该表具有表中的所有其他行，背景颜色为黑色，文本为白色

这是完整的代码，以防不应用此样式的错误出现在其他地方。 那里还有其他的样式还没有适用于任何东西，因为这还没有完成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lowest Grossing Movies of all time</title>
<style>
span{background-color=:#666;font-weight:bold;color:white;}
p{text-decoration:underline;line-height:200%;}
h1{text-align:center;font-size:125%;}
table{border-collapse:collapse;}
th,td{padding:25px;}
</style>                
</head>
<body>
<h1> Lowest Grossing Movies of All Time </h1>
<table border="1">
<tr><th>Title</th><th>Production Budget</th><th>World Wide Gross</th><th>Net Loss</th>    <th>Release Year</th></tr>
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td>    <td>$130,503,621</td><td>2011</td></tr></span>
<tr><td>The 13th Warrior</td><td>$160,000,000</td><td>$61,698,899</td><td>$129,150,551</td><td>1999</td></tr>
<span><tr><td>The Lone Ranger</td><td>$225,000,000</td><td>$243,377,083</td><td>$103,311,459</td><td>2013</td></tr></span>
<tr><td>R.I.P.D.</td><td>$130,000,000</td><td>$66,627,120</td><td>$96,6865,440</td><td>2013</tr>
<span><tr><td>John Carter</td><td>$250,00,00</td><td>$282,778,100</td><td>$108,610,950</td><td>2012</td></tr></span>
</table> 
</body>
</html>

【问题讨论】：

在每个<td> 中都有<span>，你不能在<tr> 级别拥有它，或者为了更容易，只需更改样式并执行类似table tr td {background-color=:#666;font-weight:bold;color:white;} 的操作
table 元素的唯一个有效子元素是 thead、tfoot、tbody 和 tr。就这样。 span 应该不出现在 table 中除非它被包裹在 th 或 td 中。
这不是问题的一部分，但请不要这样W3C != W3Schools
.numberOfTheBeast {background-color=:#666;font-weight:bold;color:white;} 和 <tr class="numberOfTheBeast" ...
哦，好吧，我只需要将 td 和 tr 元素内的 span 标签每隔一行移动一次，它应该可以正常工作吗？

标签： html css

【解决方案1】：

您面临的最大问题是 HTML table 元素的有效子元素有限，它们是：

colgroup,
caption,
thead,
tfoot,
tbody，和
tr

所以从table 中删除span 元素可以解决这个问题。此外，您忘记关闭td 元素之一（您关闭了tr，但忘记了td）；这就是为什么可读的 HTML 更容易维护的原因（当它被缩进和留白时，更容易看到代码和遗漏）。

顺便说一下，如果使用您的原始 HTML，如果您使用浏览器的开发工具（例如 Chromium 下的 Web Inspector 或 Mozilla 下的 Firebug），您将能够检查 DOM，它会向您显示浏览器的（不可预测且不可靠）对 HTML 进行重新排序以生成有效文档）。例如，Web Inspector 显示：

JS Fiddle 'source' for above image.

注意三个span 元素从table 本身移到table 元素之前。

您更正后的 HTML：

<h1> Lowest Grossing Movies of All Time </h1>

<table>
    <tr>
        <th>Title</th>
        <th>Production Budget</th>
        <th>World Wide Gross</th>
        <th>Net Loss</th>
        <th>Release Year</th>
    </tr>
    <tr>
        <td>Mars needs moms</td>
        <td>$150,000,000</td>
        <td>$38,992,758</td>
        <td>$130,503,621</td>
        <td>2011</td>
    </tr>
    <tr>
        <td>The 13th Warrior</td>
        <td>$160,000,000</td>
        <td>$61,698,899</td>
        <td>$129,150,551</td>
        <td>1999</td>
    </tr>
    <tr>
        <td>The Lone Ranger</td>
        <td>$225,000,000</td>
        <td>$243,377,083</td>
        <td>$103,311,459</td>
        <td>2013</td>
    </tr>
    <tr>
        <td>R.I.P.D.</td>
        <td>$130,000,000</td>
        <td>$66,627,120</td>
        <td>$96,6865,440</td>
        <td>2013</td> <!-- you omitted a closing </td> tag here -->
    </tr>
    <tr>
        <td>John Carter</td>
        <td>$250,00,00</td>
        <td>$282,778,100</td>
        <td>$108,610,950</td>
        <td>2012</td>
    </tr>
</table>

使用 CSS：

table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #000;
}

/* using ':nth-child(odd)' to style the 'td' elements
   of the alternate/odd rows of the table */
tbody tr:nth-child(odd) td {
    background-color: #ffa;
}

JS Fiddle demo.

参考资料：

<table>。
:nth-child()。

【讨论】：

好吧，我什至不知道这是一个可能的标签，非常感谢您提供这些信息。虽然我必须问，你只是手动更正了格式吗？与我输入的混乱相比，您输入的内容看起来非常整洁，这只是您的经验，还是有办法将杂乱无章的代码整理成整齐的格式？
不客气！至于整理？我的建议（整理现有的 HTML、CSS 或JavaScript）是粘贴到JS Fiddle（使用您要整理的代码的相应面板）并单击“整理”按钮。显然，有一些熟悉和经验的元素，但使用工具进行整理比手工整理更容易。然而，当编写时，我发现更容易保持整洁（然后使用 JS Fiddle 整理最终结果，以确保缩进匹配）。

【解决方案2】：

在大多数现代浏览器中，这可以通过 css 实现：

tr:nth-child(even) {
    background-color:#666;
    font-weight:bold;
    color:white;
}

不需要跨度标签。（删除它们）

JS 小提琴： http://jsfiddle.net/uB2GR/

【讨论】：

【解决方案3】：

您已将 <span> 元素放置在两个 <tr> 元素之间。这不是有效的 HTML。您需要将整个 <span> 放在一个表格单元格中。

<tr><td><span>Some stuff</span></td><td><span>More stuff</span></td></tr>

如果您这样做是出于样式目的，则可能有更好的方法将类应用于 <td> 元素

【讨论】：