- Home
- 테마 컴포넌트
- PC
- Table
Table
- 표 사용 예제를 제공합니다.
타입
기본형(보기)
기본형은 가로형 테이블 타입으로 제목이 좌측에 있습니다. td 내용란에 입력폼 태그가 없을 경우 사용합니다.
xxxxxxxxxx1
<div class="ec-base-table">2
<table border="1" summary="">3
<caption>제목</caption>4
<colgroup>5
<col style="width:20%;" />6
<col style="width:30%;" />7
<col style="width:20%;" />8
<col style="width:30%;" />9
</colgroup>10
<tbody>11
<tr>12
<th scope="row">제목</th>13
<td>내용</td>14
<th scope="row">제목<img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/ico_required.gif" alt="필수" /></th>15
<td>내용</td>16
</tr>17
<tr>18
<td colspan="4">colspan="4" (셀 병합)</td>19
</tr>20
<tr>21
<th scope="row">제목</th>22
<td colspan="3">내용</td>23
</tr>24
<tr>25
<td colspan="4" class="clear">colspan="4" class="clear" (clear: 셀병합시 여백/테두리를 기본값으로 변경할때 사용</td>26
</tr>27
</tbody>28
</table>29
</div>입력형
테이블 내에 폼 태그가 있는 경우, ec-base-table 모듈에 typeWrite 클래스를 추가합니다.
xxxxxxxxxx1
<div class="ec-base-table typeWrite">2
<table summary="" border="1">3
<caption>제목</caption>4
<colgroup>5
<col style="width:20%;" />6
<col style="width:auto;" />7
</colgroup>8
<tbody>9
<tr>10
<th scope="row">ID <img src="//img.echosting.cafe24.com/skin/base_ko_KR/member/ico_required.gif" alt="필수" /></th>11
<td><input type="text" /> 영문 소문자/숫자, 4~16자</td>12
</tr>13
<tr>14
<th scope="row">추천인 ID</th>15
<td><input type="text" /></td>16
</tr>17
<tr>18
<th scope="row">내용</th>19
<td><textarea cols="30" rows="3" style="width:90%">목록형
목록형은 세로형 테이블 타입으로 제목이 상단에 있습니다.
ec-base-table 모듈에 typeList 클래스를 추가합니다.
xxxxxxxxxx1
<div class="ec-base-table typeList">2
<table border="1" summary="">3
<caption>테이블명</caption>4
<colgroup>5
<col style="width:70px;" />6
<col style="width:145px;" />7
<col style="width:auto;" />8
</colgroup>9
<thead>10
<tr>11
<th scope="col">제목</th>12
<th scope="col">제목</th>13
<th scope="col">제목</th>14
</tr>15
</thead>16
<tbody class="center">17
<tr>18
<td>내용</td>19
<td>내용</td>20
<td>내용</td>21
</tr>22
</tbody>23
</table>24
</div>스크롤형
세로형 테이블에서 스크롤이 필요한 경우, 제목과 내용을 각각의 table로 나눈 뒤,
제목 테이블의 tbody에는 head 클래스를 추가하고, 스크롤 영역인 내용 테이블에는 scroll 클래스로 감싸줍니다.
xxxxxxxxxx1
<!--스크롤: 기본형-->2
<div class="ec-base-table typeList">3
<table border="1" summary="">4
<caption>테이블 제목</caption>5
<colgroup>6
<col style="width:100px;" />7
<col style="width:auto;" />8
<col style="width:128px;" />9
</colgroup>10
<tbody class="head">11
<tr>12
<td scope="col">이미지</td>13
<td scope="col">제품 정보</td>14
<td scope="col">판매 가격</td>15
</tr>16
</tbody>17
</table>18
<div class="scroll">19
<table border="1" summary="">20
<caption>테이블 제목</caption>21
<colgroup>22
<col style="width:100px;" />23
<col style="width:auto;" />24
<col style="width:111px;" />25
</colgroup>26
<tbody class="center">27
<tr>28
<td><a href="#none"><img src="$상품 이미지 경로" alt="" /></a></td>29
<td class="left"><p><a href="#none">추가 구성 상품</a></p></td>30
<td><strong>20,000원</strong></td>31
</tr>32
<tr>33
<td><a href="#none"><img src="$표 제목" alt="" /></a></td>34
<td class="left"><p><a href="#none">추가 구성 상품</a></p></td>35
<td><strong>20,000원</strong></td>36
</tr>37
<tr>38
<td><a href="#none"><img src="$상품 이미지 경로" alt="" /></a></td>39
<td class="left"><p><a href="#none">추가 구성 상품</a></p></td>40
<td><strong>20,000원</strong></td>41
</tr>42
</tbody>43
</table>44
</div>45
</div>46
<!--스크롤: 검색 결과 미노출-->47
<div class="ec-base-table typeList">48
<table border="1" summary="">49
<caption>테이블 제목</caption>50
<colgroup>51
<col style="width:100px;" />52
<col style="width:auto;" />53
<col style="width:128px;" />54
</colgroup>55
<tbody class="head">56
<tr>57
<td scope="col">이미지</td>58
<td scope="col">제품 정보</td>59
<td scope="col">판매 가격</td>60
</tr>61
</tbody>62
</table>63
<div class="scroll">64
<p class="message ">검색결과가 없습니다.</p>65
</div>66
</div>제목 미노출형
thead 제목 부분을 미노출할 경우, 를 추가합니다.
xxxxxxxxxx1
<div class="ec-base-table typeList">2
<table border="1" summary="">3
<caption>테이블명</caption>4
<colgroup>5
<col style="width:auto;" />6
<col style="width:90px;" />7
</colgroup>8
<thead class="blind">9
<tr>10
<th scope="col">제목</th>11
<th scope="col">작성일</th>12
</tr>13
</thead>14
<tbody class="center">15
<tr>16
<td class="left"><a href="#none">제목</a></td>17
<td>2015-05-04</td>18
</tr>19
<tr>20
<td class="left"><a href="#none">제목</a></td>21
<td>2015-10-13</td>22
</tr>23
<tr>24
<td class="left"><a href="#none">제목</a></td>25
<td>2015-10-13</td>26
</tr>27
</tbody>28
</table>29
</div>정렬
셀 정렬
table 안의 콘텐츠가 정렬이 필요한 경우,
left/ center/ right/ middle 클래스를 추가하여 정렬시킬 수 있습니다.
xxxxxxxxxx1
<!--가로형 정렬-->2
<div class="ec-base-table gBorder">3
<table border="1" summary="">4
<caption>테이블 제목</caption>5
<colgroup>6
<col style="width:20%;" />7
<col style="width:auto;" />8
<col style="width:26%;" />9
<col style="width:26%;" />10
</colgroup>11
<tbody class="left">12
<tr>13
<th scope="row"><span class="txtWarn">tbody left</span></th>14
<td>-</td>15
<td class="center">center</td>16
<td class="right">right</td>17
</tr>18
</tbody>19
<tbody class="center">20
<tr>21
<th scope="row"><span class="txtWarn">tbody center</span></th>22
<td class="left">left</td>23
<td>-</td>24
<td class="right">right</td>25
</tr>26
</tbody>27
<tbody class="right">28
<tr>29
<th scope="row"><span class="txtWarn">tbody right</span></th>30
<td class="left">left</td>31
<td class="center">center</td>32
<td>-</td>33
</tr>34
</tbody>35
<tbody class="top">36
<tr>37
<th scope="row"><span class="txtWarn">tbody top</span><br/>top<br/>top</th>38
<td class="middle">middle</td>39
<td class="top">top</td>40
<td>-</td>41
</tr>42
</tbody>43
</table>44
</div>45
<!-- 세로형 정렬-->46
<div class="ec-base-table typeList gBorder">47
<table border="1" summary="">48
<caption>테이블명</caption>49
<colgroup>50
<col style="width:20%;" />51
<col style="width:auto;" />52
<col style="width:26%;" />53
<col style="width:26%;" />54
</colgroup>55
<thead>56
<tr>57
<th scope="col">제목</th>58
<th scope="col">제목</th>59
<th scope="col">제목</th>60
<th scope="col">제목</th>61
</tr>62
</thead>63
<tbody class="left">64
<tr>65
<td><span class="txtWarn">tbody left</span></td>66
<td class="center">center</td>67
<td class="right">right</td>68
<td>-</td>69
</tr>70
</tbody>71
<tbody class="center">72
<tr>73
<td><span class="txtWarn">tbody center</span></td>74
<td class="left">left</td>75
<td class="right">right</td>76
<td>-</td>77
</tr>78
</tbody>79
<tbody class="right">80
<tr>81
<td><span class="txtWarn">tbody right</span></td>82
<td class="left">left</td>83
<td class="center">center</td>84
<td>-</td>85
</tr>86
</tbody>87
<tbody class="top">88
<tr>89
<td><span class="txtWarn">tbody top</span><br/>top<br/>top</td>90
<td class="middle">middle</td>91
<td class="top">top</td>92
<td>-</td>93
</tr>94
</tbody>95
</table>96
</div>활용
셀 고정형
col 태그의 넓이에 따라 셀의 고정이 필요한 경우, gLayoutFixed 클래스를 추가합니다.
xxxxxxxxxx1
<div class="ec-base-table gLayoutFixed">2
<table border="1" summary="">3
<caption>테이블명</caption>4
<colgroup>5
<col style="width:110px;" />6
<col style="width:auto;" />7
<col style="width:110px;" />8
<col style="width:auto;" />9
</colgroup>10
<tbody>11
<tr>12
<th scope="row">제목</th>13
<td>긴 내용</td>14
<th scope="row">제목</th>15
<td>내용</td>16
</tr>17
</tbody>18
</table>19
</div>셀 테두리형
셀 전체에 테두리가 있는 디자인으로, 가로 / 세로 테이블에 모두 적용이 가능합니다.
xxxxxxxxxx1
<!--가로 + 셀 테두리형-->2
<div class="ec-base-table gBorder">3
<table border="1" summary="">4
<caption>테이블명</caption>5
<colgroup>6
<col style="width:125px;" />7
<col style="width:auto;" />8
<col style="width:auto;" />9
<col style="width:auto;" />10
<col style="width:auto;" />11
12
</colgroup>13
<tbody>14
<tr>15
<th scope="row">제목</th>16
<td class="center">내용</td>17
<td class="center">내용</td>18
<td class="center">내용</td>19
<td class="center">내용</td>20
</tr>21
<tr>22
<th scope="row">제목</th>23
<td>내용</td>24
<td>내용</td>25
<td>내용</td>26
<td>내용</td>27
</tr>28
</tbody>29
</table>30
</div>31
<!--세로 + 셀 테두리형-->32
<div class="ec-base-table typeList gBorder">33
<table border="1" summary="">34
<caption>테이블명</caption>35
<colgroup>36
<col style="width:70px;" />37
<col style="width:145px;" />38
<col style="width:auto;" />39
</colgroup>40
<thead>41
<tr>42
<th scope="col">제목</th>43
<th scope="col">제목</th>44
<th scope="col">제목</th>45
</tr>46
</thead>47
<tbody class="center">48
<tr>49
<td>내용</td>50
<td>내용</td>51
<td>내용</td>52
</tr>53
</tbody>54
</table>55
</div>라인형
제목 미노출형에서 gLine 클래스를 추가하면 라인형 테이블로 사용할 수 있습니다.
xxxxxxxxxx1
<div class="ec-base-table typeList gLine">2
<table border="1" summary="">3
<caption>테이블명</caption>4
<colgroup>5
<col style="width:auto;" />6
<col style="width:90px;" />7
</colgroup>8
<thead class="blind">9
<tr>10
<th scope="col">제목</th>11
<th scope="col">작성일</th>12
</tr>13
</thead>14
<tbody class="center">15
<tr>16
<td class="left"><a href="#none">제목</a></td>17
<td>2015-05-04</td>18
</tr>19
<tr>20
<td class="left"><a href="#none">제목</a></td>21
<td>2015-10-13</td>22
</tr>23
<tr>24
<td class="left"><a href="#none">제목</a></td>25
<td>2015-10-13</td>26
</tr>27
</tbody>28
</table>29
</div>typeClear형
테이블 전체에 테두리/배경색이 없는 디자인으로, 전체 테이블에 모두 적용 가능합니다.
xxxxxxxxxx1
<div class="ec-base-table typeClear">2
<table summary="" border="1">3
<caption>테이블명</caption>4
<colgroup>5
<col style="width:90px;" />6
<col style="width:auto;" />7
</colgroup>8
<tbody>9
<tr>10
<th scope="row">상품명</th>11
<td>샘플9</td>12
</tr>13
<tr>14
<th scope="row">제조사</th>15
<td>자체 제작</td>16
</tr>17
<tr>18
<th scope="row">원산지</th>19
<td>국내</td>20
</tr>21
</tbody>22
</table>23
</div>내역 없음
내역이 없는 경우, thead 태그를 유지하고 table 태그와 형제 레벨로 "message"클래스 영역을 추가합니다.
xxxxxxxxxx1
<div class="ec-base-table typeList">2
<table border="1" summary="">3
<caption>테이블명</caption>4
<colgroup>5
<col style="width:27px;" />6
<col style="width:200px;" />7
<col style="width:auto;" />8
<col style="width:auto;" />9
<col style="width:110px;" />10
</colgroup>11
<thead>12
<tr>13
<th scope="col"><input type="checkbox" /></th>14
<th scope="col">상품 정보</th>15
<th scope="col">판매가격</th>16
<th scope="col">합계</th>17
<th scope="col">선택</th>18
</tr>19
</thead>20
<tbody class="center displaynone">21
<tr>22
<td>-</td>23
<td>내용</td>24
<td>내용</td>25
<td>내용</td>26
<td>내용</td>27
</tr>28
</tbody>29
</table>30
<p class="message">(thead유지+tbody displaynone+table형제레벨)주문 내역이 없습니다.</p>31
</div>팝업 + 테이블
기본 테이블보다 팝업내의 테이블 셀 여백이 좁게 처리되어 있습니다.
xxxxxxxxxx1
<div module="모듈명" class="ec-base-layer">2
<div class="header">3
<h1>팝업</h1>4
</div>5
<div class="content">6
<div class="ec-base-table typeWrite">7
<table border="1" summary="">8
<caption>테이블 제목</caption>9
<colgroup>10
<col style="width:80px;" />11
<col style="width:auto;" />12
</colgroup>13
<tbody>14
<tr>15
<th scope="row">예금주</th>16
<td><input type="text" style="width:90%;" /></td>17
</tr>18
<tr>19
<th scope="row">금융 기관</th>20
<td>21
<select>22
<option>- 선택 -</option>23
<option>산업은행</option>24
<option>기업은행</option>25
</select>26
</td>27
</tr>28
</tbody>29
</table>30
</div>31
</div>32
<div class="ec-base-button">33
<a href="#none" class="btnSubmit btnNormalFix sizeS" title="확인">확인</a>34
<a href="#none" class="btnNormal btnNormalFix sizeS" title="취소"</a>35
</div>36
<a href="#none" class="close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.png" alt="닫기" /></a>37
</div>다음 문서
이 페이지가 얼마나 도움이 되었나요?
0자 입력 /최대 300자