기본 테이블
HTML 테이블에 스타일을 넣으려면, pure-table 클래스이름을 추가하면 된다. 이 클래스는 테이블 엘리먼트의 패딩과 보더를 추가하고 헤더를 강조한다.
| # | 제조사 | 모델 | 연도 |
|---|---|---|---|
| 1 | 혼다 | 어코드 | 2009 |
| 2 | 도요타 | 캠리 | 2012 |
| 3 | 현대 | 엘란트라 | 2010 |
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>제조사</th>
<th>모델</th>
<th>연도</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>혼다</td>
<td>어코드</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>도요타</td>
<td>캠리</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>현대</td>
<td>엘란트라</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>제조사</th>
<th>모델</th>
<th>연도</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>혼다</td>
<td>어코드</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>도요타</td>
<td>캠리</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>현대</td>
<td>엘란트라</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>제조사</th>
<th>모델</th>
<th>연도</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>혼다</td>
<td>어코드</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>도요타</td>
<td>캠리</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>현대</td>
<td>엘란트라</td>
<td>2010</td>
</tr>
</tbody>
</table>줄무늬 테이블
큰 테이블에서 행들이 구분되면 보기에 더 편해진다. pure-table-odd 클래스이름을 해당하는 모든 <tr> 엘리먼트에 넣으면 행의 배경에 얼룩말같은 효과가 난다.
참고: CSS3의 nth-child 수도 선택자를 지원하는 브라우져라면 더 간단하게 사용할 수 있다. pure-table-striped 클래스 이름을 <table> 엘리먼트에 추가하면 자동으로 얼룩말 효과가 난다. 이 방법은 인터넷 익스플로러 8 이하에서는 작동하지 않는다.
| # | 제조사 | 모델 | 연도 |
|---|---|---|---|
| 1 | 혼다 | 어코드 | 2009 |
| 2 | 도요타 | 캠리 | 2012 |
| 3 | 현대 | 엘란트라 | 2010 |
| 4 | 포드 | 포커스 | 2008 |
| 5 | 닛산 | 센트라 | 2011 |
| 6 | BMW | M3 | 2009 |
| 7 | 혼다 | 시빅 | 2010 |
| 8 | 기아 | 소울 | 2010 |
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>제조사</th>
<th>모델</th>
<th>연도</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<td>1</td>
<td>혼다</td>
<td>어코드</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>도요타</td>
<td>캠리</td>
<td>2012</td>
</tr>
<tr class="pure-table-odd">
<td>3</td>
<td>현대</td>
<td>엘란트라</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>포드</td>
<td>포커스</td>
<td>2008</td>
</tr>
<tr class="pure-table-odd">
<td>5</td>
<td>닛산</td>
<td>센트라</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>혼다</td>
<td>시빅</td>
<td>2010</td>
</tr>
<tr>
<td>8</td>
<td>기아</td>
<td>소울</td>
<td>2010</td>
</tr>
</tbody>
</table>