Bootstrap 기본적인 테이블(Table)사용하기

DEV/javascript

Bootstrap 기본적인 테이블(Table)사용하기

석봉 2022. 2. 21. 15:36

Bootstrap은 다양한 컴포넌트를 제공한다.

Table 기능을 쓸 기회가 있어 사용해보았다.

샘플 HTML

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
<head>
    <!-- [jQuery] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <!-- [Bootstrap] -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
    <h3>Table 1</h3>
    <table class="table table-sm">
        <colgroup>
            <col width=10%>
            <col width=20%>
            <col width=40%>
            <col width=30%>
        </colgroup>
        <tr>
            <th>#</th>
            <th>성</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <th>1</th>
            <td>박</td>
            <td>석봉</td>
            <td>29</td>
        </tr>
        <tr>
            <th>2</th>
            <td>김</td>
            <td>시봉</td>
            <td>29</td>
        </tr>
    </table>

    <h3>Table 2</h3>
    <table class="table table-bordered">
        <colgroup>
            <col width=10%>
            <col width=20%>
            <col width=40%>
            <col width=30%>
        </colgroup>
        <tr class="table-primary">
            <th>#</th>
            <th>성</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr class="table-active">
            <th>1</th>
            <td>박</td>
            <td>석봉</td>
            <td>29</td>
        </tr>
        <tr>
            <th>2</th>
            <td>김</td>
            <td>시봉</td>
            <td>29</td>
        </tr>
        <tr>
            <th>3</th>
            <td colspan="2">이름 없음</td>
            <td rowspan="2">???</td>
        </tr>
        <tr>
            <th>4</th>
            <td colspan="2">이름 없음</td>
        </tr>
        <tr>
            <th>5</th>
            <td colspan="3">---</td>
        </tr>
    </table>

    <h3>Table 3</h3>
    <table class="table table-dark table-hover">
        <colgroup>
            <col width=10%>
            <col width=20%>
            <col width=40%>
            <col width=30%>
        </colgroup>
        <tr>
            <th>#</th>
            <th>성</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <th>1</th>
            <td>박</td>
            <td>석봉</td>
            <td>29</td>
        </tr>
        <tr>
            <th>2</th>
            <td>김</td>
            <td>시봉</td>
            <td>29</td>
        </tr>
        <tr>
            <th>3</th>
            <td colspan="2">이름 없음</td>
            <td rowspan="2">???</td>
        </tr>
        <tr>
            <th>4</th>
            <td colspan="2">이름 없음</td>
        </tr>
    </table>
</body>

<script src="./test.js"></script>

</html>

억지 예제를 만들다 보니 코드가 길어졌다.

사진을 클릭하면 크게 볼 수 있을지도...?

Table 1

기본적으로 class에 "table"을 추가하여 Bootstrap table을 사용할 수 있다.

1번 테이블은 추가적으로 "table-sm"을 추가하여 작은 테이블로 사용하였다.

<colgroup>으로 비율을 조정하였다.

Table 2

기본 사이즈를 사용하였다.

컬럼 병합을 위해 "colspan", "rowspan"을 사용하였다.

<td colspan="n"> : 해당 태그 기준으로 본인을 포함하여 우측으로 n개의 컬럼을 병합

<td rowspan="n"> : 해당 태그 기준으로 본인을 포함하여 하단으로 n개의 컬럼을 병합

"table-primary"와 "table-active" class를 추가하여 사용하였다.

부트스트랩은 그 외 다양한 속성을 제공한다.

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>