預設表格
要設定 HTML 表格的樣式，請加上 pure-table 類別名稱。此類別會為表格元素增加內距和邊框，並強調標題。
| # | 品牌 | 型號 | 年份 |
|---|---|---|---|
| 1 | 本田 | Accord | 2009 |
| 2 | 豐田 | Camry | 2012 |
| 3 | 現代 | Elantra | 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>有邊框的表格
要為所有儲存格加入水平和垂直邊框，請將 pure-table-bordered 類別名稱加入到 <table> 元素。
| # | 品牌 | 型號 | 年份 |
|---|---|---|---|
| 1 | 本田 | Accord | 2009 |
| 2 | 豐田 | Camry | 2012 |
| 3 | 現代 | Elantra | 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>有水平邊框的表格
如果您只想要水平線，請將 pure-table-horizontal 類別名稱加入到 <table> 元素。
| # | 品牌 | 型號 | 年份 |
|---|---|---|---|
| 1 | 本田 | Accord | 2009 |
| 2 | 豐田 | Camry | 2012 |
| 3 | 現代 | Elantra | 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>為間隔填色的表格
若能輕易分辨出列，則較大的表格視覺上較容易解析。將 pure-table-odd 類別名稱加入到每一個 <tr> 元素之後，可以變更列的背景，並產生斑馬紋風格的效果。
注意：在支援 CSS3 nth-child 偽選取器 的瀏覽器中，可以使用較簡單的方法。可以將 pure-table-striped 類別名稱加入到 <table> 元素中，斑馬紋風格的間隔填色就會自動產生。
| # | 品牌 | 型號 | 年份 |
|---|---|---|---|
| 1 | 本田 | Accord | 2009 |
| 2 | 豐田 | Camry | 2012 |
| 3 | 現代 | Elantra | 2010 |
| 4 | 福特 | Focus | 2008 |
| 5 | 日產 | Sentra | 2011 |
| 6 | BMW | 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>