웹표준 테이블 관련 설명

<table cellpadding="0" cellspacing="0" summary="테이블 정보">
 <caption>테이블 타이틀, 목적</caption>

<colgroup>
<col  />
<col  />
<col  />
</colgroup>

    <thead>
      <tr>
         <th scope="col" abbr="테이블관련">테이블 관련1</th>
         <th scope="col" abbr="테이블관련">테이블 관련2</th>
         <th scope="col" abbr="테이블관련">테이블 관련3</th>
      </tr>
   </thead>
    <tbody>
      <tr>
         <td scope="row">테이블 관련1-1번 내용</td>
         <td>테이블 관련1-2번 내용</td>
         <td>테이블 관련1-3번 내용</td>
      </tr>
   </tbody>
    <tfoot>
      <tr>
         <td scope="row">테이블 관련1-4번 내용</td>
         <td>테이블 관련1-5번 내용</td>
         <td>테이블 관련1-6번 내용</td>
      </tr>
   </tfoot>
</table>

▣ thead, tbody, tfoot

여러개의 행을 하나의 그룹으로 묶어주는 엘리먼트 입니다.
테이블 안에서 이 3개의 태그는 사용이 제한이 있는데 thead와 tfoot는 한 테이블에서 하나만 작성을 할 수가 있습니다. 하지만 tbody의 경우는 여러번 사용해도 무방합니다.

header 의th 태그를 적용하면 글자가 bold체로 굵게 표시되고 가운데 정렬을 하게 됩니다.

▣ summary

표의 목적이나, 음성, 점자등 보이지 않는 메디아 표현의 구조를 제공합니다.
해당 테이블의 내용이 뭔지를 축약적으로 나타낼 수 있습니다. 이미지 태그의 alt 속성과 같다고 할 수 있습니다.

▣ caption 

** 닫는 태그 필요

테이블의 열이나 행 앞에 header나 caption을 넣어 줄때 사용합니다.
caption태그는 반드시 table태그 블록에 포함 되어야 합니다.
default 정렬방식은 중앙정렬 입니다.

▶ 속성

① align = top | left | right | bottom
              top : 행의 상단에 배치
              left : 문자열을 왼쪽에 정렬
              right : 문자열을 오른쪽에 정렬
              bottom : 행의 하단에 배치

② class : css의 class 선택자를 지정합니다.

③ id : css의 id 선택자를 지정합니다

④ style : css스타일을 지정합니다.

▣ colgroup  

** 닫는 태그 선택적

표의 세로줄 그룹을 만들때 사용합니다. table요소내에서 caption뒤 thead 앞에 위치 해야 합니다.

▶ 속성

① class : css의 class 선택자를 지정 합니다.

② id : css의 id 선택자를 지정합니다.

③ style : css 스타일을 지정합니다.
             (적용할 수 있는 스타일은 border, background, width 입니다.)

④ span : 그룹화할 세로줄의 개수를 지정합니다.

⑤ width : 세로줄 그룹의 너비를 지정합니다.

⑥  align = top | left | right | bottom | center 
               (ie에서만 적용됩니다. 구글이나 파이어폭스에서 적용안됨)

▣ col

** 닫는 태그 없음

표의 세로줄을 지정할때 사용합니다. table요소내에서 caption뒤 thead 앞에 위치 해야 합니다.
colgroup과 달리 col은 세로줄을 구조적으로 그룹핑하지 않으며 단순히 하나 이상 세로줄에 공통적인 속성을
정의 합니다.
col요소는 table요소 안에 바로 포함되거나 colgroup 안에 포함될 수 있습니다.
col요소가 colgroup안에 있을때 col속성은 colgroup속성보다 우선합니다.

▶ 속성

① class : css의 class 선택자를 지정 합니다.

② id : css의 id 선택자를 지정합니다.

③ style : css 스타일을 지정합니다.
              (적용할 수 있는 스타일은 border, background, width 입니다.)
  
④ width : 디폴트 값은 픽셀입니다. %로도 사용이 가능합니다.

     구문 : <col width="10" />,  <col width="10%" />

⑤ span : 그룹화할 가로줄의 개수를 지정합니다.

▣ scope

데이터의 header 정보를 제공합니다.

col : 그 열의 header의 정보를 제공합니다.
row : 그 행의 header의 정보를 제공합니다.

위의 테이블에서 보시다시피 겉으로는 scope 속성이 적용되었는지 알 수 없습니다.
하지만 scope속성을 적용함으로써
'테이블 관련1' 에 해당하는 데이터는 '테이블관련1-1번내용', '테이블관련1-4번내용' 이고
'테이블관련 1-1' 에 해당하는 데이터는 '테이블관련1-2번내용', '테이블관련1-3번내용'이라는
정보를 브라우저에게 알려주게 되는 것입니다.

▣ abbr (헤더의 요약)

스크린리더가 테이블의 내용을 읽어 내려갈때 테이블의 내용(td) 보다는 상단header(th)부분부터 읽게 될 것입
니다. 만약 이때 헤더(th) 내용이 길게 들어가면 스크린리더가 행을 읽을때마다 헤더의 내용을 계속 반복해서
읽게 될 것입니다.
abbr속성은 이렇게 길게 들어가 있는 헤더의 내용을 단축해서 표현해주는 역활을 합니다.

 

 

출처 : http://yumtang.tistory.com/14