03. Bootstrap, 표 (table)

○ 기본 테이블

Bootstrap3

Bootstrap4

Bootstrap5

<table class="table">
    <thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
    </tbody>
</table>

 

○ 줄무늬 테이블

    - 얼룩말처럼 흰색과 회색 배경이 교대로 

Bootstrap3

Bootstrap4

Bootstrap5

<table class="table table-striped">

 

○ 테두리가 있는 테이블

Bootstrap3

 

Bootstrap4

Bootstrap5

<table class="table table-bordered">

 

○ 마우스 올린 셀의 배경색이 변하는 테이블 (hover table)

    - 마우스를 올리지 않은 상태는 기본 테이블과 스타일 동일

<table class="table table-hover">

 

○ 셀 높이가 좁은 테이블 (Condensed Table)

Bootstrap3

<table class="table table-condensed">

 

○ 셀 색상

    - <tr>, <td> 에서 사용가능

Bootstrap3

<table class="table">
    <tr class="success">
      <td>Success</td>
    </tr>
    <tr class="danger">
      <td>Danger</td>    
    </tr>    
    <tr class="info">
      <td>Info</td>
    </tr>
    <tr class="info">
      <td>Info</td>
    </tr>
    <tr class="active">
      <td>Active</td>
    </tr>
</table>

 

Bootstrap4

Bootstrap5

<table class="table">  
  <tr class="table-primary">
    <td>Primary</td>
  </tr>
  <tr class="table-success">
    <td>Success</td>
  </tr>
  <tr class="table-danger">
    <td>Danger</td>
  </tr>
  <tr class="table-info">
    <td>Info</td>
  </tr>
  <tr class="table-warning">
    <td>Warning</td>
  </tr>
  <tr class="table-active">
    <td>Active</td>
  </tr>
  <tr class="table-secondary">
    <td>Secondary</td>
  </tr>
  <tr class="table-light">
    <td>Light</td>
  </tr>
  <tr class="table-dark text-dark">
    <td>Dark</td>
  </tr>
</table>