在 HTML5 的表格标题中使用按钮在语义上是否正确？

Question

我有一个产品数据矩阵。

我的目标是：

• 使用 HTML5 以表格格式显示矩阵
• 在描述它的数据上方显示一个左对齐的“标题”
• 显示一个右对齐的“添加”按钮，与标题垂直对齐，便于向表格中添加行
• 显示标题行来描述每列数据
• 如果可能的话，以语义上“正确”的方式完成上述所有操作

因此，最终结果将类似于：

--------------------------------------------------------
|Product Catalog                         [+Add Product]|
--------------------------------------------------------
| Title | Cost | Weight | and | so | on | ...          |
--------------------------------------------------------
| Thing1| $5.99| 3 oz   | ... | ...| ...| ...          |
| Thing2| $2.99| 2 oz   | ... | ...| ...| ...          |
--------------------------------------------------------

我目前的代码：

<table>
    <caption>Product Catalog <button style="float: right; display: block;">+Add Product</button></caption>
    <thead>
        <tr>
            <th>Title</th>
            <th>Cost</th>
            <th>Weight</th>
            <th>and</th>
            <th>so</th>
            <th>on</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Thing1</td>
            <td>$5.99</td>
            <td>3 oz</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>Thing2</td>
            <td>$2.99</td>
            <td>2 oz</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

根据 HTML5 规范，标题元素可以包含任何流内容，包括按钮。

从规范：

内容模型：流内容，但没有后代表格元素

但是，相同的规范将标题元素定义为：

如果它有一个父元素并且它是一个表格元素，则标题元素表示作为其父元素的表格的标题。

根据该描述，按钮似乎不属于标题内，因为它不会为表格的标题提供任何信息，即使在技术上是允许的。

我的问题是：在表格标题中包含一个按钮在语义上是否“正确”？如果不“正确”，是否可以接受？是否有一种在语义上更正确的方法来达到预期的结果？

我发现了很多处理表格语义的问题/答案，但大多数都没有处理表格上的按钮。

此问题/答案询问表格中的按钮，但它特定于“单元格”内的按钮，而不是标题。

HTML5 规范：

• 标题元素：https : //www.w3.org/TR/html5/tabular-data.html#the-caption-element
• 流内容：https : //www.w3.org/TR/html5/dom.html#flow-content-1

编辑： 这个问题/答案似乎与我的问题具有相同的性质，但他问的是将他的按钮放在 a 内<th>，而不是表格标题内。

我考虑过的一种解决方案是：根本不使用标题。只需在表格标签之前放置一个<h1>或类似的标题标签。唯一的问题是标题将不再与表格相关......或者会吗？事实上，这可能就是答案。如果我将a和 the包裹在 a或 a 中，那可能会起作用吗？<h1><table><section><div>

我正在寻找“最正确”的方式。

Answer 1

HTML5 定义（在4.9.2caption元素和4.9.12 处理模型中）caption元素

\n\n

\n
• “代表标题table，并且
\n
• “可以引入表格的上下文，使其更容易理解”，以及
\n
• “给表格一个标题或图例”。
\n

\n\n

根据我对标题（或标题或标题）的理解，我认为“添加产品”按钮不应成为table\xe2\x80\x99s 标题的一部分table\xe2\x80\x99s 标题的一部分。

\n\n

button如果我的假设是正确的，那么在中使用它将会是一个错误caption. 内容模型允许这样做的事实并不意味着它\xe2\x80\x99s 一定有效。

\n\n

如果某个东西\xe2\x80\x99s有效，不仅基于语法要求（例如“内容模型”和“可以使用该元素的上下文”），而且还基于语义要求。您可以\xe2\x80\x99t 以一种不可能出现语义错误的方式表示内容模型。虽然这个特定按钮可能不适合caption，但在其他情况下可能会出现button是合适的。

\n\n

\n

如果不“正确”，可以接受吗？

\n

\n\n

这取决于您“可接受”的\xe2\x80\x99。例如，使用默认配置的常见 Web 浏览器的用户很可能不会受到此错误的任何影响。但\xe2\x80\x99s 可以想象（但可能不太可能），具有“不常见”设置（例如，具有特定辅助工具）的用户可能会以某种方式受到此影响。

\n\n

如果有了buttonincaption可以让你的实现更容易，我不会\xe2\x80\x99 太担心这一点并保持这样，除非你的测试（或你得到的反馈）表明它可能有问题。

\n\n

选择

\n\n

我不会\xe2\x80\x99t 在元素中包含“添加产品”按钮table，但在元素之前或之后table。

\n\n

<form>\n  <button>\xe2\x80\xa6</button>\n</form>\n\n<table>\n  <caption>\xe2\x80\xa6</caption>\n</table>\n

\n\n

这取决于上下文，在分段内容元素中包含table和是否合适（例如，甚至可能）。buttonsectionarticle

\n