부트스트랩4 표 (Tables)
페이지 정보
작성자 운영자 작성일 18-03-23 22:21 조회 1,757 댓글 0동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
기본 표
부트스트랩4 표는 기본적으로 밝은 여백과 수평 분배기가 있습니다.
.table 클래스는 표에 기본 스타일을 추가합니다.
<table class="table">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Striped 행
.table-striped클래스는 표에 지브라(얼룩말) 줄무늬를 추가합니다.
<table class="table table-striped">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Bordered Table(테두리)
.table-bordered 클래스는 표와 셀의 모든 면에 테두리를 추가합니다.
<table class="table table-bordered">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Hover Rows
.table-hover 클래스는 표 행에 마우스 호버 효과(회색 배경색)를 추가합니다.
<table class="table table-hover">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Black/Dark Table(검은배경/흰글씨)
.table-dark 클래스는 검색색 배경을 표에 추가합니다.
<table class="table table-dark">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Dark Striped Table
.table-dark와 .table-striped를 결합하여 어두운 줄무늬 표를 만듭니다.
<table class="table table-dark table-striped">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Hoverable Dark Table
.table-hover 클래스는 표 행에 호버 효과(회색 배경색)를 추가합니다.
<table class="table table-dark table-hover">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2222</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>999-1111-2222</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>002-2222-2222</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Contextual Classes
문맥 클래스는 전체 표(<table>), 표 행(<tr>) 또는 표 셀(<td>)에 색을 입힐 수 있습니다.
<table class="table">
<thead>
<tr>
<th>구분</th>
<th>과목</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>실전홈페이지제작</td>
<td>basic@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Grid</td>
<td>grid@example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Flexbox</td>
<td>flexbox@example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>php</td>
<td>php@example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>bootstrap4</td>
<td>boot@example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>css</td>
<td>css@example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>html</td>
<td>html@example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>js</td>
<td>js@example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>jquery</td>
<td>jquery@example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>vuejs</td>
<td>vuejs@example.com</td>
</tr>
</tbody>
</table>
사용할 수 있는 문맥 클래스는 아래와 같습니다.
클래스 |
설명 |
.table-primary |
파란색 : 중요한 행동을 나타냅니다. |
.table-success |
녹색 : 성공 또는 긍정적인 행동을 나타냅니다. |
.table-danger |
빨간색 : 잠재적이거나 부정적인 행동을 나타냅니다. |
.table-info |
하늘색 : 중립적인 정보 변경이나 행동을 나타냅니다. |
.table-warning |
주황색 : 주의가 필요한 경고를 나타냅니다. |
.table-active |
회색 : 표 행 또는 표 셀에 호버 색을 적용합니다. |
.table-secondary |
회색 : 약간 덜 중요한 행동을 나타냅니다. |
.table-light |
밝은 회색 표 또는 표 행 배경 |
.table-dark |
어두운 회색 표 또는 표 행 배경 |
Table Head Colors
.thead-dark클래스는 표 해더에 검은색 배경을 추가하고 thead-light클래스는 표 해더에 회색 배경을 추가합니다.
<table class="table">
<thead class="thead-dark">
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2525</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>010-5555-8888</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>010-2222-0000</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2525</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>010-5555-8888</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>010-2222-0000</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
Small Table
.table-sm클래스는 셀 여백을 절반으로 줄임으로써 표를 더 작게 만듭니다.
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>성명</th>
<th>연락처</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>이순신</td>
<td>010-2222-2525</td>
<td>lee@example.com</td>
</tr>
<tr>
<td>강감찬</td>
<td>010-5555-8888</td>
<td>kang@example.com</td>
</tr>
<tr>
<td>안창호</td>
<td>010-2222-0000</td>
<td>ahn@example.com</td>
</tr>
</tbody>
</table>
반응형 표(Responsive Tables)
.table-responsive 클래스는 반응형 표를 만듭니다. 가로 스크롤 막대는 너비가 992px미만인(필요한 경우)스크린에 표에 추가합니다. 992px보다 큰 화면을 볼 때는 차이점이 없습니다.
<div class="table-responsive">
<table class="table">
...
</table>
</div>** 화면 폭에 따라 표가 스크롤바를 가져야 하는 시기를 결정할 수 있습니다.
클래스 |
스크린 너비 |
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
댓글목록 0
등록된 댓글이 없습니다.
