Question

所以我正在为我的班级编写一个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>

Answer 1

您面临的最大问题是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元素。{/ p>

您更正后的HTML：

table

使用CSS：

<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>

JS Fiddle demo

参考文献：

<table>。
:nth-child()。

Answer 2

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

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

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

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

Answer 3

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

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

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

W3C Validator告诉我我有一个错误，不知道如何解决

3 个答案: