Menu

TableFootnotes

A footnotes element embedded in an table is a list of notes usually linked to the table content.

Minimum requirements
  • 1 table
  • 1 footnotes item (li/p)
Advanced settings

Presets

?
PresetDescription
DefaultDefault preset.

Variations

?
Lorem ipsum dolor sit amet
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML
Copy to clipboard
<div class="table">
<div class="header">
<div class="title">Lorem ipsum dolor sit amet</div>
</div>
<div class="wrapper">
<table>
<thead>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
</table>
</div>
<div class="footnotes">
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>
</div>
</div>

Details

Usage

The footnotes element embedded inside a table is used to link a list of notes with the table content.

Guidelines

  1. Should be embedded directly in the div.table container, right after the div.wrapper container
  2. A tfoot tag should not be combined with footnotes

HTML structure

Overall HTML view of a footnotes element inside a table:

HTML file (.html)
(other component(s))
div.table
div.header (optional)
div.title
div.wrapper
table
thead (optional)
tr (one or more)
th (one or more)
td (one or more)
tbody
tr (one or more)
th (one or more)
td (one or more)
div.footnotes
ol
li (one or more)
(other component(s))

Presets

Table with footnotes presets:

PresetDescription
DefaultDefault preset.

Variations

Table with footnotes variations:

VariationDescription
DefaultThis snippet is composed of a table with a footnotes element inside.

Our website uses cookies

We are always working to improve this website for our users. To do this, we use the anonymous data provided by cookies.
Learn more about how we use cookies