默认表格
为 HTML 表格添加样式，增加 pure-table 类名。此类将为表格元素添加填充和边框，并强调页眉。
| # | 制作 | 型号 | 年份 |
|---|---|---|---|
| 1 | 本田 | 雅阁 | 2009 |
| 2 | 丰田 | 凯美瑞 | 2012 |
| 3 | 现代 | 伊兰特 | 2010 |
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>带边框表格
为所有单元格添加水平和垂直边框，在 <table> 元素中添加 pure-table-bordered 类名。
| # | 制作 | 型号 | 年份 |
|---|---|---|---|
| 1 | 本田 | 雅阁 | 2009 |
| 2 | 丰田 | 凯美瑞 | 2012 |
| 3 | 现代 | 伊兰特 | 2010 |
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>带有水平边框的表格
如果您只喜欢水平线，请在 <table> 元素中添加 pure-table-horizontal 类名。
| # | 制作 | 型号 | 年份 |
|---|---|---|---|
| 1 | 本田 | 雅阁 | 2009 |
| 2 | 丰田 | 凯美瑞 | 2012 |
| 3 | 现代 | 伊兰特 | 2010 |
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>带条纹的表格
对于大表格而言，如果行很容易区分，则在视觉上更易于解析。向每一个其他 <tr> 元素添加 pure-table-odd 类名会改变行的背景色并创建出斑马条纹效果。
注意：在支持 CSS3 nth-child 伪选择器 的浏览器中，可以使用一种更简单的方法。可以在 <table> 元素中添加 pure-table-striped 类名，并自动创建斑马条纹样式。
| # | 制作 | 型号 | 年份 |
|---|---|---|---|
| 1 | 本田 | 雅阁 | 2009 |
| 2 | 丰田 | 凯美瑞 | 2012 |
| 3 | 现代 | 伊兰特 | 2010 |
| 4 | 福特 | 福克斯 | 2008 |
| 5 | 日产 | 轩逸 | 2011 |
| 6 | 宝马 | M3 | 2009 |
| 7 | 本田 | 思域 | 2010 |
| 8 | 起亚 | Soul | 2010 |
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr class="pure-table-odd">
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>
<tr class="pure-table-odd">
<td>5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>
<tr>
<td>6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>
<tr class="pure-table-odd">
<td>7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>
<tr>
<td>8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>