6. 테이블

다음으로는 부트스트랩에서 기본적으로 제공하고 있는 Table에 대하여 알아보도록 하겠습니다. Thead에는 thead-dark나 thead-light를 주어 thead를 부각시킬 수 있습니다. table-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있습니다.


<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-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-striped를 주면 테이블이 중간중간 강조된 격자무늬로 볼 수 있습니다. table-dark에도 사용할 수 있습니다. 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>


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
</head>

<body>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!-- 클래스가 있고 없고의 차이점 구분 -->
            <!-- <table class="table table-striped table-hover">...</table>-->
            <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
        </div>
        <div class="col-md-6">
            hello
        </div>
    </div>
</div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>