1. <div class="Grid">로 내용을 감싼다. --> "Grid"가 부모 속성값 역할을 한다. (** Grid 유형을 결정하는 class)
1) Table - MainButton - Page 순서대로 <div class="Gird">안에 포함시킨다.
2) 내용에 관련된 기능버튼(Main Type)과 "Paging"은 <div class="Grid">안에 넣어 스타일을 상속받도록 한다.
ex) css file: .Grid .MainButton {...}
2. 가장 좌측의 TD class="First", 가장 우측의 TD class="Last", 그 외의 TD class="Center"
1) First와 Last는 <tr>에서 한번씩만 사용하고 나머지 컬럼에는 Center를 사용한다.
2) 컬럼이 2개인 경우 First와 Last만 사용하고 1개인 경우 '위치 속성(First,Center,Last)'을 사용하지 않는다.
3. Grid Column의 정렬 및 Width 값은 직접 입력
1) 정렬 : <td class="Center" style="text-align:center;"> - td Style(=ItemStyle) 사용.
2) Width : <col>값을 사용 (<col>사용이 어려울 경우 직접입력 : style="width:값;") - col은 컬럼 수 만큼 생성.
<colgroup>
<col width="값"/><col width="값"/>...
</colgroup>
3) %를 사용한 col width의 합이 100%가 되도록한다. (픽셀이나 class를 사용한 col은 합할 필요없다.)
<colgroup>
<col width="50px"/><col width="50%"/><col width="50%"/>
</colgroup>
4. 테이블(TD) 안에 들어가는 버튼은 컬럼내 버튼(Sub Type)이나 아이콘 버튼을 사용한다.
직관적으로 이해가 가능한 버튼은 아이콘 버튼 사용(권장)하고 그외에는 컬럼내 버튼(Type="Sub")을 사용한다.
ex) Type="Icon" : 저장, 삭제 등.
Type="Sub" : 수신자 추가, 부서검색 등.
5. 텍스트 외의 아이템(Input Type[chekbox,radio,textbox등], 버튼 및 아이콘) 사용시에는 기존의 class에 "Inputbox"를 추가.
ex. <td class="First Inputbox"><input type="checkbox"... (Inputbox는 해당 td의 상하 여백을 다른 컬럼의 td와 맞춘다)
6. 행(tr, RowStyle) 스타일
1) 선택된 행의 스타일은 class="ItemSelected"를 사용한다.
2) 1개 이상의 입력폼을 사용하는 행의 스타일은 class="ItemInput"을 사용한다.
7. 'rowspan'을 사용할 경우 class="Grid"가 아닌 class="StatusGrid"를 사용한다.
8. 데이터 없는 경우(모든 Grid에 공용)
<td colspan="00" class="CommentNodata">등록된 데이터가 없습니다.</td>