테이블
클래스에 테이블을 부여함으로서 선을 긋거나 표를 나눌 필요없이 쉽게
테이블을 만들 수 있습니다.
<h4 class="text-primary">table class="table" 적용시 </h4>
<table class="table">
<thead>
<tr>
<th>번 호 </th>
<th>제 목</th>
<th>글쓴이</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트 </td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>임꺽정 </td>
</tr>
<tr>
<td>3</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>성춘향 </td>
</tr>
</table>
table-striped
<table class="table table-striped">
<thead>
<tr>
<th>번 호 </th>
<th>제 목</th>
<th>글쓴이</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트 </td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>임꺽정 </td>
</tr>
<tr>
<td>3</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>성춘향 </td>
</tr>
</table>
striped는 테이블의 선을 벗겨줍니다.
table-bordered
<table class="table table-bordered">
<thead>
<tr>
<th>번 호 </th>
<th>제 목</th>
<th>글쓴이</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트 </td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>임꺽정 </td>
</tr>
<tr>
<td>3</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>성춘향 </td>
</tr>
</table>
bordered는 테이블의 끝에 선을 입혀줍니다.
table-hover
<h4 class="text-primary"> class="table table-hover" 적용시 </h4>
<table class="table table-hover">
<thead>
<tr>
<th>번 호 </th>
<th>제 목</th>
<th>글쓴이</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트 </td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>임꺽정 </td>
</tr>
<tr>
<td>3</td>
<td>테이블 테스트 테이블 테스트 테이블 테스트</td>
<td>성춘향 </td>
</tr>
</table>
table-hover는 커서가 올라가면 게시판에 hover효과를 줍니다.
일단은 여기까지 입니다.