[HTML_Objects] JS - <thead> 객체 - 테이블머리글그룹 (= 테이블헤드그룹 = thead태그 = 티헤드태그) (HTML5수정)

1. <thead> 객체 정의 - 테이블 머리글 그룹
2. <thead> 객체 구문
3. <thead> 객체 예제 - 접근
4. <thead> 객체 예제 - 생성
5. <thead> 객체 속성

<thead> 객체 정의 - 테이블 머리글 그룹

 

HTML <thead> 태그(요소) 의미.

 

<thead> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

 

[생성]

var x = document.createElement("THEAD");

 

<thead> 객체 예제 - 접근

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table>

 <thead id="hz">

   <tr>

     <th>언어</th>

     <th>기능</th>

   </tr>

  </thead>

 <tbody>

   <tr>

     <td>HTML</td>

     <td>기본틀</td>

   </tr>

   <tr>

     <td>CSS</td>

     <td>디자인</td>

   </tr>

  </tbody>

</table>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz");

  x.style.color = "red";

}

</script>

 

결과보기 

<thead> 객체 예제 - 생성

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table id="hz">

 <tbody>

   <tr>

     <td>HTML</td>

   </tr>

   <tr>

     <td>CSS</td>

   </tr>

  </tbody>

</table>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.createElement("THEAD");

  var y = document.createElement("TR");

  var z = document.createElement("TD");

  z.innerHTML = "코딩언어"

  y.appendChild(z);

  x.appendChild(y);

  document.getElementById("hz").appendChild(x);

}

</script>

 

결과보기

<thead> 객체 속성

 

align

HTML5 제외. 대신 style.textAlign 속성 사용.

thead 요소 내부의 내용의 가로 맞춤을 설정/반환.

 

ch

HTML5 제외.

thead 요소 내부에 정렬문자 설정/반환.

 

chOff

HTML5 제외.

ch 속성의 가로 오프셋 설정/반환.

 

vAlign

HTML5 제외. 대신 style.verticalAlign 속성 사용.

thead 요소 내에서 콘텐츠의 수직 정렬을 설정/반환.

 

※ <thead> 객체는 표준 속성/메서드/이벤트 지원.