html - 在 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 规范，标题元素可以包含任何流内容，其中包括按钮。

来自规范:

Content Model: Flow content, but with no descendant table elements

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

The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.

根据该描述，按钮似乎不属于标题内，因为它对表格标题没有任何意义，即使在技术上是允许的。

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

我发现了很多与表格语义有关的问题/答案，但大多数与表格上的按钮无关。

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

HTML5 规范:

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

编辑: This question/answer似乎与我的问题性质相同，但他问的是将他的按钮放在 <th> 中，而不是表格标题。

我考虑过的一个解决方案是:根本不使用标题。只需放一个 <h1>或类似的标题标记在 表格标记之前。唯一的问题是标题将不再与表格相关......或者会吗？事实上，这可能就是答案。如果我包装 <h1>和 <table>在<section>或者可能是 <div>那可能行得通吗？

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

Answer 1

HTML5 定义(在 4.9.2 The caption element 和 4.9.12 Processing model 中)caption 元素

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

根据我对标题(或标题 或标题)。

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

如果某些东西的有效性不仅基于句法要求(如“内容模型”和“可以使用该元素的上下文”)，而且还基于 semantic requirements .你不能以一种不可能出现语义错误的方式来表示内容模型。虽然这个特定的按钮可能不适合 caption，但在其他情况下 button 可能是合适的。

If it is not "correct", is it acceptable?

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

如果 caption 中有 button 让你的实现更容易，我不会太担心这个并保持它那样，除非你的测试(或反馈你得到)表明它可能有问题。

备选

我根本不会在 table 中包含“添加产品”按钮，而是在 table 元素之前或之后。

<form>
  <button>…</button>
</form>

<table>
  <caption>…</caption>
</table>

如果在分段内容元素(例如，section，甚至可能 article) 是合适的。