Table Element with a Caption An example of a Table Element with a table caption.
Important Notes: Twig: Use the caption prop to add a <caption>.HTML: Add a <caption> into the <table> to render a table caption.
Demo
This is the table caption.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell.
Twig
{% set row1 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row2 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row3 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  body: {
    content: [
      row1,
      row2,
      row3,
    ],
  },
  caption: {
    content: 'This is the table caption.',
  },
} only %}
HTML
<table class="e-bolt-table">
  <caption>This is the table caption.</caption>
  <tbody>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
</table>