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