<caption> In Tables

[Karellen]

Hello all,

I am a bit stumped with the <caption> tag used in a table.

My epub is v3.0
I am adding the <caption> tag as follows:

Spoiler:

PHP Code:

  <table>
  <caption>LSAT-560467-S</caption>
  <caption>DATA TRANSCRIPT 463/511-001</caption>
  <caption>SUBJECT SITE: 231.957 (North-eastern seaboard: CT, NY, NJ)</caption>
    <thead>
      <tr>
        <th><p class="noindent">NO.</p></th>
        <th><p class="noindent">TIME/EST</p></th>
        <th><p class="noindent">LOC</p></th>
        <th><p class="noindent">READING</p></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><p class="noindent">1.</p></td>
        <td><p class="noindent">18:03:48</p></td>
        <td><p class="noindent">CT.</p></td>
        <td><p class="noindent">Isolated energy surge/Source: UNKNOWN<br/>Type: UNKNOWN / Dur: 0.00:09</p></td>
      </tr>
      <tr>
        <td><p class="noindent">2.</p></td>
        <td><p class="noindent">18:03:58</p></td>
        <td><p class="noindent">N.Y.</p></td>
        <td><p class="noindent">Isolated energy surge/Source: UNKNOWN<br/>Type: UNKNOWN / Dur: 0.00:06</p></td>
      </tr>
    </tbody>
  </table> 


But when I run EPUBCheck v0.2.4 by Doitsu, I get the following error....

PHP Code:

p03c24.xhtml Line: 78 Col: 12 ERROR(RSC-005): Error while parsing file: element "caption" not allowed here; expected the element end-tag or element "colgroup", "script", "tbody", "template", "tfoot", "thead" or "tr" 


I have been to six different sites, all showing the <caption> tag immediately below the <table> tag, so I don't understand why EPUBCheck throws an error.
https://developer.mozilla.org/en-US/...lement/caption

Can anybody see what the problem is?

Thank you

[Karellen]

Oh, if I had only waited a couple more minutes before posting...

I figured it out. Only a single <caption> tag is allowed. Need to use <br/> for extra lines

[enuddleyarbl]

It's interesting that neither the w3, mozilla, nor the spec, itself, specifically mentions that there can be only one:

https://www.w3schools.com/tags/tag_caption.asp
https://developer.mozilla.org/en-US/...lement/caption
https://html.spec.whatwg.org/multipa...aption-element

Reading the text closely enough implies it, but it would have been nice if they'd have mentioned it. Good catch.

Of course, it looks like you can put all kinds of formatting in the <caption></caption> pair.

[Turtle91]

But anyone with a single lick of culture knows: "There can be only one."

[jhowell]

Originally Posted by enuddleyarbl

It's interesting that neither the w3, mozilla, nor the spec, itself, specifically mentions that there can be only one:

https://www.w3schools.com/tags/tag_caption.asp
https://developer.mozilla.org/en-US/...lement/caption
https://html.spec.whatwg.org/multipa...aption-element

Reading the text closely enough implies it, but it would have been nice if they'd have mentioned it. Good catch.

Of course, it looks like you can put all kinds of formatting in the <caption></caption> pair.

They do not say "only one is allowed per table" but it is an obvious consequence of the statements of where a caption is allowed:

The <caption> tag must be inserted immediately after the <table> tag.

Permitted parents: A <table> element, as its first descendant.

Contexts in which this element can be used: As the first element child of a table element.

[Quoth]

Things either have a caption or not. It's logical if you want newlines in a caption that you use <br/>, but then I've been using HTML since 1990s and programming many years earlier.

I'd guess the people writing the spec never imagined anyone adding more than one caption to one object. Specs are usually written by experts and reviewed by experts and rarely involve new or less expert users.

It used to hurt my head reading Telecom specs and "Rainbow book" specs (different aspects used different colours).

[Tex2002ans]

Originally Posted by Karellen

I am a bit stumped with the <caption> tag used in a table.

If you insist on using <caption>, you could use <p>s (or any other markup) inside like:

<table>
  <caption>
	<p class="tabletitle">LSAT-560467-S</p>
	<p class="tabletitle">DATA TRANSCRIPT 463/511-001</p>
	<p class="tabletitle">SUBJECT SITE: 231.957 (North-eastern seaboard: CT, NY, NJ)</p>
  </caption>
  
  [... Rest of table here...]
</table>

Or you could kludge it with <br/>:

<table>
  <caption>LSAT-560467-S<br/>DATA TRANSCRIPT 463/511-001<br/>SUBJECT SITE: 231.957 (North-eastern seaboard: CT, NY, NJ)</caption>
  
  [... Rest of table here...]
</table>

If you want more info on <caption>, read:

• WebAIM: "Creating Accessible Tables" > Data Tables
• W3C WAI: "Caption & Summary"
  
  • This even describes HTML5's <figcaption>
• WCAG 2.0: "H39: Using caption elements to associate data table captions with data tables"

- - -

Side Note: But I've had trouble with <caption> across devices in the past, especially trying to move to top/bottom using CSS's caption-side. See my posts in:

• 2021: "Formatting tables best practices"

Personally, I still use an external <div> and/or <p>:

<p class="tabletitle"></p>

<table></table>

<div class="caption">
     <p class="caption"></p>
</div>

(If more is needed, you could wrap the entire title+table+caption in an extra <div> similar to a <figure>.)

This:

• allows me to place it exactly where it's needed
• + it won't break across devices.

Yes, it doesn't get some of those Accessibility goodies with full HTML markup, but it works across everything...

- - -

Originally Posted by Quoth

It's logical if you want newlines in a caption that you use <br/>, [...]

You don't have to use <br/>.

You can use all the fancy markup you want inside of a <caption>... <p>, <span>, <i>/<em>, whatever.

It's the same as a <td> or <th>. You can use those tags bare, or you could stick extra markup inside those cells...

Originally Posted by Quoth

Things either have a caption or not. [...] I'd guess the people writing the spec never imagined anyone adding more than one caption to one object. [...]

<caption> is a confusing/poor name for it now.

In HTML5, it seems like <caption> is intended to be used only as a "Title" of the table.

Then HTML5 promotes using <figure> + <figcaption> for an actual caption (or other info).

For example:

<figure>
  <table>
	<caption>LSAT-560467-S</caption>
	
	[... Rest of table here...]
  </table>
  
  <figcaption>
	<p class="caption">* An actual caption with extra info goes here.</p>
  </figcaption>
</figure>

- - -

Side Note #1: Similar to me avoiding <caption>, I wouldn't be using much <figcaption> either...

See my post in:

• 2020: "Remove empty space at the bottom of page before figure."

Older devices wouldn't be able to render the markup well, so you might get odd bugs.

Side Note #2: What's with HTML's "poorly named" <caption>? Probably just ancient/legacy pre-HTML5 table stuff.

I don't feel like digging through the ol' HTML specs, but I'm betting there was a ton of non-standard crap going on in there, and people were using it in all sorts of horrible ways.

Side Note #3: Why is only 1 <caption> per table important? Because it generates a unique name for the <table> in ARIA + the Accessibility Tree.

Originally Posted by jhowell

They do not say "only one is allowed per table" but it is an obvious consequence of the statements of where a caption is allowed:

Yep. Good catch.

Similar to <summary>, which is only allowed as a first child in <details>.

[Karellen]

Originally Posted by Tex2002ans

If you insist on using <caption>, you could use <p>s (or any other markup) inside like:

<table>
  <caption>
	<p class="tabletitle">LSAT-560467-S</p>
	<p class="tabletitle">DATA TRANSCRIPT 463/511-001</p>
	<p class="tabletitle">SUBJECT SITE: 231.957 (North-eastern seaboard: CT, NY, NJ)</p>
  </caption>
  
  [... Rest of table here...]
</table>

---

You don't have to use <br/>.

You can use all the fancy markup you want inside of a <caption>... <p>, <span>, <i>/<em>, whatever.

It's the same as a <td> or <th>. You can use those tags bare, or you could stick extra markup inside those cells...

Oh, that is great info. So the <caption> is more like a div or section tag, rather than a paragraph tag.
I'll add that little trick to my cheat sheet of code.

I'll have a read through your links. Thanks for the informative post

[Tex2002ans]

Originally Posted by Karellen

Thanks for the informative post

No problem.

Originally Posted by Karellen

Oh, that is great info. So the <caption> is more like a div or section tag, rather than a paragraph tag.
I'll add that little trick to my cheat sheet of code.

Meh. I'd still avoid <caption> + <figure> + <figcaption> in ebooks. If you were working on a website, yeah, but in an EPUB... nah.

There are plenty of other "table Accessibility" things you can do that would bring much more benefit, like tagging/marking your columns/rows correctly!

I think that'll be much more important than tying a title/caption to the <table> instead of just having them floating nearby.

[Karellen]

Originally Posted by Tex2002ans

Meh. I'd still avoid <caption> + <figure> + <figcaption> in ebooks. If you were working on a website, yeah, but in an EPUB... nah.

Its for my own personal use. I am not creating ebooks for distribution.
I used the caption on a Libra2, and that seemed to work quite well. No problems that I can see and all displayed and formatted correctly.
But I can understand that there may be other ereaders where it won't work.

Originally Posted by Tex2002ans

...like tagging/marking your columns/rows correctly!

I thought I did. Did you spot something wrong in my code snippet in my first post? I am happy to be educated if there is an error there (apart from the caption)

[Tex2002ans]

Originally Posted by Karellen

I thought I did. Did you spot something wrong in my code snippet in my first post?

Well, read through the other <table> formatting best practices / Accessibility threads. I went into all the details there.

For tables, I think the most important things are:

• Never use images-of-tables. Always try to use actual HTML.
• Use proper markup!
  
  • <th> for headings. <td> for cells.
    
  • (Optional) If you want to be extra fancy, you can separate out the top headings into a <thead> + everything else into <tbody>.
    

This means Text-to-Speech can read the cells correctly + the tables will follow all user preferences (font size, color, background, ...).

Then, you can do some visual upgrades:

• Align your cells!
  
  • Text = left-aligned.
    
  • Numbers = right-aligned.
    
  • This means visually pleasing + everything lines up as it should (decimals on decimals, etc.).
    
• Remove those lines + add some whitespace!
  
  • Simple whitespace in a table can do wonders for readability.

That's the important points for any and all formats.

And that would get you like 98%+ of the way there.

Then, and only then, would I begin worrying about further HTML(5) markup like <figcaption>, etc.

- - -

Side Note: Also, I'm not sure if you were aware...

MobileRead has a [CODE] tag. You accidentally shoved your code inside of a [PHP] tag.

- - -

Originally Posted by Karellen

Its for my own personal use. I am not creating ebooks for distribution.

Ahh, okay. Then you can get away with a little more stuff.

If you are putting it up for sale in an actual store (Amazon, B&N, etc.), you have to be a lot more careful.

Originally Posted by Karellen

I am happy to be educated if there is an error there (apart from the caption)

It's fine. It's a very simple table + you already used <th> for your headings, so that should be good enough.

One tweak I would do though is... I tend keep my <th> + <td> bare, making it WAY easier to read.

(Plus, you don't need to do all that <p class="noindent"> shenanigans.)

Before:

<th><p class="noindent">NO.</p></th>
<th><p class="noindent">TIME/EST</p></th>
<th><p class="noindent">LOC</p></th>
<th><p class="noindent">READING</p></th>

After:

<th>NO.</th>
<th>TIME/EST</th>
<th>LOC</th>
<th>READING</th>

WAY easier to read the code + spot issues.

[Karellen]

Originally Posted by Tex2002ans

Side Note: Also, I'm not sure if you were aware...

MobileRead has a [CODE] tag. You accidentally shoved your code inside of a [PHP] tag.

Nope, not accidentally but intentionally. I like the coloured text as it makes it easier to read

Originally Posted by Tex2002ans

It's fine. It's a very simple table + you already used <th> for your headings, so that should be good enough.

One tweak I would do though is... I tend keep my <th> + <td> bare, making it WAY easier to read.

(Plus, you don't need to do all that <p class="noindent"> shenanigans.)

Before:

<th><p class="noindent">NO.</p></th>
<th><p class="noindent">TIME/EST</p></th>
<th><p class="noindent">LOC</p></th>
<th><p class="noindent">READING</p></th>

After:

<th>NO.</th>
<th>TIME/EST</th>
<th>LOC</th>
<th>READING</th>

WAY easier to read the code + spot issues.

Ok, so use the bare tags and style it in the css if necessary. Makes sense. I'll do that.
Thanks!!

[Quoth]

Originally Posted by Tex2002ans

Side Note: But I've had trouble with <caption> across devices in the past, especially trying to move to top/bottom using CSS's caption-side. See my posts in:

• 2021: "Formatting tables best practices"

Personally, I still use an external <div> and/or <p>:

<p class="tabletitle"></p>

<table></table>

<div class="caption">
     <p class="caption"></p>
</div>

(If more is needed, you could wrap the entire title+table+caption in an extra <div> similar to a <figure>.)

This:

• allows me to place it exactly where it's needed
• + it won't break across devices.

Yes, it doesn't get some of those Accessibility goodies with full HTML markup, but it works across everything...

- - -



You don't have to use <br/>.

You can use all the fancy markup you want inside of a <caption>... <p>, <span>, <i>/<em>, whatever.

It's the same as a <td> or <th>. You can use those tags bare, or you could stick extra markup inside those cells...



<caption> is a confusing/poor name for it now.

In HTML5, it seems like <caption> is intended to be used only as a "Title" of the table.

Then HTML5 promotes using <figure> + <figcaption> for an actual caption (or other info).

For example:

<figure>
  <table>
	<caption>LSAT-560467-S</caption>
	
	[... Rest of table here...]
  </table>
  
  <figcaption>
	<p class="caption">* An actual caption with extra info goes here.</p>
  </figcaption>
</figure>

- - -

Side Note #1: Similar to me avoiding <caption>, I wouldn't be using much <figcaption> either...

See my post in:

• 2020: "Remove empty space at the bottom of page before figure."

Older devices wouldn't be able to render the markup well, so you might get odd bugs.

Well, I don't use <br/> in a caption because I'd never use caption or figcaption either. I'd use div and p, if indeed I had to use a table at all. Fortunately I'm not involved with other than novels which would very rarely need a table.