JAY DESIGN

기본테이블

Table head 1	Table head 2	Table head 3	Table head 4	Table head 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5

<table class="table">
    <tr>
        <th>Table head 1</th>
        <th>Table head 2</th>
        <th>Table head 3</th>
        <th>Table head 4</th>
        <th>Table head 5</th>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
        <td>Table text 5</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
        <td>Table text 5</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
        <td>Table text 5</td>
    </tr>
</table>

테이블 타입 1

Table head 1	Table head 2	Table head 3	Table head 4
Table text 1	Table text 2	Table text 3	Table text 4
Table text 1	Table text 2	Table text 3	Table text 4
Table text 1	Table text 2	Table text 3	Table text 4

<table class="table--1">
    <tr>
        <th>Table head 1</th>
        <th>Table head 2</th>
        <th>Table head 3</th>
        <th>Table head 4</th>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
    </tr>
</table>

테이블 타입 2

Table head 1	Table head 2	Table head 3
Table text 1	Table text 2	Table text 3
Table text 1	Table text 2	Table text 3
Table text 1	Table text 2	Table text 3

<table class="table--2">
    <colgroup>
        <col style="width:20%;">
        <col style="width:auto;">
        <col style="width:30%;">
    </colgroup>
    <tr>
        <th>Table head 1</th>
        <th>Table head 2</th>
        <th>Table head 3</th>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
    </tr>
</table>

테이블 라인

<table>에 table--split 클래스를 추가하면 각 셀의 우측라인이 생긴다.

Table head 1	Table head 2	Table head 3	Table head 4	Table head 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5
Table text 1	Table text 2	Table text 3	Table text 4	Table text 5

<table class="table table--split">
    <tr>
        <th>Table head 1</th>
        <th>Table head 2</th>
        <th>Table head 3</th>
        <th>Table head 4</th>
        <th>Table head 5</th>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
        <td>Table text 5</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
        <td>Table text 5</td>
    </tr>
    <tr>
        <td>Table text 1</td>
        <td>Table text 2</td>
        <td>Table text 3</td>
        <td>Table text 4</td>
        <td>Table text 5</td>
    </tr>
</table>