부트스트랩 (5) 테이블

Frameworks/Bootstrap

부트스트랩 (5) 테이블

coding-restaurant 2019. 7. 5. 09:17

728x90

기본 테이블

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
        <div class="container">
            <h2>Basic Table</h2>
            <h3><code>.table</code></h3>            
            <table class="table">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
</body>
</html>

줄무늬 테이블

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
        <div class="container">
            <h2>Basic Table</h2>
            <h3><code>.table</code></h3>            
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Doe</td>
                  <td>john@example.com</td>
                </tr>
                <tr>
                  <td>Mary</td>
                  <td>Moe</td>
                  <td>mary@example.com</td>
                </tr>
                <tr>
                  <td>July</td>
                  <td>Dooley</td>
                  <td>july@example.com</td>
                </tr>
              </tbody>
            </table>
          </div>
</body>
</html>

게시판 Pagination : 페이지 이동 링크

 <nav>
      <ul class="pagination justify-content-center">
         <li class="page-item"><a class="page-link" href="">이전</a></li>
         <li class="page-item"><a class="page-link" href="">1</a></li>
         <li class="page-item"><a class="page-link" href="">2</a></li>
         <li class="page-item"><a class="page-link" href="">3</a></li>
         <li class="page-item"><a class="page-link" href="">다음</a></li>
      </ul>
 </nav>

실습하기 : 부트스트랩으로 간편한 게시판 모양 만들기

.table-striped

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
        <div class="container">
            <h2>게시판</h2>      
            <table class="table">
		<!--<table class="table table-striped table-hover">-->
              <thead>
                <tr>
                  <th>번호</th>
                  <th>제목</th>
                  <th>작성자</th>
                  <th>날짜</th>
                  <th>조회수</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>98</td>
                  <td>누가 부트스트랩 공부한다면서요?</td>
                  <td>존 김</td>
                  <td>2019.07.05</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>100</td>
                  <td>꺼진불도 다시보자</td>
                  <td>샘 표</td>
                  <td>2019.07.04</td>
                  <td>2</td>
                </tr>
                <tr>
              </tbody>
            </table>
          </div>
</body>
</html>

.pagination

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <div class="container">
        <h2>게시판</h2>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>날짜</th>
                    <th>조회수</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>98</td>
                    <td>누가 부트스트랩 공부한다면서요?</td>
                    <td>존 김</td>
                    <td>2019.07.05</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>꺼진불도 다시보자</td>
                    <td>샘 표</td>
                    <td>2019.07.05</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>101</td>
                    <td>악마의 음료 최고 레시피는?</td>
                    <td>강잔디</td>
                    <td>2019.07.05</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>102</td>
                    <td>샐러드 최대 몇접시</td>
                    <td>섭웨이</td>
                    <td>2019.07.05</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <nav>
            <ul class="pagination justify-content-center">
              <li class="page-item"><a class="page-link" href="">이전</a></li>
              <li class="page-item"><a class="page-link" href="">1</a></li>
              <li class="page-item"><a class="page-link" href="">2</a></li>
              <li class="page-item"><a class="page-link" href="">3</a></li>
              <li class="page-item"><a class="page-link" href="">다음</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

.table-dark .thead-dark

<table class="table table-dark table-hover">

 <thead>
                <tr class="thead-light">  <!-- thead-dark -->
                    <th>번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>날짜</th>
                    <th>조회수</th>
                </tr>
            </thead>

이전 부트스트랩 내용

부트스트랩 (1) 유래와 정의, 설치하기

트위터에서 시작된 제이쿼리 기반의 오픈 소스 웹프레임워크. 시작은 디자이너 하나와 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다. 트위터에서 사용하는 각종 레이아웃, 버튼,..

coding-restaurant.tistory.com

부트스트랩 (2) 텍스트 서식(Typography)과 색(Colors)

html태그와 조금 형식과 디자인이 다르다. 글자 서식 (Typohography)의 기본세팅은 폰트 사이즈 (16px), line-height 1.5em, font-weight 400이다. ? em : 현재 폰트의 배수 ? rem: 기본폰트(16px) 의 배수이다...

coding-restaurant.tistory.com

부트스트랩 (3) 반응형 그리드

부트스트랩 클래스 container vs. container-fluid 화면 사이즈가 모바일 사이즈로 가면 container 클래스는 container-fluid 처럼 변한다. 부트스트랩의 클래스 container 안에 다른 container 클래스를 사용할..

coding-restaurant.tistory.com

부트스트랩 (4) 마진, 패딩, 플렉스

coding-restaurant.tistory.com

728x90

저작자표시 비영리 변경금지 (새창열림)