Table
Component
Table is a simpliest way to present data and has been used since the early HTML. It is mainly for organizing row-column data matrix-based presentation. Bissetii also supports table rendering especially for mobile friendliness first.
This component is available starting from v1.11.0
.
Sass Styling Parts
The Sass styling script responsible for styling table is located at:
assets/css/bissetii/modules/core/_Table.scss
Javascript Parts
This component does not depend on Javscript.
HTML Parts
Bissetii uses the conventional HTML table syntax instead of the custom types HTML. To facilitate mobile-friendliness, the table overflow at y-directions with scrolling enabled.
Bissetii is very strict with <thead>
and <tbody>
conventions for styling
the appropriate titles.
One example would be:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Data 1,1</p></td>
<td><p>Data 1,2</p></td>
<td><p>Data 1,3</p></td>
<td><p>Data 1,4</p></td>
</tr>
<tr>
<td><p>Data 2,1</p></td>
<td><p>Data 2,2</p></td>
<td><p>Data 2,3</p></td>
<td><p>Data 2,4</p></td>
</tr>
<tr>
<td><p>Data 3,1</p></td>
<td><p>Data 3,2</p></td>
<td><p>Data 3,3</p></td>
<td><p>Data 3,4</p></td>
</tr>
<tr>
<td><p>Data 4,1</p></td>
<td><p>Data 4,2</p></td>
<td><p>Data 4,3</p></td>
<td><p>Data 4,4</p></td>
</tr>
</tbody>
</table>
This will render as:
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
Data 1,1 | Data 1,2 | Data 1,3 | Data 1,4 |
Data 2,1 | Data 2,2 | Data 2,3 | Data 2,4 |
Data 3,1 | Data 3,2 | Data 3,3 | Data 3,4 |
Data 4,1 | Data 4,2 | Data 4,3 | Data 4,4 |