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>