부트스트랩 테이블


Bootstrap은 테이블 생성을 위한 명확한 레이아웃을 제공합니다. 다음 표에는 Bootstrap에서 지원하는 일부 테이블 요소가 나열되어 있습니다.

태그 설명
<table>테이블에 기본 스타일을 추가합니다.
<thead>테이블 열을 식별하는 데 사용되는 테이블 헤더 행의 컨테이너 요소(<tr>).
<tbody>테이블 본문의 테이블 행에 대한 컨테이너 요소(<tr>)입니다.
<tr>단일 행에 나타나는 테이블 셀 그룹에 대한 컨테이너 요소(<td> 또는 <th>).
<td>기본 테이블 셀.
번째>열이나 행을 식별하는 데 사용되는 특수 테이블 셀(범위 및 위치에 따라 다름) <thead> 내에서 사용해야 합니다.
<caption>테이블 저장소 내용에 대한 설명 또는 요약입니다.

테이블 클래스

다음 테이블 스타일을 테이블에 사용할 수 있습니다. 풍경 구분 기호만 사용)

사용해 보세요.table-striped<tbody> 안에 얼룩말 줄무늬 추가(IE8에서는 지원되지 않음)사용해 보세요.table-bordered모든 테이블에 테두리 추가 사용해 보세요 .table-hover<tbody> 내의 모든 행에 마우스 호버 상태를 활성화하세요. 사용해 보세요 .table-densed테이블을 더 아름답게 만드세요 사용해 보세요 사용해 보세요Class 인스턴스.active
모든 테이블 클래스에 참여하기
<tr>, <th> 행 또는 셀:
Description

행 또는 셀에 호버 색상 적용

사용해 보세요

.success는 성공적인 작업을 의미합니다사용해 보세요.info정보 변경 작업을 나타냅니다시도해보세요 it.warning경고 작업을 나타냅니다사용해 보세요.danger는 위험한 작업을 의미합니다해 보세요

기본 테이블

패딩과 가로 분할만 포함된 기본 테이블을 원하는 경우 다음 예와 같이 .table 클래스를 추가합니다. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的表格</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼

선택적 테이블 클래스

기본 테이블 태그 및 .table 클래스 외에도 태그 스타일을 정의하는 데 사용할 수 있는 몇 가지 클래스가 있습니다. 아래에서 해당 수업을 소개합니다.

줄무늬 테이블

.table-striped 클래스를 추가하면 아래 예와 같이 <tbody> 내부 행에 줄무늬가 표시됩니다. 

实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 条纹表格</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
	<caption>条纹表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>密码</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

Border 테이블

.table을 추가하면 - bordered 클래스를 사용하면 아래 예와 같이 각 요소 주위에 테두리가 있고 전체 테이블이 둥글게 표시됩니다. 

实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 边框表格</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered">
	<caption>边框表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>密码</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

hover table

.table-hover 클래스를 추가하면 연한 회색 배경이 됩니다. 아래 예와 같이 행 위로 포인터를 가져가면 나타납니다. 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 悬停表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
   <caption>悬停表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

Condensed table

.table-densed 클래스를 추가하면 행 내부 패딩이 반으로 잘려 테이블이 더 돋보이게 됩니다. 아래 예와 같이 컴팩트합니다. 이는 정보를 보다 간결하게 표시하려는 경우에 유용합니다. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 精简表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-condensed">
   <caption>精简表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

컨텍스트 클래스

아래 표에 나열된 컨텍스트 클래스를 사용하면 테이블 행이나 개별 셀의 배경색을 변경할 수 있습니다.

은 다음을 나타냅니다. 주의가 필요한 경고 는 위험하거나 잠재적으로 부정적인 행동을 나타냅니다. 이 클래스는 <tr>, <td> 또는 < 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 上下文类</title>
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>产品</th>
         <th>付款日期</th>
         <th>状态</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>产品1</td>
         <td>23/11/2013</td>
         <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td>
         <td>10/11/2013</td>
         <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td>
         <td>20/10/2013</td>
         <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td>
         <td>20/10/2013</td>
         <td>已退货</td>
      </tr>
   </tbody>
</table>

</body>
</html>
클래스 설명
.active특정 행이나 셀에 마우스 오버 색상 적용
.success성공 또는 긍정적인 작업을 나타냅니다. .warning
.danger

반응형 테이블

모든 .table을

.table-반응형

클래스로 래핑하면 작은 장치(768px 미만)를 수용할 수 있도록 테이블을 가로로 스크롤할 수 있습니다. 너비가 768px보다 큰 대형 장치에서 볼 때 아무런 차이가 없습니다. Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 响应式表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table-responsive">
   <table class="table">
      <caption>响应式表格布局</caption>
      <thead>
         <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
         </tr>
         <tr>
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
         </tr>
         <tr>
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
         </tr>
         <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
         </tr>
      </tbody>
   </table>
</div>  	

</body>
</html>

인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요