html table 속성과 웹 접근성 정리

html5 table 속성 관련해서 한번 더 정리할 겸 웹 접근성과 함께 간단하게 정리해보았다.

 

1. <table> 태그에서 존재하는 여러가지 속성

<table>

테이블 정의

<th>

테이블 cell 안에 있는 헤더 정의

<tr>

테이블 안에 row 정의

<td>

테이블 셀 정의

<caption>

테이블 캡션 정의

<colgroup>

하나이상의 열 그룹을 지정할 때 사용

<col>

colgroup 요소 내의 각 열에 대한 속성 지정

<thead>

테이블 헤더를 그룹화

<tbody>

테이블 바디를 그룹화

<tfooter>

테이블 푸터 그룹화

 

 

1-1. 첫번째 tr안에는 thead가 들어가야 한다.

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

 

 

1-2. 첫번째 열을 테이블 샐로 사용하려면 tr안에 th추가

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

 

 

1-3. 테이블에 대한 캡션을 추가 할 땐 <caption> 태그 활용

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

 

 

1-4. 테이블 스타일링

1. 가로 스트라이프 타입
        - tr:nth-child(even)  /  tr:nth-child(odd) 
2.세로 스트라이프 타입
        - td:nth-child(even), th:nth-child(even)

 

*더 다양한 테이블 스타일링은 아래 링크 참고

https://www.w3schools.com/html/html_table_styling.asp

 

1-5. 열을 스타일링 하려면  <colgroup> 활용

- <colgroup>은 열 사양에 대한 컨테이너로 사용
- 각 그룹은 요소로 지정
- <col>속성은 span 스타일을 가져오는 열 수로 지정

<table style="width: 100%;">
<colgroup>
  <col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>

colgroup에 span을 2라고 지정해줬기 때문에 마크업 순서대로 2개의 컬럼에 스타일이 적용된다.

 

참고 : https://www.w3schools.com/html/html_tables.asp

---

2. table 접근성 파헤치기

 

2-1. 웹 접근성을 위해 caption은 필수다.

(display:none 을 사용하지 않고 숨겨줘야 스크린리더가 읽어줘서 스타일링 해줘야한다.)

table caption {
  position:absolute;
  width:0px;
  height:0px;
  overflow:hidden;
}

 

 

2-2. th, thead에도 scope를 써준다.

<table class="table">
  <caption>테이블 설명</caption>
	<colgroup>
	  <col style="width:100px">
	  <col style="width:100px">
	</colgroup>
 	<thead>
	  <tr>
	    <th scope="col">제목</th>
    	<th scope="col">제목</th>
	  </tr>
	<thead>
	<tbody>
	  <tr>
 	    <td>타이틀</th>
	    <td>본문</td>
         </tr>
	  <tr>
	    <td>타이틀</th>
	    <td>본문</td>
	  </tr>
  </tbody>
</table>

 

*th에 활용되는 scope는 뭐지?

셀의 종류를 명시해주는 것이다. 아래와 같이 표기할 수 있다.

<th scope="col | row | colgroup | rowgroup">
<!--
# - col : 해당 셀이 열을 위한 헤더 셀임을 명시
# - row : 해당 셀이 행을 위한 헤더 셀임을 명시
# - colgroup : 해당 셀이 열의 그룹을 위한 헤더 셀임을 명시
# - rowgroup : 해당 셀이 행의 그룹을 위한 헤더 셀임을 명시
--!>

참고 : https://www.tcpschool.com/html-tag-attrs/th-scope

 

 

2-3. thead가 존재하지 않는 테이블일 경우 웹 접근성을 위해 thead를 생성하고, caption과 같은 맥락으로 숨겨준다.

스크린리더가 테이블을 발견하면 내용을 행별로 읽으면서 적절한 마크업이 없으면 헤더행과 데이터 행을 구별하지 못 할 수도 있기 때문이다. 무조건 써야되 안쓰면 죽어!!! 이런거 까진 아니지만 있으면 좋은 느낌..

<table class="table">
  <caption>테이블 설명</caption>
	<colgroup>
	  <col style="width:200px">
	  <col style="width:auto">
	</colgroup>
	<thead class="thead-hidden">
	  <tr>
	    <th scope="col">구분</th>
  	    <th scope="col">내용</th>
	  </tr>
	</thead>
 	<tbody>
		...
  </tbody>
</table>

<style>
thead.thead-hidden{
    position: absolute;
    width:0;
    height: 0;
    overflow: hidden;
}
</style>

 

2-4. 위와 같은 상황일 때는 table보다는 dl dt dd를 활용해도 좋다.