table
tr : 행(row)
th : 제목셀(header cell)
td : 내용셀(data cell)
caption : 표 제목
thead : 헤더 행
tfoot : 푸터 행
tbody : 본문 행
col : 테이블의 열끼리 그룹화(스타일 지정 목적)
colgroup : 테이블의 열끼리 그룹화(논리적 그룹화 목적)
1 | <table border="1" width="500" rules="groups" summary="html table 관련 요소의 설명입니다." > | cs |
border 미지정시 테두리 안보임.
rules="groups" 선언시 colgroup, col을 통해 그룹지정한 열그룹 내부에는 테두리 표시안됨.
caption : 표 제목
summary : 표 내용 설명 (시각장애인이 summary 속성의 내용을 듣고 해당 테이블의 내용 파악한 후 건너뛸 것인지, 탐색할 것인지를 선택할 수 있음)
thead : header행
tfoot : footer행
tbody : body행
** thead, tfoot, tbody 순서
** 여러장 인쇄될 때 페이지마다 thead, tfoot 정보 인쇄가능.
** thead, tfoot에 table 주요내용이 요약되어 있으면, 시각장애인이 tbody의 내용을 일일이 읽지않아도 테이블 내용을 대략적으로 알 수도 있다.
일반인과 달리 시각장애인은 테이블 데이터의 행, 열, 셀 구분이 어렵다.
화면낭독기(스크린리더기)의 경우, 왼쪽에서 오른쪽으로 셀의 내용만 듣고 판단 -> 내용파악 어려움.
단순한 형태의 테이블의 경우,
th요소에 scope 속성, 값(col, row, rowgroup, colgroup) -> 해당 셀이 열의 제목인지 행의 제목인지 등을 알 수 있음.
*** scope 속성으로 열제목, 행제목 지정시, 스크린리더기에서 읽는 순서는
*** 요소명 : tr -> 요소설명 : 행(row) -> 비고 : 한줄 차지함
복잡하게 병합된 셀의 경우,
*** th요소는 id 속성으로 네이밍하고
*** 해당 제목 셀과 연관성이 있는 내용 셀에 headers 속성과 id값을 연결하여 제목 셀과 내용 셀의 관계 지정 가능.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>table</title> <style> * { margin: 0; padding: 0; } table { margin: 10px; text-align: center; } </style> </head> <body> <table border="1" width="500" rules="groups" summary="html table 관련 요소의 설명입니다." > <caption>HTML Table 만들기</caption> <colgroup span="2"> <col id="tag_name"> <col id="tag_description"> </colgroup> <col id="tag_etc"> <thead> <tr> <th scope="colgroup">요소명</th> <th scope="colgroup">요소 설명</th> <th scope="col">비고</th> </tr> </thead> <tfoot> <tr> <td colspan="3">2차원 표를 생성하는 테이블 관련 요소입니다.</td> </tr> </tfoot> <tbody> <tr> <th scope="row">tr</th> <td>행(row)</td> <td>한줄 차지함</td> </tr> <tr> <th scope="row">th</th> <td>제목셀(header cell)</td> <td rowspan="2">열(column)</td> </tr> <tr> <th scope="row">td</th> <td>내용셀(data cell)</td> </tr> </tbody> </table> </body> </html> | cs |
'XHTML | CSS2' 카테고리의 다른 글
| 목록 요소 (ul, ol, dl) (0) | 2018.10.19 |
|---|---|
| css2.1 Full property table (0) | 2018.10.09 |
| img 요소 (0) | 2018.10.08 |
| html, css 기본 (0) | 2018.10.07 |
| 문서형 정의 및 선언(DTD), 네임스페이스, meta (0) | 2018.10.07 |