부트스트랩 테이블

HTML 태그를 사용해서 만드는 테이블에 부트스트랩 CSS를 적용한 부트스트랩 테이블에 대해 적으려는 것이다. 

코딩을 하여 테이블을 만드는 것 대신 나는 http://truben.no/table/에서 3행 4열 기본적인 테이블을 만들어 부트스트랩 기본 테이블을 만들기 위해 class="table"이라고 더해 아래와 같이 했다. 코딩으로 직접 테이블을 만들어도 좋은데 나는 그것이 귀찮다. 웹을 뒤지면 테이블을 자동으로 만들어주는 마법사가 있다.

청춘예찬 1	청춘예찬 2	청춘예찬 3
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다

위는 부트스트랩 테이블 기본으로 테이블 전체에 테두리가 생기도록 하고 싶다면 class="table"에 table-bordered를 추가하면 된다. class에 class="a b"식으로 한다는 말이니 class="table table-bordered"하면 아래와 같이 테이블 전체에 테두리가 생긴다.

청춘예찬 1	청춘예찬 2	청춘예찬 3
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다

 

그리고 행에 줄무늬가 생기게 하기 위해서는 class="table 옆에 table-striped을 추가하여 class="table table-striped"게 하면 아래와 같이 된다. 아래 테이블 2번째 행을 보면 회색 배경이 보일 것이다.

청춘예찬 1	청춘예찬 2	청춘예찬 3
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다

 회색이 아닌 다른 색으로 행이나 셀 색을 변경하고 싶다면 색이 아니고 다른 색을 원한다면 active,success,info,warning,danger를 사용하면 될 것이다.  active,success,info,warning,danger는 버튼 등에도 쓰이니 부트스트랩을 사용한다면 알 것이다. 아래 테이블 마지막 행에 tr에 class="success"라고 더했다. 위 처럼 table에 더하면 테이블 전체 색이 변하는 것이니 행에 더한 것이다. 만약 셀 하나의 색만 변경하고자 한다면 td에 더해야 할 것이다.

청춘예찬 1	청춘예찬 2	청춘예찬 3
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다

행에 마우스를 올릴 때 마다 배경색이 변하게 하는 것은 table-hover를 추가한다. class="table table-hover"라고 하면 행에 마우스를 올릴 때 행의 배경이 변하게 된다. 

청춘예찬 1	청춘예찬 2	청춘예찬 3
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다
가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다	가진 찾아 할지라도 희망의 말이다

티스토리 에디터에 있는 에디터를 사용하면 편하지만 그것은 2016/10/29 - 부트스트랩 테이블을 배우기로 했다에서 적었듯이 잘리니 테이블을 만들고 싶다면 직접 만들었으면 한다. 직접 만드는데 HTML 테이블이든 부트스트랩 테이블이든.... 나는 부트스트랩 스킨을 사용하므로 부트스트랩 테이블을 사용하는 것이다.