부트스트랩을 통해 table 적용
부트스트랩을 사용하면 아주 간편히 적용가능
class="table"
넓이가 100%인 테이블, 행 사이에 border적용
table class에 "table" 을 적용하면 넓이가 100%인 테이블, 행 사이에 border적용시킨다.
<table class="table"><!-- 클래스 table은 위에 부트스트랩 링크 안에있음 -->
<thead>
<tr>
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>게시판의 글제목</td><td>홍길동</td>
</tr>
<tr>
<td>2</td><td>게시판의 글제목2</td><td>테스트</td>
</tr>
<tr>
<td>3</td><td>게시판의 글제목3</td><td>임시3</td>
</tr>
</tbody>
</table>
table-striped
테이블의 각행에 색상을 넣어주는 효과
<table class="table table-striped">
<thead>
<tr>
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>게시판의 글제목</td><td>홍길동</td>
</tr>
<tr>
<td>2</td><td>게시판의 글제목2</td><td>테스트</td>
</tr>
<tr>
<td>3</td><td>게시판의 글제목3</td><td>임시3</td>
</tr>
</tbody>
</table>
table-bordered
기본테이블은 각행에만 밑줄,테이블 전체에 테두리를 설정
<table class="table table-bordered"> <thead> <tr> <td>번호</td><td>글제목</td><td>작성자</td> </tr> </thead> <tbody> <tr> <td>1</td><td>게시판의 글제목</td><td>홍길동</td> </tr> <tr> <td>2</td><td>게시판의 글제목2</td><td>테스트</td> </tr> <tr> <td>3</td><td>게시판의 글제목3</td><td>임시3</td> </tr> </tbody> </table>
table-hover
각행에 마우스를 갖다대면 색상변경(하이라이트 효과)
<h4 class="text-success text-center">
class="table-hover"를 준 경우
</h4>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>게시판의 글제목</td><td>홍길동</td>
</tr>
<tr>
<td>2</td><td>게시판의 글제목2</td><td>테스트</td>
</tr>
<tr>
<td>3</td><td>게시판의 글제목3</td><td>임시3</td>
</tr>
</tbody>
</table>
table-condensed
각각의 셀의 padding값이 작아져서(셀과 셀안의 문자열간격) 타이트한느낌을 적용 padding:5px;
<table class="table table-condensed">
<thead>
<tr>
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>게시판의 글제목</td><td>홍길동</td>
</tr>
<tr>
<td>2</td><td>게시판의 글제목2</td><td>테스트</td>
</tr>
<tr>
<td>3</td><td>게시판의 글제목3</td><td>임시3</td>
</tr>
</tbody>
</table>
active(회색), success(연두색), warning(겨자색), danger(빨강색)
각 행또는 각 셀마다 색상을 부여(행에 부여하는 클래스 선택자)
tr에 적용하고싶은 색을 적용한다
<table class="table table-bordered>
<thead>
<tr class="active">
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td><td>게시판의 글제목</td><td>홍길동</td>
</tr>
<tr class="warning">
<td>2</td><td>게시판의 글제목2</td><td>테스트</td>
</tr>
<tr class="danger">
<td>3</td><td>게시판의 글제목3</td><td>임시3</td>
</tr>
</tbody>
</table>
table-responsive
=>브라우저의 길이에 맞춰 테이블의 크기 및 내용부분 또한 가변적으로 변함
=>테이블 태그전체를 div class="table-responsive"로 감싸줌
=>폭이 줄어들면 자동적으로 스크롤바가 생성->td안의 내용이 적으면 반영X
<div class="table-responsive">
<table class="table">
<thead><!-- 타이틀 제목에 해당되는 tr을 묶어주는 역할 -->
<tr>
<td>번호</td><td>글제목</td><td>작성자</td>
</tr>
</thead>
<tbody><!-- 본문내용을 묶어주는 역할(tbody) -->
<tr>
<td>1</td><td>게시판의 글제목게시판의 글제목게시판의 글제목게시판의 글제목게시판의 글제목게시판의 글제목게시판의 글제목게시판의 글제목</td><td>홍길동</td>
</tr>
<tr>
<td>2</td><td>게시판의 글제목2게시판의 글제목2게시판의 글제목2게시판의 글제목2게시판의 글제목2게시판의 글제목2게시판의 글제목2게시판의 글제목2</td><td>테스트</td>
</tr>
<tr>
<td>3</td><td>게시판의 글제목3게시판의 글제목3게시판의 글제목3게시판의 글제목3게시판의 글제목3게시판의 글제목3게시판의 글제목3게시판의 글제목3</td><td>임시3</td>
</tr>
</tbody>
</table>
