: 테이블 관련 요소 | ||||||
<table> | - 표가 작성되는 범위 생성. 블록레벨 요소. - 콘텐츠 요소로 <table>을 구성하는 전용태그포함. | |||||
<tr> | - 표의 행 생성 - 블록 요소이나 <th>와 <td>외의 요소를 직접 콘텐츠 요소로 포함 不可. - 반드시 하나 이상의 <td> 또는 <th> 요소를 포함해야 함. - 부모요소는 <table> 또는 <thead>,<tfoot>,<tbody> 의 행 그룹 요소로 제한. | |||||
<th> | - 표의 제목 셀 생성. - 가로 가운데 정렬, 굵은 텍스트효과 적용. - 전용속성 scope을 이용해 연관되는 내용 셀과의 행(<th scope="row">)이나 열(<th scope="col">)을 지정 가능. rowspan 과 colspan 속성을 지정해 행 or 열 방향 칸 병합 가능. | |||||
<td> | - 표의 내용 셀 생성. - 전용속성 header를 사용해 연관되는 제목 셀 지정 가능 : header의 속성값은 연관되는 제목 셀의 id 지정한다. rowspan 과 colspan 속성을 지정해 행 or 열 방향 칸 병합 가능. | |||||
| <table> <tr><th>제목 셀(header cell)</th></tr> <tr><td>내용 셀<data cell)</td></tr> </table> | |||||
<colspan> | 열이 서로 다른 셀 병합 | |||||
<rowspan> | 행이 서로 다른 셀 병합 | |||||
|
| |||||
<caption> | - 표의 제목 : 테이블 내용을 대표하는 제목 삽입. 표제목을 테이블 위에 표시. - <table> 태그에 바로 연이어 작성해야 함. | |||||
<summary> | 테이블 필드의 항목 소개를 통해 테이블의 데이터의 내용을 요약 설명. 화면에는 보이지 않지만 음성 브라우저와 같은 어플리케이션에 접근 可 | |||||
| <table border="1" summary="테이블 내의 데이터 요약“> <caption>테이블 제목</caption> … … … </table> | |||||
<colgroup> | 테이블의 열끼리 논리적인 그룹화. <table>요소나 <caption> 다음에 마크업 | |||||
<col> | 스타일 지정 목적. <colgroup>의 자식 요소 가능. 빈 엘리먼트 | |||||
| : 표의 열에 대한 그룹을 지정하는 요소. 그룹화하려는 열이 하나 이상일 경우 <span> 속성을 사용해 그룹화하려는 열의 개수 지정. | |||||
<table rules="groups"> <colgroup span="2"> <col id="publishing" /> <col id="bookTitle" /> </colgroup> <col id="circulation" /> </table> | ||||||
<thead> <tfoot> <tbody> | - 표의 행 그룹을 지정하는 요소. 블록요소이나 <tr>만 포함 가능. - 작성 순서 : <thead><tfoot><tbody> / 화면표시 순서 :<thead><tbody><tfoot> - <thead>, <tfoot> 요소의 장점 : 인쇄시 여러 장에 출력되는 경우 페이지마다 테이블의 thead, tfoot 정보를 인쇄할 수 있다. 시각장애인에게 모든 데이터를 읽지 않아도 알 수 있게 함. | |||||
<scope> <id> <headers> | sope | 주로 병합되지 않은 단순한 형태의 테이블에 사용 | ||||
id, headers | 좀더 복잡하게 병합된 셀의 경우 사용. <th>요소는 id 속성으로 네이밍, 해당 제목 셀과 연관성 있는 내용 셀에 headers 속성과 id 값을 연결. | |||||
| - scope 속성과 headers 속성을 같이 사용 가능? 두 속성 모두 제목 셀이 어떤 데이터를 안내하고, 보조기기의 접근성을 도와줌. 중복작업을 하는 경우가 되어, 둘 중 하나를 테이블의 구조에 맞추어 선택, 사용한다. | |||||
|
| |||||
* table 내의 내용 없는 셀(td) 표현 : border-collapse:collapse - css에서 border-collapse:collapse 사용하지 않을 경우 border가 제대로 표현되지 않을 수 있음. - 값을 사용 / ‘없음’ 텍스트 삽입 후 css 로 텍스트를 숨겨 table의 정보 접근성 ↑ | ||||||
