BootStrap5(BS5) 공부하기 3

부트스트랩에는 작은 패딩값을 가지고 수평으로 나누는 테이블이 있다.

<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>

이와 같이 작성한다.

줄무늬 형식의 테이블을 만드려면 다음과 같이 한다.

<table class="table table-striped"> 

테이블과 셀의 모든 면에 테두리를 추가하기 위해서는 다음과 같이 한다.

<table class="table table-bordered">

hover시 효과를 주기 위해서는 다음과 같이 한다.

<table class="table table-hover">

테이블에 검은색 배경을 주기 위해서는 다음과 같이 한다.

<table class="table table-dark">

검은색 배경에 어두운 스트라이프를 주기 위해서는 다음과 같이 하면 된다.

<table class="table table-dark table-striped">

검은색 배경에 hover 효과도 가능하다.

<table class="table table-dark table-hover">

테이블의 border를 지울 수도 있다.

<table class="table table-borderless">

다음과 같이 하면 테이블에 색상을 줄 수 있다.

  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>

테이블에 헤드에만 색상을 추가하는 것도 가능하다.

<thead class="table-dark">
<thead class="table-success">

기본 테이블보다 패딩을 작게 해 테이블을 작게 만드는 것도 가능하다.

<table class="table table-sm">

테이블이 너무 길때 다음과 같이 하면 스크롤바를 반응적으로 추가해준다.

<div class="table-responsive">

table-responsive-& 의 &부분에 sm, md, lg등을 넣어 스크롤 막대를 받을 시기를 결정할 수도 있다.