skip navigation

테이블(가로형)

  • - 복잡한 테이블(thead, tbody에 복수의 th가 있는 경우)의 경우 scope와 id/headers를 이용합니다.

  • - headers적용 시 논리적인 순서에 맞게 id값을 지정합니다.

  • - id명은 프로젝트에 따라 적절하게 사용합니다.

  • - 입력 테이블 caption 가이드 : 블라블라 입력 테이블 입니다. 나열 순으로 나옵니다.

  • - 정보 테이블 caption 가이드 : 블라블라 정보 테이블 입니다. 나열 순으로 나옵니다.

  • - 리스트 테이블 caption 가이드 : 블라블라 리스트 테이블 입니다. 나열 순으로 나옵니다.

기본

[VIEW]

  • - summary의 내용을 caption에 적용

테이블 제목, 설명글
제목 제목 제목 제목
내용 내용 내용 내용
내용 내용 내용 내용
[CODE]
<div class="tb_row"> <table> <caption>테이블 제목, 설명글</caption> <colgroup> <col style="width:25%"> <col style="width:25%"> <col style="width:25%"> <col style=""> </colgroup> <thead> <tr> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col">제목</th> </tr> </thead> <tbody> <tr> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> <tr> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tbody> </table> </div>

상/하단 단위, 검색 등이 있는 경우

[VIEW]
(단위 : 원)
테이블 제목, 설명글
제목 제목 제목 제목
내용 내용 내용 내용
내용 내용 내용 내용
(2013년 12월 31일 현재)
[CODE]
<div class="tb_row"> <div class="top_info">(단위 : 원)</div> <table> <caption>테이블 제목, 설명글</caption> <colgroup> <col style="width:25%"> <col style="width:25%"> <col style="width:25%"> <col style=""> </colgroup> <thead> <tr> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col">제목</th> </tr> </thead> <tbody> <tr> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> <tr> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tbody> </table> <div class="btm_info">(2013년 12월 31일 현재)</div> </div>

tfoot 존재

[VIEW]
테이블 제목, 설명글
제목 제목 제목 제목
제목 내용 내용 내용
내용 내용 내용 내용
[CODE]
<div class="tb_row"> <table> <caption>테이블 제목, 설명글</caption> <colgroup> <col style="width:25%"> <col style="width:25%"> <col style="width:25%"> <col style=""> </colgroup> <thead> <tr> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col">제목</th> <th scope="col">제목</th> </tr> </thead> <tfoot> <tr> <th scope="row">제목</th> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tfoot> <tbody> <tr> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tbody> </table> </div>

tbody에 th 존재

[VIEW]
테이블 제목, 설명글
제목 제목 제목 제목
제목 내용 내용 내용
내용 내용 내용
[CODE]
<div class="tb_row"> <table> <caption>테이블 제목, 설명글</caption> <colgroup> <col style="width:25%"> <col style="width:25%"> <col style="width:25%"> <col style=""> </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" rowspan="2">제목</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> <tr> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tbody> </table> </div>

복합 테이블 : id/headers연결

[VIEW]
테이블 제목, 설명글
제목 제목 제목
제목 제목
제목 내용 내용 내용
[CODE]
<div class="tb_row"> <table> <caption>테이블 제목, 설명글</caption> <colgroup> <col style="width:25%"> <col style="width:25%"> <col style="width:25%"> <col style=""> </colgroup> <thead> <tr> <th rowspan="2" scope="col" id="tb_id1">제목</th> <th colspan="2" scope="col" id="tb_id2">제목</th> <th rowspan="2" scope="col" id="tb_id3">제목</th> </tr> <tr> <th scope="col" id="tb_id2-1">제목</th> <th scope="col" id="tb_id2-2">제목</th> </tr> </thead> <tbody> <tr> <th scope="row" id="tb_id4">제목</td> <td headers="tb_id1 tb_id4 tb_id2 tb_id2-1">내용</td> <td headers="tb_id1 tb_id4 tb_id2 tb_id2-2">내용</td> <td headers="tb_id1 tb_id4 tb_id3">내용</td> </tr> </tbody> </table> </div>