부트스트랩을 사용하면, 테이블 태그에 몇가지 클래스만 부여해 주기만 해도 테이블이 디자이너가 손본듯한 테이블로 깔끔하게 다듬어 준다.
먼저 꾸며볼 테이블은 아래와 같다.
<table>
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
<th>컬럼4</th>
</tr>
</thead>
<tbody>
<tr>
<td>항목1-1</td>
<td>항목1-2</td>
<td>항목1-3</td>
<td>항목1-4</td>
</tr>
<tr>
<td>항목2-1</td>
<td>항목2-2</td>
<td>항목2-3</td>
<td>항목2-4</td>
</tr>
<tr>
<td>항목3-1</td>
<td>항목3-2</td>
<td>항목3-3</td>
<td>항목3-4</td>
</tr>
</tbody>
</table>
보기만 해도 숨이 막히는 듯한 테이블이다..
이걸 이쁘게 다듬어 나가보자.
1. 부트스트랩 테이블 지정 : table
일반 테이블을 부트스트랩 테이블로 만들려면 table 태그에 table 클래스만 주면 된다.
<table class="table">
...
</table>
클래스 하나만 줬을 뿐인데, 테이블이 잘 정리가 되어졌다.
특징을 자세히 보면,
- 테두리와 세로선은 보이지 않는다. ( 위 이미지는 일정부분 캡쳐 뜨면서 테두리가 보이는것처럼 보이지만 테두리는 없는 상태다. )
- 그리고, 헤더글자가 진하게 바뀌었고, tbody와 어느정도 구분이 된다.
- 폭이 부모태그의 100%를 차지하게 된다.
- 브라우져 크기를 줄이면 테이블도 같이 줄어든다.
이렇게 table 태그에 table 클래스는 필수로 들어가게 되고, 그다음 추가적인 클래스들로 좀더 이쁘게 다듬어 나갈 수 있다.
2. 번갈아 가면서 색상을 바꿔주기 : table-striped
다른 코드는 그대로 두고 table태그에 table-striped 클래스만 추가해보자.
<table class="table table-striped">
...
</table>
tbody 안에 있는 항목들이 번갈아가면서 색상을 달리 함을 볼 수 있다.
3. 경계선 주기 : table-bordered
table 태그에 table-bordered 클래스를 추가하게 되면, 테이블에 테두리와 세로선이 생기게 된다.
<table class="table table-striped table-bordered">
...
</table>
보이지 않던 테두리와 세로선이 표시가 됨을 확인할 수 있다.
4. 마우스오버 효과 : table-hover
tbody 부분의 ROW 전체에 마우스오버 효과를 주려면 table 태그에 table-hover 클래스를 추가하면 된다.
<table class="table table-striped table-bordered table-hover">
...
</table>
tbody 안에 있는 셀들에 마우스를 올리면 마우스오버 효과가 적용되어있음을 확인할 수 있다. ( 다음 예제부터는 코드가 길어지니 table-hover를 빼자. )
참고로, 헤더 영역은 마우스오버 효과가 적용되지 않는다.
5. 검은배경 테이블 : table-dark
table 태그에 table-dark 클래스를 주게 되면, 테이블 배경이 검은색이 되고, 글자 또한 검은색에 어울리는 흰색 글자로 바뀌게 된다.
<table class="table table-striped table-bordered table-dark">
...
</table>
개인적으로는 별로인듯 하다...
6. 테이블 안쪽 선들을 없앰 : table-borderless
table-borderless 클래스를 주게 되면 테이블 안쪽의 선들이 모두 제거가 된다. ( 테두리하고는 무관 )
테스트를 위해 위에서 줬던 table-striped와 table-dark를 제거하고 table-borderless를 추가해본다.
<table class="table table-bordered table-borderless">
...
</table>
테이블 안쪽의 선들은 모두 없어졌다.
만약 위에서 table-bordered 를 제거하게 되면, 테두리도 없어지게 된다.
7. 셀 높이를 작게 : table-sm
테이블의 셀 높이를 좀 줄이고 싶을 때는 table-sm 클래스를 사용한다.
<table class="table table-bordered table-sm">
...
</table>
확실히 높이가 촘촘해짐을 확인할 수 있다.
8. 헤더색상 : thead-dark / thead-light
테이블의 헤더 색상을 위한 클래스가 두개 제공된다.
검은색 헤더를 사용할 때는 thead 태그에 thead-dark 클래스를 주고, 밝은 헤더를 사용할 때는 thead 태그에 thead-light 클래스를 사용한다.
다른 코드는 그대로 두고, thead 태그에 위 두 클래스를 각각 줘보자.
<table class="table table-bordered table-sm">
<thead class="thead-dark">
...
</table>
<table class="table table-bordered table-sm">
<thead class="thead-light">
...
</table>
배경색이 바뀌면서 글자색 또한 해당 배경색에 어울리는 색상으로 바뀌게 된다.
9. ROW 색상 변경 : tr태그에 table-색상 / text-색상
tr 태그에 색상관련 클래스를 주면, 해당 ROW가 지정된 색상으로 변경이 된다.
배경색을 바꿀 때는 'table-" 접두사가 붙은 색상클래스, 글자색을 바꿀 때는 "text-" 접두사가 붙은 색상클래스를 사용하면 된다.
제공되는 색상은 다음과 같다.
<글자색>
text-muted
text-primary
text-success
text-info
text-warning
text-danger
text-secondary
text-dark
text-body
text-light
text-white
<배경색>
table-primary
table-success
table-info
table-warning
table-danger
table-secondary
table-dark
table-light
위에서 아무 색이나 골라서 ROW의 색상을 변경해보자.
다른 태그들은 그대로 두고, tbody의 첫번째 tr 태그를 아래와 같이 수정해보자
<tr class="table-secondary text-success">
<td>항목1-1</td>
<td>항목1-2</td>
<td>항목1-3</td>
<td>항목1-4</td>
</tr>
즉, 배경색은 secondary색상, 글자색은 success색상이 적용되었다.
각각이 어떤 색상인지 이것저것 바꿔보기 바란다.
참고로, thead 색상도 마찬가지로 tr 태그에 클래스를 주어 배경색과 글자색을 바꿀수가 있다.
단, thead 태그에 thead-dark, thead-light 클래스가 적용되어 있으면 색상클래스를 줘도 색상이 바뀌지 않고 thead 태그에 지정된 클래스에 무조건 따르게 된다.
이정도만 해도 아주 훌륭한 테이블이 된다.
여기에서 추가로 반응형에 맞게 테이블을 만들수 있어야 한다.
일반 피씨에서는 모든 컬럼이 보이다가 모바일 화면에서는 하나의 컬럼만 보이게 한다던지.. 이런 처리가 필요하기 때문이다.
이 내용은 반응형에 관해 정리할 때 다루겠다..
- 끝 -
'부트스트랩4' 카테고리의 다른 글
| 부트스트랩4 - #4. 플렉스(Flex) (2) | 2019.09.22 |
|---|---|
| 부트스트랩4 - #2. 그리드 시스템 (0) | 2019.09.20 |
| 부트스트랩4 - #1. 기본골격 (0) | 2019.09.20 |