Default Table
| # |
Make |
Model |
Year |
| 1 |
Honda |
Accord |
2009 |
| 2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
code:
<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>
Bordered Table
| # |
Make |
Model |
Year |
| 1 |
Honda |
Accord |
2009 |
| 2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
code:
<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 with Horizontal Borders
| # |
Make |
Model |
Year |
#1 |
Make |
Model |
Year |
| 1 |
Honda |
Accord |
2009 |
1 |
Honda |
Accord |
2009 |
| 2 |
Toyota |
Camry |
2012 |
2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
2 |
Toyota |
Camry |
2012 |
code:
<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>
Striped Table
| # |
Make |
Model |
Year |
| 1 |
Honda |
Accord |
2009 |
| 2 |
Toyota |
Camry |
2012 |
| 3 |
Hyundai |
Elantra |
2010 |
| 4 |
Ford |
Focus |
2008 |
| 5 |
Nissan |
Sentra |
2011 |
| 6 |
BMW |
M3 |
2009 |
| 7 |
Honda |
Civic |
2010 |
| 8 |
Kia |
Soul |
2010 |
code:
<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>