4-2. 테이블
부트스트랩에서는 다양한 스타일의 테이블 클래스를 제공합니다.
■ 기본 테이블
클래스 .table은 테이블에 기본 스타일을 적용시킵니다.
<div class="container mt-3">
<h3>기본 테이블</h3>
<table class="table">
<thead>
<tr>
<th>이름</th>
<th>주소</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr>
<td>최철수</td>
<td>서울</td>
<td>choi@sample.com</td>
</tr>
<tr>
<td>이순철</td>
<td>서울</td>
<td>lee@sample.com</td>
</tr>
</tbody>
</table>
</div>
ex4-7.html의 실행 결과
■ 줄무늬 테이블
클래스 .table-striped는 테이블을 줄무늬 형태로 만듭니다.
<div class="container mt-3">
<h3>줄무늬 테이블</h3>
<table class="table table-striped">
<thead>
<tr>
<th>이름</th>
<th>주소</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr>
<td>최철수</td>
<td>서울</td>
<td>choi@sample.com</td>
</tr>
<tr>
<td>이순철</td>
<td>서울</td>
<td>lee@sample.com</td>
</tr>
</tbody>
</table>
</div>
ex4-8.html의 실행 결과
■ 테두리 테이블
클래스 .table-bordered는 테이블과 셀의 모든 면에 테두리를 설정합니다.
<div class="container mt-3">
<h3>테두리 테이블</h3>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>이름</th>
<th>주소</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr>
<td>최철수</td>
<td>서울</td>
<td>choi@sample.com</td>
</tr>
<tr>
<td>이순철</td>
<td>서울</td>
<td>lee@sample.com</td>
</tr>
</tbody>
</table>
</div>
ex4-9.html의 실행 결과
■ 테이블 색상 설정
.table-primary, .table-secondary, .table-info, .table-success 등을 이용하면 테이블, 행, 셀의 색상을 설정할 수 있습니다.
<div class="container mt-3">
<h3>테이블 색상 설정</h3>
<table class="table table-borderless">
<thead class="table-dark">
<tr>
<th>이름</th>
<th>주소</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-primary">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-secondary">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-success">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-danger">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-info">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-warning">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-light">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr class="table-dark">
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
</tbody>
</table>
</div>
ex4-10.html의 실행 결과
■ 작은 테이블
클래스 .table-sm은 셀 패딩을 절반으로 줄여서 테이블을 작게 만듭니다.
<div class="container mt-3">
<h3>작은 테이블</h3>
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>이름</th>
<th>주소</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
<tr>
<td>김영숙</td>
<td>서울</td>
<td>kim@sample.com</td>
</tr>
</tbody>
</table>
</div>
ex4-11.html의 실행 결과
■ 반응형 테이블
클래스 .table-responsive는 수평으로 테이블이 너무 클 경우에 사용합니다. 스마트 폰과 같이 뷰포트의 너비가 좁을 경우에는 스크롤 바가 생깁니다.
<div class="container mt-3">
<h3>반응형 테이블</h3>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th>
<th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th><th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>열</td><td>열</td><td>열</td><td>열</td><td>열</td><td>열</td><td>열</td><td>열</td>
<td>열</td><td>열</td><td>열</td><td>열</td><td>열</td><td>열</td><td>열</td><td>열</td>
</tr>
</tbody>
</table>
</div>
</div>
ex4-12.html의 실행 결과
