VSCode_부트스트랩. table

테이블

클래스에 테이블을 부여함으로서 선을 긋거나 표를 나눌 필요없이 쉽게

테이블을 만들 수 있습니다.

<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효과를 줍니다.

일단은 여기까지 입니다.