728x90
반응형
웹 문서에서 표를 만드는 요소는 <table> 입니다.
<table>은 블록 요소이며 기본적으로 행과 열을 가지고 있는데,
행-가로 <row>을 만드는 요소를 <tr> - 볼드처리 및 중앙정열, 열-세로<col>을 만드는 요소를 <td>라고 하며 <td>요소는 셀(cell) 이라고도 합니다.
table태그에 summary="" 속성은 테이블 내용을 파악할 수 있도록 요약하는 부분입니다.
화면에 출력되지는 않지만 스크린 리더(시각 장애인들을 위한 화면 낭독기)에서 읽어 줍니다.
 |  |
scope 속성은 센스리더리가 읽어주는 방향 표시로 커서 위치를 이동시켜줍니다
scope="col" -> 아래로
scope="row" -> 옆으로
 |  |
상품종류의 셀은 열합치기 colspan="3" 되어있으며 아래 스마트폰,태블릿pc,테스크탑pc 제목 셀들의 큰제목이 됩니다.
이런경우 상품종류 제목 셀 안에 scope속성값을 col이 아닌 colgroup으로 주면 됩니다.
 |  |
headers는 제목 셀 id의 내용을 참조한다고 보면 됩니다.
테이블 css -> border-collapse:collapse; = 셀테두리 제거
스크린 리더기에서는 마크업한 순서대로 접근하여 읽어주기 때문에
<thead>다음 <tfoot>에 대한 정보를 먼저 제공하여 전체적인 내용을 파악할 수 있게 하고
그 다음 본문으로 내려가게 하는 것이 효율적인 방법입니다.
들어봤을때 관심이 없는 내용이라면 굳이 긴 본문의 내용을 모두 들을 필요가 없으니까요.
<body> <h2>데이터테이블</h2> <table width="20%"> <caption>태블릿 pc와 스마트폰 판매현황</caption> <colgroup> <col width="50%"> <col width="25%"> <col width="25%"> </colgroup> <thead> <tr> <th scope="col">구분</th> <th>태블릿pc</th> <th>스마트폰</th> </tr> </thead> <tfoot> <tr> <th>총판매수</th> <td>5만대</td> <td>16만대</td> </tr> </tfoot> <tbody> <tr> <th scope="row">상반기판매수</th> <td>2만대</td> <td>5만대</td> </tr> <tr> <th scope="row">하반기판매수</th> <td>3만대</td> <td>11만대</td> </tr> </tbody> </table> <h2>접근성 높인 테이블</h2> <h3>colgroup</h3> <table> <caption>상품에 따른 월별 판매현황</caption> <thead> <tr> <th rowspan="2" scope="col">구분</th> <th colspan="3" scope="colgroup">상품종류</th> </tr> <tr> <th scope="col">스마트폰</th> <th scope="col">태블릿PC</th> <th scope="col">데스크탑PC</th> </tr> </thead> <tbody> <tr> <th scope="row">1월</th> <td>5만대</td> <td>3만대</td> <td>1만대</td> </tr> </tbody> </table> <h3>id,headers</h3> <table> <caption>상품에 따른 월별 판매현황</caption> <thead> <tr> <th rowspan="2" id="division">구분</th> <th colspan="3" id="product">상품종류</th> </tr> <tr> <th headers="product" id="smartphone">스마트폰</th> <th headers="product" id="tabletpc">태블릿PC</th> <th headers="ptoduct" id="pc">데스크탑PC</th> </tr> </thead> <tbody> <tr> <th headers="division">1월</th> <td headers="pruduct smartphone">5만대</td> <td headers="pruduct tabletpc">3만대</td> <td headers="pruduct pc">1만대</td> </tr> </tbody> </table> </body> <style> table, tr, td,th {border:1px solid #000; border-collapse:collapse; /*border-collapse:collapse; - 셀테두리 제거*/} </style> | cs |
728x90
반응형
'IT > html + css' 카테고리의 다른 글
| [html] summary, progress (0) | 2019.12.28 |
|---|---|
| [html] form 요소 (0) | 2019.12.27 |
| [html] a 링크, a 태그 만들기 - 새창으로 이동 속성 (0) | 2019.12.18 |
| [html] 인라인요소 태그 (0) | 2019.12.17 |
| [html] 블록 요소, 인라인요소, 인라인블록 (0) | 2019.12.16 |
댓글