다음으로는 부트스트랩에서 기본적으로 제공하고 있는 Table에 대하여 알아보도록 하겠습니다.

<table class="table">
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">책이름</th>
          <th scope="col">판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>해리포터</td>
          <td>100권</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>해리포터2</td>
          <td>200권</td>
        </tr>
      </tbody>
    </table>

table-light, table-dark 등의 테마를 통해 여러 색상을 설정하는것이 가능합니다. 행과 행을 구별하기 위해 table-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있습니다.

<table class="table table-dark">
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">책이름</th>
          <th scope="col">판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>해리포터</td>
          <td>100권</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>해리포터2</td>
          <td>200권</td>
        </tr>
      </tbody>
    </table>

table-borderless를 사용하면 테두리를 없앨 수 있습니다.

<table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">책이름</th>
          <th scope="col">판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>해리포터</td>
          <td>100권</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>해리포터2</td>
          <td>200권</td>
        </tr>
      </tbody>
    </table>

Table을 꾸밀 수 있는 전체 색입니다. 필요에 따라 활용하시면 됩니다.

<tbody>
        <tr class="table-active"><td>hello</td></tr>
        <tr class="table-primary"><td>hello</td></tr>
        <tr class="table-secondary"><td>hello</td></tr>
        <tr class="table-success"><td>hello</td></tr>
        <tr class="table-danger"><td>hello</td></tr>
        <tr class="table-warning"><td>hello</td></tr>
        <tr class="table-info"><td>hello</td></tr>
        <tr class="table-light"><td>hello</td></tr>
        <tr class="table-dark"><td>hello</td></tr>
        <tr class="bg-primary"><td>hello</td></tr>
        <tr class="bg-success"><td>hello</td></tr>
        <tr class="bg-warning"><td>hello</td></tr>
        <tr class="bg-danger"><td>hello</td></tr>
        <tr class="bg-info"><td>hello</td></tr>
      </tbody>
    </table>