-
Bootstrap 기본적인 테이블(Table)사용하기DEV/javascript 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>억지 예제를 만들다 보니 코드가 길어졌다.
사진을 클릭하면 크게 볼 수 있을지도...?
샘플 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>
부트스트랩 제공 속성 Table 3
class="table table-dark table-hover"
테이블 3은 다크 모드를 추가하고 마우스를 올리면 색상이 변경되는 hover 기능을 추가하였다.
아주 기본적인 부트스트랩 테이블 사용법을 알아보았다.
자세한 내용은 공식 사이트를 참조하자!
부트스트랩 테이블
https://getbootstrap.com/docs/4.0/content/tables/
Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
getbootstrap.com
부트스트랩 설치 및 사용
https://seokbong.tistory.com/16
Bootstrap 설치 및 사용하기
Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다운로드는 하단 링크를 참조하자. 다양한 설치 방법을 제공한다. 1. "최소화된" 이라 그런가 적용 안되는게 있다. h
seokbong.tistory.com
'DEV > javascript' 카테고리의 다른 글
Bootstrap 알림, 경고(Alert) 기본 사용법 (0) 2022.02.21 Bootstrap 기본적인 버튼(Button) 사용법 (0) 2022.02.21 Bootstrap 그리드 시스템 (Grid system : row, col) (0) 2022.02.21 Bootstrap 설치 및 사용하기 (0) 2022.02.21 Toast grid 함수 및 이벤트 예시 (0) 2022.02.17