Overview
Tables display sets of data across rows and columns.
Types
1) Default Table
| Header Field A | Header Field B |
|---|---|
| Data 1A | Data 1B |
| Data 2A | Data 2B |
| Data 3A | Data 3B |
You only need to attach a single table CSS class within the table tag.
<table class="table">
<thead>
<tr>
<th>Header Field A</th>
<th>Header Field B</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1A</td>
<td>Data 1B</td>
</tr>
<tr>
<td>Data 2A</td>
<td>Data 2B</td>
</tr>
<tr>
<td>Data 3A</td>
<td>Data 3B</td>
</tr>
</tbody>
</table>2) Horizontal Table
You can use this table without the emphasis of a table header. Just add the .table-h class
| Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. |
|---|---|---|---|
| Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. |
| Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. |
<!--Add class name table-h for horizontal tables-->
<table class="table table-h">
<tbody>
<tr>
<th>Lorem ipsum dolor.</td>
<th>Lorem ipsum dolor.</td>
<th>Lorem ipsum dolor.</td>
<th>Lorem ipsum dolor.</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
</tr>
</tbody>
</table>3) Vertical Header Table
You can use this table with left header header. Just add the .table-v class.
| Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. |
| Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. |
| Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. | Lorem ipsum dolor. |
<!--Add class name table-v for horizontal tables-->
<table class="table table-v">
<tr>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
</tr>
<tr>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
<td>Lorem ipsum dolor.</td>
</tr>
</table>Style
| Modifier | Description |
|---|---|
| is-bordered | Use when you want to add borders to all the cells |
| is-striped | Use when you want to add stripes to all the cells |
| is-narrow | Use when you want to make the cells narrower |
| is-hoverable | Use when you want to add hover effect on each row |
| is-fullwidth | Use when you want to have a fullwidth table |
When to use
Tables should be used for:
- Displaying tabular information such as statistics.
- Making comparisons between information.
Tables should not be used for:
- Displaying non-tabular data (Using lists would be more appropriate).
- Laying out a page.
- Large sections within a page.
Can't find a component?
Let us know what you need and we’ll be happy to look into it