테이블

#테이블

 

*테이블 코딩

1.table은 기본적으로 thead,tbody,tfoot으로 구성되나 때에따라서 생략가능하다.

2.thead에는 보통 제목을 쓴다. tr은 행을 나타내며 열로는 제목을 가르키는 th태그를 사용하여 작성하면 된다.

-th 태그는 자동으로 중앙정렬과 폰트를 두껍게 표편한다.

3.tbody에는 제목에관한 내용을 쓴다.

4.scope의 경우 웹접근성을 위하여 사용한다.

 

※웹접근성이란?

정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항.

 

예) scope=col의 경우

스크린 리더기가 제목1을 읽고 제목2로 가는것이 아닌 제목1에 관한 내용1을 읽어준다.

반대로 scope="row"를 사용한 내용4을 보면 내용4를 읽고 내용 5와 내용6을 읽어준다.

 

5.colspan,rowspan

열이나 행을 합칠때 사용한다.

예)내용3을 보면 열을 합칠땐 colspan을 사용한다.(가로)

내용4를 보면 행을 합칠땐 rowspan을 사용한다.(세로)

 

6.border-collapse

기본적으로 세투리와 셀의 테두리 사이에 간격을 두는 separate으로 설정된다.

보통 테이블은 셀과 테투리 사이의 간격을 없애고 선을 하나로 우리는 사용하므로 collapse를 기입하여준다.

 

7.table-layout

table-layout - CSS: Cascading Style Sheets | MDN

*테이블에 크기를 고정하고 싶을때 사용한다.

보통은 반응형에서 주로 사용된다.