AccordionTable
A table element embedded in an accordion item organizes and displays information in rows and columns.
When embedded, the table loses the div.header block.
Variations
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| * Lorem ipsum dolor sit amet. | ||
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.
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.
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
| * Lorem ipsum dolor sit amet. | ||
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.
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.
Details
Usage
The table element is used inside an accordion whenever its content is not required to be featured on the page at the first glance.
Guidelines
- Should be inserted in the
content-boxcontainer of the accordion - When embedded, the table loses the
div.headerblock- Normal headings can be used
HTML structure
Overall HTML view of a table element inside an accordion:
div.accordion
div.headerdiv.content-box
div.table
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)tfoot (optional)
tr (one or more)
td (one or more)Presets
Accordion with table presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Without thead | Use this preset whenever the accordion header is enough to document the table header. |
Variations
Accordion with table variations:
| Variation | Description |
|---|---|
| Default | This snippet is composed of an accordion with a table inside its first item. The table is made of thead and tbody. |
| Without thead | This snippet is composed of an accordion with a table inside its first item. The table is only made of tbody. |