English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML 테이블은 데이터를 그리드 방식(행과 열로)으로 표시하는 데 사용됩니다. Bootstrap를 사용하여4으로 빠르고 간편하게 테이블의 외관을 크게 변경할 수 있습니다。
Bootstrap4 .table 클래스를 사용하여 기본 테이블 스타일을 설정하는 예제를 다음과 같이 보여줍니다:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>기본 테이블</h2> <p>.table 클래스를 사용하여 기본 테이블 스타일을 설정:</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< sm> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table를 추가하여-striped 클래스를 사용하여 thead> 줄무늬가 있는 행을 볼 수 있습니다. 다음 예제와 같이 보여줍니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>줄무늬 테이블</h2> <p> .table를 추가하여-striped 클래스를 사용하여 줄무늬 테이블을 설정:</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-striped"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table-bordered 클래스는 테이블에 테두리를 추가할 수 있습니다
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>테두리가 있는 테이블</h2> <p>.table-bordered 클래스는 테이블에 테두리를 추가할 수 있습니다:</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-bordered"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table-hover 클래스는 테이블의 각 행에 마우스 오버 효과(회색 배경)를 추가할 수 있습니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>마우스 오버 상태 테이블</h2> <p>.table-hover 클래스는 테이블의 각 행에 마우스 오버 효과(회색 배경)를 추가할 수 있습니다：</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-hover"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table-dark 클래스는 테이블에 검은색 배경을 추가할 수 있습니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>검은색 배경 테이블</h2> <p>.table-dark 클래스는 테이블에 검은색 배경을 추가할 수 있습니다：</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-dark"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table와 결합 사용-dark와 .table-striped 클래스는 검은색 줄무늬 테이블을 생성할 수 있습니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>검은색 줄무늬 테이블</h2> <p> .table와 결합 사용-dark와 .table-striped 클래스는 검은색 줄무늬 테이블을 생성할 수 있습니다：</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-dark table-striped"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table와 결합 사용-dark와 .table-hover 클래스는 검은색 배경 테이블의 마우스 오버 효과를 설정할 수 있습니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>마우스 오버 효과 - 검은색 배경 테이블</h2> <p> .table와 결합 사용-dark와 .table-hover 클래스는 검은색 배경 테이블의 마우스 오버 효과를 설정할 수 있습니다：</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-dark table-hover"> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
의미 있는 색상 클래스를 지정하여 테이블의 행이나 셀에 색상을 설정할 수 있습니다：
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>의미 있는 색상 클래스를 지정</h2> <p>의미 있는 색상 클래스를 지정하여 테이블의 행이나 셀에 색상을 설정할 수 있습니다：</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< sm> <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>Default</<td>Yes< <td>Defaultson</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-primary"> <td>Primary</<td>Yes< <td>Joe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-success"> <td>Success</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-danger"> <td>Danger</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-info"> <td>Info</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-warning"> <td>Warning</<td>Yes< <td>Refs</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-active"> <td>Active</<td>Yes< <td>Activeson</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-secondary"> <td>Secondary</<td>Yes< <td>Secondson</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-light"> <td>Light</<td>Yes< <td>Angie</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tr class="table-dark 텍스트-dark"> <td>Dark</<td>Yes< <td>Bo</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
다음 테이블은 테이블 색상 클래스의 설명을 나열합니다:
| 클래스 이름 | 설명 |
|---|---|
| .table-primary | 파랑: 중요한 작업을 나타냅니다 |
| .table-success | 녹색: 실행할 수 있는 작업을 나타냅니다 |
| .table-danger | 빨강: 위험한 작업을 나타냅니다 |
| .table-info | 연한 파랑: 내용이 변경되었음을 나타냅니다 |
| .table-warning | 오렌지: 주의해야 할 작업을 나타냅니다 |
| .table-active | 회색: 마우스 오버 효과에 사용됩니다 |
| .table-secondary | 회색: 내용이 중요하지 않음을 나타냅니다 |
| .table-light | 약간의 회색, 테이블 행의 배경으로 사용될 수 있습니다 |
| .table-dark | 빛그레이, 테이블 행의 배경으로 사용될 수 있습니다 |
Bootstrap v4.0.0-beta.2 중 .thead-dark 클래스는 헤더에 검은 배경을 추가하는 데 사용됩니다, .thead-light 클래스는 헤더에 회색 배경을 추가하는 데 사용됩니다:
Bootstrap v4.0.0-beta 이 버전에서, .thead-inverse 클래스는 헤더에 검은 배경을 추가하는 데 사용됩니다, .thead-default 클래스는 헤더에 회색 배경을 추가하는 데 사용됩니다。
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>헤더 색상</h2> <p>.thead-dark 클래스는 헤더에 검은 배경을 추가하는 데 사용됩니다, .thead-light 클래스는 헤더에 회색 배경을 추가하는 데 사용됩니다:</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< sm> <thead class="thead-dark"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> sm> <thead class="thead-light"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table-sm 클래스는 내부 여백을 줄여 작은 테이블을 설정하도록 사용됩니다:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>작은 테이블</h2> <p>.table-sm 클래스는 내부 여백을 줄여 작은 테이블을 설정하도록 사용됩니다:</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< <table class="table table-bordered table-responsive <table class="table"> <tbody> <th>#</<th>Example< <th>Firstname</<th>Example< <th>Email</<th>Example< </tr> </th> thead> <tbody> <td>John</<td>Yes< <td>Doe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>Mary</<td>Yes< <td>Moe</<td>Yes< <td>[email protected]</<td>Yes< </tr> <tbody> <td>July</<td>Yes< <td>Dooley</<td>Yes< <td>[email protected]</<td>Yes< </tr> </tbody> </table> </div> </body> </html>테스트 보기 ‹/›
.table-responsive 클래스는 화면 너비가 992px 면 수평 스크롤을 생성합니다. 시각적 영역 너비가 992px 면 다른 효과를 표시합니다（스크롤이 없음）:
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>대응형 테이블</h2> <p>.table-responsive 클래스는 화면 너비가 992px 면 수평 스크롤을 생성합니다. 시각적 영역 너비가 992px 면 다른 효과를 표시합니다（스크롤이 없음）:</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< p>-responsive"> sm> <table class="table"> <tbody> <thead>/<th>Example< <th>#</<th>Example< <th>Firstname</<th>Example< <th>Lastname</<th>Example< <th>Age</<th>Example< <th>City</<th>Example< <th>Country</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< </tr> </th> thead> <tbody> <td>Pitt<1</<td>Yes< <tr>/<td>Yes< <td>Anna</<td>Yes< <td>Pitt<35</<td>Yes< <td></<td>Yes< <td>New York</<td>Yes< <td>USA</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< </tr> </tbody> </table> </div> </div> </body> </html>테스트 보기 ‹/›
다음 클래스를 사용하여 특정 화면 너비에서 스크롤을 표시할 수 있습니다：
| 클래스 이름 | 화면 너비 |
|---|---|
| .table-<div class="table-sm | < 576px |
| .table-<div class="table-md | < 768px |
| .table-<div class="table-lg | < 992px |
| .table-<div class="table-xl | < 1200px |
<!DOCTYPE html> <html> <head> <title>Bootstrap 예제</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>대응형 테이블</h2> <p>.table-<div class="table-sm 类用于创建响应式表格，在屏幕宽度小于 576sm 클래스는 반응형 테이블을 생성하며, 화면 너비가/<p>브라우저 크기를 조정하여 효과를 확인하십시오.< px 시 수평 스크롤 표시됩니다.</<p>브라우저 크기를 조정하여 효과를 확인하십시오.< p>-<div class="table-responsive sm> <table class="table"> <tbody> <thead>/<th>Example< <th>#</<th>Example< <th>Firstname</<th>Example< <th>Lastname</<th>Example< <th>Age</<th>Example< <th>City</<th>Example< <th>Country</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< <th>Sex</<th>Example< </tr> </th> thead> <tbody> <td>Pitt<1</<td>Yes< <tr>/<td>Yes< <td>Anna</<td>Yes< <td>Pitt<35</<td>Yes< <td></<td>Yes< <td>New York</<td>Yes< <td>USA</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< <td>Female</<td>Yes< </tr> </tbody> </table> </div> </div> </body> </html>테스트 보기 ‹/›