是否有必要将 <td> 放在 <tr> 内答案

【问题标题】：Is it necessary to put the <td> inside a <tr>是否有必要将 <td> 放在 <tr> 内
【发布时间】：2014-01-25 07:40:02
【问题描述】：

<TR class="bcgrndClr">
  <span class="Title">
    My title
  </span>
</TR>

我写了这部分，但 背景颜色 没有出现在 chrome 和其他浏览器中，而在“IE”中工作正常。

所以有必要在<span> 之前放置一个<td> 还是我应该选择<th> 而不是<tr>

或者我应该如何给这个特定的表命名（有一些条件）

【问题讨论】：

是的，如果你想要有效的 HTML 是必要的。有什么大不了的？这是一个额外的 9 个字符...
<th> 不能替代 <tr>。 w3schools.com/tags/tag_th.asp
你的问题是使用<th>还是<td>？
如果你不这样做。要么它不起作用，要么它会起作用:-) [基于 DOCTYPE]。如果它确实起作用，那是因为浏览器为您完成了将 TABLE、TBODY、TR 元素插入 DOM 的工作。去看看 FireBug，他们就在那里！
从技术上讲，它在 IE 中不能正常工作，尽管它不应该正常工作。如果浏览器遵循标准，则浏览器可以正常工作，并且没有关于在缺少单元格时应如何处理行背景颜色的标准。

标签： html css

【解决方案1】：

td 标签代表表格数据，而 tr 标签是表格行。因此，您在 HTML 中创建一行，然后向其中添加一个 td，您添加的 td 数量决定了该行中的列数。 th 标签代表可以连续使用的表格标题。

如果您在 td 中添加 span 标签，背景颜色将显示。你的代码看起来有点像这样：

<table><tr class="bg-color"><td><span class="title">My title</span></td></tr></table>

CSS 应该是这样的：

.bg-color{background:#ff0000;}

【讨论】：

【解决方案2】：

如果您查看HTML 4 spec 或HTML5 Spec，您会看到

HTML 4：

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
  >

HTML5：

4.9.8 tr 元素

内容模型：零个或多个 td、th 和脚本支持元素

注意到TH 和TD？这些是唯一允许的两个子元素。

向TR 添加无效元素时会发生什么取决于浏览器。有些人会试图弄清楚你在做什么，其他人会从流程中删除它并在之后添加它。编写有效的代码，这样浏览器就不必猜测了。

由于您有一个标题类，因此您似乎不应该使用一行。如果您想在表格中添加标题行，您需要使用<caption> 元素。

来自 MDN：

HTML <caption> 元素（或 HTML 表格标题元素）代表表的标题。虽然它总是一个 <table>，它的样式，使用 CSS，可以把它放在其他地方，相对于桌子。

基本用法：

<table summary="Description Text">
    <caption>My Table Of Numbers</caption>
    <thead>
        <tr>
            <th>C 1</th>
            <th>C 2</th>
            <th>C 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>C 1</th>
            <th>C 2</th>
            <th>C 3</th>
        </tr>
    </tfoot>
</table>

JSFiddle：http://jsfiddle.net/vM688/

【讨论】：

【解决方案3】：

使用

<table>
    <thead>
        <tr>
            <!-- text b/w <th></th> will bold and center aligned by default -->
            <th> You title here </th>
        </tr>
    </thead>
    <tbody>
         <!-- Content of you table here -->
    </tbody>
</table>

【讨论】：

抱歉，这是需要的。

【解决方案4】：

根据规范，tr 可以包含仅 th 和td 元素。正如其他人所说，不要偷懒并编写几个额外的字符以使您的 HTML 有效

【讨论】：

【解决方案5】：

是的，您需要<td>。如果您编写了无效的 HTML，浏览器仍然会尝试渲染表格，但浏览器之间的渲染会不一致。

如果单元格是标题单元格，<th> 可以代替 <td>。它确实不会代替始终需要的<tr>。

如果您不确定哪些元素是必需的，哪些是可选的，您可以随时查看HTML5 spec：

tr 元素表示表格中的一行单元格。允许内容零个或多个：一个 td 元素，或第一个元素

【讨论】：

【解决方案6】：

TH 和 TD 可以互换，但 TH 和 TR 不能互换。至少我是这么用的。

你可以这样做：

<tr><td colspan="2"><span>Hello World</span></td></tr>

colspan 用于使一个 TD 元素跨越多个行元素。

【讨论】：

这是一个非常优雅的答案。谢谢！！