Menu
HomeComponents

SectionTable

A table element embedded in a section organizes and displays information in rows and columns.

Minimum requirements
  • 1 section
  • 1 table (div.table) - made of:
    • 2 rows (tr)
    • 3 columns (th and/or td)

When embedded, the table loses the div.header block.

Advanced settings

Presets

?
PresetDescription
DefaultDefault template.

Variations

?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta.

Lorem ipsum dolor sit amet
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum 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. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta.

Lorem ipsum dolor sit amet
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum 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. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta.


HTML
Copy to clipboard
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta.</p>
<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>
<th>Lorem ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<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>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">* Lorem ipsum dolor sit amet.</td>
</tr>
</tfoot>
</table>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta.</p>
</div>

Details

Usage

The table element is used inside a section whenever its content is not significant and long enough to be displayed as a full-width component.

Guidelines

  1. Should be embedded in a section component whenever the table data is not enough to display in full-width

HTML structure

Overall HTML view of a table element inside a section:

HTML file (.html)
...
div.section
div.table
...

Presets

Section with table presets:

PresetDescription
DefaultDefault template.

Variations

Section with table variations:

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