문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Tables======
<WRAP left notice 80%>
  * description : Bootstrap Tables
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-24
</WRAP>
<WRAP clear></WRAP>
\\
=====Bootstrap Basic Table=====
기본 부트스트랩 테이블에는 얇은 패딩과 수평 구분선만 있습니다.\\
\\
''.table'' 클래스는 테이블에 기본 스타일을 추가합니다.\\
\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Basic Table</h2>
        <p>The <strong>.table class</strong> adds basic styling (light padding and only horizontal dividers) to a table:</p>
        <table class="table">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</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>
\\
=====Striped Rows=====
''.table-striped'' 클래스는 테이블에 얼룩말 줄무늬(zebra-stripes)를 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Basic Table</h2>
        <p>The <strong>.table class</strong> adds basic styling (light padding and only horizontal dividers) to a table:</p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</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>
\\
=====Bordered Table=====
''.table-bordered'' 테이블과 셀의 모든 면에 테두리(borders)를 추가합니다.\\
====예제====
<HTML>
<body>
    <div class="container">
        <h2>Bordered Table</h2>
        <p>The <strong>.table-bordered class adds borders to a table:</strong></p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</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>
\\
=====Hover Rows=====
''.table-hover'' 클래스는 테이블의 가로 행에 호버 효과(회색 배경색)를 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Hover Rows</h2>
        <p><strong>The .table-hover class</strong> enables a hover state on table rows:</p>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@examle.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>
\\
=====Condensed Table=====
''.table-condensed'' 클래스는 셀 패딩을 절반으로 줄여 테이블을 더 간결하게 만듭니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Condensed Table</h2>
        <p><strong>The .table-condensed class</strong> makes a table more compact by cutting cell padding in half:</p>
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@examle.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>
\\
=====Contextual Classes=====
컨텍스추얼 클래스는 테이블 가로 행(''<tr>'') 또는 테이블 셀(''<td>'')에 색상을 지정할 수 있습니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Contextual Classes</h2>
        <p>Contextual Classes can be used to color table rows or table cells. The classes that can be used are: <strong>.active, .success, .info, .warning, and .danger.</strong></p>
        <table class="table">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Default</td>
                    <td>Defaultson</td>
                    <td>def@somemail.com</td>
                </tr>
                <tr class="success">
                    <td>Success</td>
                    <td>Doe</td>
                    <td>john@somemail.com</td>
                </tr>
                <tr class="danger">
                    <td>Danger</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
                <tr class="info">
                    <td>Info</td>
                    <td>Dooley</td>
                    <td>july@wxample.com</td>
                </tr>
                <tr class="warning">
                    <td>Warning</td>
                    <td>Refs</td>
                    <td>bo@example.com</td>
                </tr>
                <tr class="active">
                    <td>Active</td>
                    <td>Activeson</td>
                    <td>act@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</HTML>
\\
사용할 수 있는 컨텍스추얼 클래스는 아래와 같습니다.\\
| Class         | Description                      |
^ ''.active''   ^ 테이블 가로 행이나 테이블 셀에 호버 색상을 적용합니다.  ^
| ''.success''  | 성공 또는 긍정적인 작업을 나타냅니다.            |
^ ''.info''     ^ 중립적 정보 변경 또는 작업을 나타냅니다.          ^
| ''.warning''  | 주의가 필요한 경고를 나타냅니다.               |
^ ''.danger''   ^ 위험하거나 잠재적으로 부정적인 작업을 나타냅니다.      ^
\\
=====Responsive Tables=====
''.table-responsive'' 클래스는 반응형 테이블을 만듭니다.\\
그러면 테이블이 소형 장치(768px 미만) 가로로 스크롤됩니다.\\
너비가 768px보다 큰 화면에서 볼 때는 차이가 없습니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Basic Tables</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <h2>Table</h2>
        <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no
            difference:</p>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>lsdt Name</th>
                        <th>Age</th>
                        <th>City</th>
                        <th>country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anna</td>
                        <td>Pitt</td>
                        <td>35</td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>
</HTML> 






{{tag>오션 Bootstrap Tables}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
