表格是组织大量数据的不错方式。我们提供了一些实用程序类，帮助你尽可能是容易地设置表格样式。此外，为了改善移动设备体验，在移动设备屏幕宽度上所有表格都会自动居中。
| 名称 | 项目名称 | 项目价格 |
|---|---|---|
| 艾尔文 | 闪电泡芙 | $0.87 |
| 艾伦 | 果冻豆 | $3.76 |
| 乔纳森 | 棒棒糖 | $7.00 |
| 香农 | 奇巧 | $9.99 |
<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>
条纹表格
为表格标签添加 class="striped" 以获得条纹表格
| 名称 | 项目名称 | 项目价格 |
|---|---|---|
| 艾尔文 | 闪电泡芙 | $0.87 |
| 艾伦 | 果冻豆 | $3.76 |
| 乔纳森 | 棒棒糖 | $7.00 |
| 香农 | 奇巧 | $9.99 |
突出显示表格
为表格标签添加 class="highlight" 以获得突出显示表格。
| 名称 | 项目名称 | 项目价格 |
|---|---|---|
| 艾尔文 | 闪电泡芙 | $0.87 |
| 艾伦 | 果冻豆 | $3.76 |
| 乔纳森 | 棒棒糖 | $7.00 |
| 香农 | 奇巧 | $9.99 |
居中表格
为表格标签添加 class="centered" 以将表格中的所有文本居中对齐
| 名称 | 项目名称 | 项目价格 |
|---|---|---|
| 艾尔文 | 闪电泡芙 | $0.87 |
| 艾伦 | 果冻豆 | $3.76 |
| 乔纳森 | 棒棒糖 | $7.00 |
| 香农 | 奇巧 | $9.99 |
响应式表格
为表格标签添加 class="responsive-table" 以使表格在较小的屏幕宽度上水平滚动。
| 名称 | 项目名称 | 项目价格 |
|---|---|---|
| 艾尔文 | 闪电泡芙 | $0.87 |
| 艾伦 | 果冻豆 | $3.76 |
| 乔纳森 | 棒棒糖 | $7.00 |
| 香农 | 奇巧 | $9.99 |