table style

기본 6가지의 테이블 스타일이 정의되어 있으며 취향에 맞게 추가,변경할 수 있습니다.

table-1

table-2

table-3

table-4

table-5

table-6

table-1

Markup

<table class="table-1">
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    ...
    ...
    ...
</table>

설명

table태그에 table-1 클래스를 추가하면 table-style-1이 적용됩니다.

결과화면 소스보기

타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

table-2

Markup

<table class="table-2">
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    ...
    ...
    ...
</table>

설명

table태그에 table-2 클래스를 추가하면 table-style-2가 적용됩니다.

결과화면 소스보기

타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

table-3

Markup

<table class="table-3">
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    ...
    ...
    ...
</table>

설명

table태그에 table-3 클래스를 추가하면 table-style-3이 적용됩니다.

결과화면 소스보기

타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

table-4

Markup

<table class="table-4">
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    ...
    ...
    ...
</table>

설명

table태그에 table-4 클래스를 추가하면 table-style-4가 적용됩니다.

결과화면 소스보기

타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

table-5

Markup

<table class="table-5">
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    ...
    ...
    ...
</table>

설명

table태그에 table-5 클래스를 추가하면 table-style-5가 적용됩니다.

결과화면 소스보기

타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

table-6

Markup

<table class="table-6">
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
    ...
    ...
    ...
</table>

설명

table태그에 table-6 클래스를 추가하면 table-style-6이 적용됩니다.

결과화면 소스보기

타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

지원 브라우저

Chrome Safari Edge Firefox IE6~11

table-1

markup

table-1을 활용한 예제 


<table summary="" class="table-1">
    <caption></caption>
    <colgroup>
        <col width="">
        <col width="">
        <col width="">
        <col width="">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>		
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tfoot>
</table>

table-2

markup

table-2를 활용한 예제 


<table summary="" class="table-2">
    <caption></caption>
    <colgroup>
        <col width="">
        <col width="">
        <col width="">
        <col width="">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>		
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tfoot>
</table>

table-3

markup

talbe-3을 활용한 예제 


<table summary="" class="table-3">
    <caption></caption>
    <colgroup>
        <col width="">
        <col width="">
        <col width="">
        <col width="">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>		
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tfoot>
</table>

table-4

markup

table-4를 활용한 예제 


<table summary="" class="table-4">
    <caption></caption>
    <colgroup>
        <col width="">
        <col width="">
        <col width="">
        <col width="">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>		
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tfoot>
</table>

table-5

Markup

table-5를 활용한 예제 


<table summary="" class="table-5">
    <caption></caption>
    <colgroup>
        <col width="">
        <col width="">
        <col width="">
        <col width="">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>		
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tfoot>
</table>

table-6

Markup

table-6를 활용한 예제 


<table summary="" class="table-6">
    <caption></caption>
    <colgroup>
        <col width="">
        <col width="">
        <col width="">
        <col width="">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
            <th scope="col">타이틀</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>	
        </tr>		
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">내용</th>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tfoot>
</table>

spacing-1

예제소스

spacing-1을 활용한 예제 


<ul class="float2N-3 e-float2N-1 spacing-1">
    <li>
        <div class="padding-height-1">
            <h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
            <p class="justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>	
            <p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
        </div>
    </li>

    <li>
        <div class="padding-height-1">
            <h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
            <p class="justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>	
            <p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
        </div>
    </li>

    <li>
        <div class="padding-height-1">
            <h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
            <p class="justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>	
            <p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
        </div>
    </li>
</ul>
결과화면