在单个 table 行 <tr> 中混合 table header <th> 和 table 数据 <td> 单元格

Question

我有一组调查问题，每个问题都排成一行 table。我希望第一个条目用作提示，并且一直在该单元格中使用，如：

<table style='width:100% table-layout:fixed;border-collapse: collapse;'>
  <tr>
    <th style='width:40%'>
      <b>How long were you on active surveillance?</b>
    </th>
    <td style='width:10%;'>f3_watchtime_num</td>
    <td style='width:5%'></td>
    <td style='width:50%;>f3_watchtime</td>
  </tr>
</table>

它似乎工作正常，但我对在单个中混合和单元格有一些保留和疑问：

这是否符合 HTML5 标准？（是否有W3C文档允许或禁止这种做法？）
这种做法有什么缺点吗？

谢谢，大卫

Answer 1

W3C 的建议是避免使用 table 进行布局。它仅对显示有序数据有效，但这不是您的情况。您可以使用 <div> 实现相同的效果，并且在语义上是正确的。

另一件事是你关于混合的问题。我想如果你不写 <tbody> 和 <thead> 标签，你就不会在 table 中分隔 headers 的内容，所以这是正确的，因为没有' <thead> 中有 <td> 个标签，<tbody> 中没有 <th> 个标签。

但是，如果您不为此目的使用 tables 是更好的做法。

Answer 2

1.这符合 HTML5 标准吗？（是否有W3C文档允许或禁止这种做法？）

W3C tr 参考说它的内容模型可以包含：

Content Model:
Zero or more td, th, and script-supporting elements
https://www.w3.org/TR/html5/tabular-data.html#the-tr-element

虽然您的用法不是很常见，但 W3C 中没有任何内容禁止它。

2。这种做法有什么缺点吗？

至于一起使用 th 和 td，只要它们是 tr 元素的子元素，它就会被 W3C 接受。
但是，如果您要显示表格数据（即您的调查结果是数据），则使用 table 就可以了。如果您使用 table 进行布局，则应改用基于 CSS 的布局。

在单个 table 行 <tr> 中混合 table header <th> 和 table 数据 <td> 单元格

Mixing table header <th> and table data <td> cells in a single table row <tr>

html-table

w3c