9

I have a matrix of product data.

My goal is to:

  • display the matrix using HTML5 in a tabular format
  • display a left-aligned "title" above the data that describes it
  • display a right-aligned "add" button, vertically aligned with the title, which facilitates the addition of rows to the table
  • display a header row to describe each column of data
  • do all of the above in a semantically "correct" way, if possible

So, the end result would look similar to this:

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

My current code:

<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>

According to the HTML5 spec, the caption element can contain any flow content, which includes buttons.

From the spec:

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

However, the same spec defines the caption element as:

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

Based on that description, it seems that a button does not belong inside of a caption, because it lends nothing to the title of the table, even though it is technically allowed.

My questions are: Is it semantically "correct" to include a button inside of a table caption? If it is not "correct", is it acceptable? Is there a more-semantically-correct way of achieving the desired result?

I found plenty of questions/answers dealing with table semantics, but most did not deal with buttons on the table.

This question/answer asks about buttons in a table, but it is specific to buttons inside of a "cell", not the caption.

HTML5 Specs:

EDIT: This question/answer seems to be of the same nature as my question, but he is asking about putting his button(s) inside of a <th>, not the table caption.

One solution I've considered is: don't use a caption at all. Just put a <h1> or similar header tag before the table tag. The only problem with this is that the title will no longer be relative to the table.... or will it? Actually, that might be the answer. If I wrap the <h1> and the <table> in a <section> or perhaps a <div> then that might work?

I'm looking for the "most-correct" way.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Evan de la Cruz
  • 1,966
  • 1
  • 13
  • 17
  • Note that http://www.w3.org/TR/html-markup/ is *not* the [HTML5 spec](http://www.w3.org/TR/2014/REC-html5-20141028/). It never was more than a non-normative reference, and it has been discontinued. – unor Dec 29 '14 at 15:08
  • Question edited to include the correct links to the HTML5 spec and to correct quoted excerpts from, and innacurate/incomplete references to, it. – Evan de la Cruz Jan 28 '16 at 13:41

3 Answers3

1

HTML5 defines (in 4.9.2 The caption element and in 4.9.12 Processing model) that the caption element

  • "represents the title of the table", and
  • "can introduce context for a table, making it significantly easier to understand", and
  • "gives the table a heading, or legend".

I would assume that an "Add Product" button should not be part of a table’s title, based on my understanding of a title (or heading or caption).

If my assumption is true, it would be an error to use this button in caption. The fact that the content model allows this does not mean that it’s necessarily valid.

If something’s valid is not only based on syntactic requirements (like "Content model" and "Contexts in which this element can be used"), but also on semantic requirements. You can’t denote the content model in a way that would make semantic errors impossible. And while this specific button might be inappropriate for the caption, there might be other cases where a button could be appropriate.

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

That depends on what’s "acceptable" to you. For example, users of common Web browsers in default configurations will most likely not be affected by this error in any way. But it’s conceivable (but maybe not likely) that users with "uncommon" setups (e.g., with specific accessibility tools) might be affected by this somehow.

If having the button in the caption makes your implementation easier, I wouldn’t worry too much about this and keep it like that, unless your tests (or feedback you get) indicate that it could be problematic.

Alternative

I wouldn’t include the "Add Product" button in the table at all, but either before or after the table element. 

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

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

It depends on the context if including the table and the button in a sectioning content element (e.g., section, or maybe even article) is appropriate.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • "If something’s valid is not only based on syntactic requirements but also on semantic requirements..." - That was kind of the purpose of this question, to determine the semantic requirements. Your reasoning as to why it is not semantically correct makes perfect sense and is basically a restatement of what I mentioned as my reasoning for not doing it this way. The link you included was useful because it led me to: https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#semantics-0 which actually gave me a helpful tidbit, which is that "HTML conveys meaning"... – Evan de la Cruz Feb 03 '16 at 11:25
  • And so based on that I consider what the meaning we are trying to convey is to the client is? 1, it is a "button", and 2, it is _related_ to the table (in that it causes rows to be inserted into it). It is meaning #2 that I am struggling with being able to convey. Perhaps it just isn't practically relevant to convey that meaning although I can conjure up some devices that might want to have this information when rendering HTML. – Evan de la Cruz Feb 03 '16 at 11:32
  • The last sentence in your answer might be the key, as I think it deals with my previously mentioned "meaning #2". Am I correct in that interpretation? "It depends on the context if including the table and the button in a sectioning content element (e.g., section, or maybe even article) is appropriate" ...so then by wrapping the table and button in a sectioning element the desired meaning is conveyed (that the button is related to the table)? – Evan de la Cruz Feb 03 '16 at 11:33
  • @EvandelaCruz: Wrapping the button and the table in a `section` is [semantically equivalent](http://stackoverflow.com/a/19203936/1591669) to placing these two under the scope of a heading (when using `section` you can and should use a heading, too, but you don’t have to). -- And that’s the only general way to convey that things are related: if they are in scope of the same heading (resp. placed in the same sectioning content element), they belong together (in some way). – unor Feb 03 '16 at 16:49
  • @EvandelaCruz: It’s essentially the same case with a text that consists of several paragraphs: HTML5 offers no way to relate these `p` elements other than that they appear in that order in the source, and that they (ideally) are in scope of the same heading and/or are children of the same sectioning content element. -- If you want to be very explicit, you could think of using a section for the table and a section for the form, and place both of these sections in the same parent, e.g.: `

    P.

    P. Catalog

    Add P.

    `.     – unor Feb 03 '16 at 16:56
  • This is the correct answer I believe. However, I think the real key parts to the answer are the least emphatic. To me, the last sentence is really the key and it kind of gets buried. Would you mind editing the answer to really highlight that the answer is (summarized): "no it is not correct. Buttons are not part of the caption. Put the button in a sectioning element that also contains the table"... Your current answer gives the impression that there is a lot of grey area. I don't think there really is, based on what you've taught me here. – Evan de la Cruz Feb 09 '16 at 10:58
1

This question is actually one of accessibility in which case it isn't semantically correct or acceptable. Captions are used for screen readers to give information around a table and using it to add a button would make this table inaccessible. Tables are already difficult to make accessible but adding buttons exacerbates the problem. If you can't avoid buttons:

  1. Ensure the button is labelled. It should say what it does or where it goes. If that is not visually possible, it needs an aria-label with that information.
  2. The button cannot simply be a part of another column. Even if visually it looks to be a part of another cell, programmatically it needs to be in it's own.
  3. That column needs to have a column header. This can be accomplished with screen reader only text if it doesn't make visual sense.

In the original example, the title and button would not actually be a part of the table, even if visually you styled them that way. Instead "Product Catalog" would be a heading with an appropriate heading level and the button would just be visually to the right and immediately follow the heading in the HTML.

Emily Kay
  • 31
  • 1
0

I know this is a bit dated but putting a button that acts on the table is semantically legitimate in the thead (or tfoot) of the table element. I agree that caption is not the correct place but saying it should not be in the table anywhere is also not correct.

Bill Dagg
  • 101
  • 2