웹 접근성에 준수하며 table 만들기

<table> 마크업의 기본 구조

 

태그

<table> : 표
<tr> : 행
<th> : 열의 제목
<td> : 내용 셀
<thead> :  표의 머리 부분
<tbody> : 표의 본문 부분
<tfoot> 표의 꼬리 부분
<caption> : 표 제목
<colgroup> : 행의 그룹화, 보통 셀의 width 값을 줄 때 사용

 

속성
colspan

: 열 합칠 때 사용하는 속성

rowspan

: 행 합칠 때 사용하는 속성

scope

: th에 들어가는 속성으로 th가 적용되는 범위를 나타내줌

: 웹 접근성을 위해 th 태그에 scope 속성을 넣어야 함

: col, row, colgroup, rowgroup

 

 

---

웹 접근성 준수를 위해 필요한 조건

 

1. cpation 필수(display: none;을 사용하지 않고 숨기기)
2. th에 scope 작성
3. thead 있으면 작성하기 없으면 넣지 않기
4. tbody 넣기
5. thead 영역에는 td가 올 수 없음

---

테이블 마크업 시 사용되는 css

 

border-collapse

: 테이블 테두리를 한줄로 나타냄

border-spacing

: 테이블 요소 th td 간의 여백을 설정함, 기본적으로 테이블 셀간에는 여백이 1px씩 들어가 있음

empty-cells

: 테이블 내의 빈셀의 테두리와 배경색을 표현할지 안할지 설정함

table-layout(fixed, auto)

: 표에서 내용을 입력했을 때 width가 지정된 상태에서 콘텐츠 내용이 길어질 때 셀 안에 있는 내용에 따라 너비를 변하게 할지 고정시킬 것인지를 정해주는 속성, 어떤 상황에서도 표 크기를 고정하고 싶다면 table-layout fixed 값 주기

 

th는 기본적으로 가운데 정렬이 됨
td는 기본적으로 왼쪽 정렬이 됨
vertical-align 속성은 테이블 요소 th td를 수직 방향으로 정렬함 기본적으로 모두 가운데 정렬이 됨

---

참고

https://worker-k.tistory.com/entry/table-%ED%83%9C%EA%B7%B8-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-caption-scope-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C

https://januaryman.tistory.com/73