SPSTRAP Document API

light theme

<table [class="sp--table"] theme="lg-[light]-center-hover" gap="xl" solid="light-even-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Hugues</td>
                                        <td>Hurdis</td>
                                        <td>1995</td>
                                        <td>5130</td>
                                        <td>XL</td>
                                        <td>7:53 PM</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Anna</td>
                                        <td>Jikylls</td>
                                        <td>1994</td>
                                        <td>21754</td>
                                        <td>3XL</td>
                                        <td>12:28 AM</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Mata</td>
                                        <td>Gribbin</td>
                                        <td>2004</td>
                                        <td>22518</td>
                                        <td>XL</td>
                                        <td>4:22 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

gray theme

<table class="sp--table" theme="lg-[gray]-center-hover" gap="xl" solid="light-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

dark theme

<table class="sp--table" theme="lg-[dark]-center-hover" gap="xl" solid="light-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

primary theme

<table class="sp--table" theme="lg-[primary]-center-hover" gap="xl" solid="light-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

primary hover event theme

<table class="sp--table" theme="lg-[primary]-center-hover" gap="xl" solid="primary-bright-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

font size

<table class="sp--table" theme="[xs]-primary-center-hover" gap="lg" solid="light-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

cell space

<table class="sp--table" theme="lg-primary-center-hover" [gap="xs"] solid="light-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

solid type

<table class="sp--table" theme="lg-primary-center-hover" gap="lg" [solid="light-bold-nude"]>
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

even, odd background

<div class="sp--box" fill="justify" vertical="bottom">
                                <ul>
                                    <li>
                                        <div class="sp--title" theme="leftwall" scale="2xl">
                                            <div class="sp--title-inner">
                                                TABLE DATA
                                                <p class="sp--title-subtext">Lorem ipsum dolor sit amet</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn" scale="lg-nude">더보기</a>
                                    </li>
                                </ul>
                                <hr class="sp--hr" space="md" />
                            </div>
                            
                            <table class="sp--table" theme="lg-dark-center" gap="xl" solid="light-[even]-nude">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Denver</td>
                                        <td>Biscomb</td>
                                        <td>2012</td>
                                        <td>6094</td>
                                        <td>3XL</td>
                                        <td>8:06 AM</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Hugues</td>
                                        <td>Hurdis</td>
                                        <td>1995</td>
                                        <td>5130</td>
                                        <td>XL</td>
                                        <td>7:53 PM</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Anna</td>
                                        <td>Jikylls</td>
                                        <td>1994</td>
                                        <td>21754</td>
                                        <td>3XL</td>
                                        <td>12:28 AM</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Mata</td>
                                        <td>Gribbin</td>
                                        <td>2004</td>
                                        <td>22518</td>
                                        <td>XL</td>
                                        <td>4:22 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

responsive design *

<table class="sp--table" theme="lg-dark-center" gap="xl" solid="light" [responsive]="[tablet],[mobile]">
                                <colgroup>
                                    <col style="width:70px" />
                                    <col style="width:150px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                [<thead>]
                                    <tr>
                                        <th></th>           
                                        <th>MON</th>
                                        <th>TUE</th>
                                        <th>WED</th>
                                        <th>THU</th>
                                        <th>FRI</th>
                                        <th>SAT</th>
                                    </tr>
                                [</thead>]
                                [<tbody>]
                                    [<tr>]
                                        [<td label="thead의 첫번째 속성">]1[</td>]                
                                        [<td>]Denver[</td>]           
                                        [<td>]Biscomb[</td>]          
                                        [<td>]2012[</td>]
                                        [<td>]6094[</td>]
                                        [<td>]3XL[</td>]
                                        [<td>]8:06 AM[</td>]
                                    [</tr>]
                                    <tr>
                                        <td>2</td>
                                        <td>Tawnya</td>
                                        <td>Leist</td>
                                        <td>2004</td>
                                        <td>21499</td>
                                        <td>M</td>
                                        <td>5:07 AM</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Hugues</td>
                                        <td>Hurdis</td>
                                        <td>1995</td>
                                        <td>5130</td>
                                        <td>XL</td>
                                        <td>7:53 PM</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Anna</td>
                                        <td>Jikylls</td>
                                        <td>1994</td>
                                        <td>21754</td>
                                        <td>3XL</td>
                                        <td>12:28 AM</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Mata</td>
                                        <td>Gribbin</td>
                                        <td>2004</td>
                                        <td>22518</td>
                                        <td>XL</td>
                                        <td>4:22 AM</td>
                                    </tr>
                                </tbody>                                
                            </table>

Class

name	description
.sp--table	테이블 컨테이너

Attribute

name	description
theme	lg-primary-center-hover 크기 - 색상 - 정렬 - 호버스타일 크기 : xs, sm, md, lg, xl 색상 : light, gray, dark, primary 정렬 : left, center, right 호버 : boolean ( hover or '')
gap	셀 내부의 여백 xs, sm, md, lg, xl
solid	light-bold-nude 색상 - 두께 - 좌우 트임 색상 : light, gray, dark, primary 두께 : boolean ( gray or '' ) 트임 : boolean ( nude or '' )
responsive	tablet or mobile or tablet,mobile 이 옵션은 반응형을 지원하겠다는 설정이다. js에 묶여있으므로, 웹사이트 내부에서만 사용하자.