[Bootstrap] CSS - Tables (테이블 디자인 하기)

Bootstrap 에서 제공하는 Table CSS 입니다.

데이터 리스트를 보통 테이블 태그를 이용하여 구성을 할 때 디자인적으로 깔끔하게 class 를 추가하여 바꿀 수 있습니다.

보통 일반적인 html 코드로 table 을 구성하면 이러한 화면으로 보입니다. 기본 html 코드입니다.

테이블 설명

#	컬럼2	컬럼3	컬럼4	컬럼5
1	데이터2	데이터3	데이터4	데이터5
2	데이터2	데이터3	데이터4	데이터5
3	데이터2	데이터3	데이터4	데이터5
4	데이터2	데이터3	데이터4	데이터5
5	데이터2	데이터3	데이터4	데이터5

하지만 테이블에 몇개의 class 만 넣어주어도 디자인이 이쁘게 바뀝니다.

<table class="table table-striped table-bordered table-hover"> <caption>테이블 설명</caption> <thead> <tr> <th>#</th> <th>컬럼2</th> <th>컬럼3</th> <th>컬럼4</th> <th>컬럼5</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>데이터2</td> <td>데이터3</td> <td>데이터4</td> <td>데이터5</td> </tr> <tr> <td>2</td> <td>데이터2</td> <td>데이터3</td> <td>데이터4</td> <td>데이터5</td> </tr> <tr> <td>3</td> <td>데이터2</td> <td>데이터3</td> <td>데이터4</td> <td>데이터5</td> </tr> <tr class="success"> <td>4</td> <td>데이터2</td> <td>데이터3</td> <td>데이터4</td> <td>데이터5</td> </tr> <tr class="danger"> <td>5</td> <td>데이터2</td> <td>데이터3</td> <td>데이터4</td> <td>데이터5</td> </tr> </tbody> </table>

테이블 설명

#	컬럼2	컬럼3	컬럼4	컬럼5
1	데이터2	데이터3	데이터4	데이터5
2	데이터2	데이터3	데이터4	데이터5
3	데이터2	데이터3	데이터4	데이터5
4	데이터2	데이터3	데이터4	데이터5
5	데이터2	데이터3	데이터4	데이터5

class 에 넣은 값이 몇개 없지만 처음 테이블과 다르게 변한 것을 볼 수 있습니다.

테이블 class 속성에 stripe, hover, border 등 몇개만 주었을 뿐인데 느낌이 확 다릅니다.

자세한 예제는 아래의 URL에서 확인 하시면 됩니다.

http://getbootstrap.com/css/#tables