[attribute] HTML - headers 속성 - 관련된 헤더셀ID 목록 지정 (= headers속성 = 헤더스속성/헤더즈속성/헤덜스속성)

1. headers 예제 - <td> 경우
2. headers 정의
3. headers 구문
4. headers 예제 - <th> 경우

headers 예제 - <td> 경우

 

<style>

table, th, td {

  border: 1px solid black; text-align:center;

}

</style>

<table style="width:100%">

  <tr>

    <th id="name">사이트명</th>

    <th id="host">주소</th>

    <th id="open">오픈년도</th>

    <th id="intro">소개</th>

  </tr>

  <tr>

    <td headers="name">홈짱닷컴</td>

    <td headers="host">Homzzang.com</td>

    <td headers="open">2012</td>

    <td headers="intro">홈페이지 제작관리강의</td>

  </tr>

</table>

 

결과보기

headers 정의

 

해당 셀이 관련된 하나 이상의 헤더셀ID를 공백으로 구분 나열해 지정.

 

---

 

1.

외관적으로는 영향 없으나, 스크린리더기 사용 경우엔 영향 있음.

 

2. headers 속성 사용 가능 태그 종류

<td>, <th>

 

3.

주요 최신 브라우저 모두 지원.

 

headers 구문

 

• <td headers="header_id">
• <th headers="header_id">

 

---

[속성값]

 

header_id

해당 셀이 관련된 하나 이상의 헤더셀 ID를 공백으로 구분 나열. (예: a b)

 

headers 예제 - <th> 경우

 

<style>

table, th, td {

  border: 1px solid black;

}

</style>

<table>

  <tr>

    <th id="name" colspan="2">이름</th>

  </tr>

  <tr>

    <th headers="name" id="first">성</th>

    <th headers="name" id="last">이름</th>

  </tr>

  <tr>

    <td headers="name first">홍</td>

    <td headers="name last">길동</td>

  </tr>

</table>

 

결과보기