Bootstrap 3.3.7 | 콘텐츠의 기본 요소 | 테이블(table)
테이블은 보통의 <table>
태그를 사용하여 작성한다. 이 테이블에 대한 스타일이 준비되어 있으며, 스타일 클래스를 지정하여 디자인을 설정할 수 있다.
이 클래스는 <table>
태그에 지정하는 것으로, 다음과 같은 클래스가 준비되어 있다.
테이블의 기본 표시
<table class="table">
테이블의 기본 클래스이라고 할 수 있다. 일반적인 테이블이다. 보기 쉽게 각 행마다 가로줄이 들어간다. 테이블 표시에는 이 클래스를 사용한다.
표의 가로폭을 100%로 만들고, 표의 내부에 가로선을 만든다.
<h1><code>class="table"</code></h1>
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>1,000,000</td>
<td>5</td>
<td>5,000,000</td>
</tr>
<tr>
<td>Tablet</td>
<td>500,000</td>
<td>6</td>
<td>3,000,000</td>
</tr>
<tr>
<td>Monitor</td>
<td>300,000</td>
<td>10</td>
<td>3,000,000</td>
</tr>
</tbody>
</table>
스트라이프(줄무늬) 표시
<table class="table table-striped">
<tbody> 안에 표시되는 짝수행과 홀수행에 배경색을 변경하는 스트라이프 넣는다. table-striped 클래스를 추가한다.
:nth-child 선택자를 이용하므로 IE8 이하에는 적용되지 않는다.
<h1><code>class="table table-striped"</code></h1>
<table class="table table-striped">
...
</table>
보더(border) 표시
<table class="table table-bordered">
이는 전체 사각 테두리로 둘러싸고, 각 항목에 테두리를 긋고 표로 만든다. table-borderd 클래스를 추가한다.
바깥쪽과 열 사이에도 선을 그린다.
<h1><code>class="table table-bordered"</code></h1>
<table class="table table-bordered">
...
</table>
호버(hover)
<table class="table table-hover">
마우스 포인터가 있는 행의 배경을 바꾸어 눈에 띄도록 하기 위한 것이다. table-hover 클래스를 추가한다.
마우스 포인터를 올리면 배경색이 변한다.
<h1><code>class="table table-hover"</code></h1>
<table class="table table-hover">
...
</table>
행 높이 줄여서 표시
<table class="table table-condensed">
행 높이를 줄인다.
<h1><code>class="table table-condensed"</code></h1>
<table class="table table-condensed">
...
</table>
그밖에 기본 table 클래스에 필요에 따라서 그외의 클래스를 추가하여 사용한다. 예를 들어, <table class="table table-bordered table-hover">
라고 하면, 테이블을 표 형태로 표시하고, 더욱 마우스 포인터가 있는 행을 두드러지게 하는 것이다.
배경색
이 외에 특정 행이나 셀(항목)을 눈에 띄게 하기 위한 것으로 다음과 같은 클래스가 준비되어 있다.
<tr>
, <td>
, <th>
태그에 클래스를 추가하여 배경색을 넣을 수 있다.
클래스의 값으로 active, success, info, warning, danger를 사용할 수 있다.
클래스 | 설명 |
---|---|
class=“info” | 정보. 간단한 메시지 표시. |
class=“warning” | 주의 · 경고, info보다 두드러지게 표시에 사용하는 것. |
class=“success” | 어떤 작업이 성공적으로 완료되었다는 메시지용. |
class=“error” | 어떤 작업이 실패했음을 나타내는 메시지용. |
<h1>Background Color</h1>
<table class="table">
<thead>
<tr class="active">
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Notebook</td>
<td>1,000,000</td>
<td>5</td>
<td>5,000,000</td>
</tr>
<tr class="info">
<td>Tablet</td>
<td>500,000</td>
<td>6</td>
<td>3,000,000</td>
</tr>
<tr>
<td class="warning">Monitor</td>
<td class="danger">300,000</td>
<td class="warning">10</td>
<td class="danger">3,000,000</td>
</tr>
</tbody>
</table>
가로 스크롤
<div class="table-responsive">
가로폭 768px 미만에서 표 안의 내용이 줄바꿈이 될 정도로 표가 크다면, 표를 줄이지 않고 가로 스크롤바를 만든다.
<h1>Responsive Table</h1>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Lorem Ipsum Dolor</th>
<th>Lorem Ipsum Dolor</th>
<th>Lorem Ipsum Dolor</th>
<th>Lorem Ipsum Dolor</th>
<th>Lorem Ipsum Dolor</th>
<th>Lorem Ipsum Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
</tr>
<tr>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
</tr>
<tr>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
<td>Lorem Ipsum Dolor</td>
</tr>
</tbody>
</table>
</div>
조합하여 사용하기
이것들을 조합하여 테이블을 만든다. 이용 예제는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>내용 표시</h1>
<h2>테이블</h2>
</div>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>성진</td>
<td>sungjin@dekuma.com</td>
</tr>
<tr>
<td>2</td>
<td>원석</td>
<td>wonsuk@flower</td>
</tr>
<tr class="info">
<td>3</td>
<td>병호</td>
<td>byeongho@happy</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<table class="table">
으로 테이블을 만들고, 세번째 <tr>
태그에 class="info"
를 지정하고 있다.