# Caption Inputs.table

Is there a simple, robust way to add a caption (above or below, centred or left/right-justified) to an Inputs.table? Currently I just use an adjacent markdown cell but it’s not pretty. I had a look for examples but came up short.

Not officially, and making a top caption work isn’t trivial due to the way the table is layouted. If you don’t mind a bottom caption that wobbles a bit on scroll, you can do:

``````{
const form = Inputs.table(penguins);
form.querySelector("table").prepend(htl.html`<caption style="caption-side:bottom;position:sticky;bottom:0;background:white;border-top:solid 1px #ccc">Yep, this is a table`);
return form;
}
``````

Alternatively you can use a `<figure>`:

``````htl.html`<figure style="max-width:100%">
\${Inputs.table(penguins)}
<figcaption>Yep, that's a table.</figcaption>
</figure>
`
``````

If you also want to retain access to the table’s `value`, do:

``````viewof foo = Object.defineProperty(htl.html`<figure style="max-width:100%">
\${Inputs.table(penguins)}
<figcaption>Yep, that's a table.</figcaption>
</figure>
`, "value", {
get() { return this.querySelector("form").value },
set(value) { this.querySelector("form").value = value }
})
``````
4 Likes

Thank you so much! I used a couple of your methods to achieve what I wanted.