0

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

3 回答 3

5

您面临的最大问题是作为 HTMLtable元素的有效子元素的元素有限，它们是：

  • 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'。

注意在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 小提琴演示。

参考：

于 2013-09-13T21:10:28.540 回答
1

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

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

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

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

于 2013-09-13T21:09:40.887 回答
0

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

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

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

于 2013-09-13T21:07:52.827 回答