Table Basic
Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically.
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
Bordered Table
Add class="bordered" to the table tag for a
bordered table
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
| Shannon | KitKat | $9.99 |
Striped Table
Add class="striped" to the table tag for a striped
table
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
| Shannon | KitKat | $9.99 |
Highlight Table
Add class="Highlight" to the table tag for a highlight
table
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
| Shannon | KitKat | $9.99 |
Centered Table
Add class="centered" to the table tag to center align
all the
text in the table
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
| Shannon | KitKat | $9.99 |
Responsive Table
Add class="responsive-table" to the table tag to make
the table
horizontally scrollable on smaller screen widths.
| Name | Item Name | Item Price | Total | Status |
|---|---|---|---|---|
| Alvin | Eclair | $0.87 | $1.87 | Yes |
| Alan | Jellybean | $3.76 | $10.87 | No |
| Jonathan | Lollipop | $7.00 | $12.87 | Yes |
| Shannon | KitKat | $9.99 | $14.87 | No |