Bootstrap 3.3.7 | 콘텐츠의 기본 요소 | 테이블(table)

Tags:

테이블은 보통의 <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"를 지정하고 있다.