Table
Borderless Table
Tables are borderless by default.
Name | Item Name | Item Price |
---|---|---|
Alvin | Eclair | $0.87 |
Alan | Jellybean | $3.76 |
Jonathan | Lollipop | $7.00 |
Shannon | KitKat | $9.99 |
<table>
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">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 |
---|---|---|
Alvin | Eclair | $0.87 |
Alan | Jellybean | $3.76 |
Jonathan | Lollipop | $7.00 |
Shannon | KitKat | $9.99 |
For more detailed informations please visit: http://materializecss.com/table.html