html - W3C Validator 告诉我我有一个错误，不知道如何修复

所以我正在为我的类(class)写一个 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>

最佳答案

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

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

所以删除 span来自 table 的元素解决了那个问题。此外，您忘记关闭其中一个 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 - W3C Validator 告诉我我有一个错误，不知道如何修复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18795202/

html - W3C Validator 告诉我我有一个错误，不知道如何修复

上一篇：javascript - 清除所有 Javascript 应用的样式

下一篇：jquery - 滑动动画只有一个div