HTML DOM TableHeader 객체

<시간/>

HTML DOM TableHeader 객체는 HTML 문서의 요소를 나타냅니다.

TableHeader 객체 생성

구문

다음은 구문입니다 -

document.createElement(“TH”);

TableHeader 객체의 속성

속성	설명
cellIndex	테이블 행의 셀 컬렉션에서 셀의 위치를 반환합니다.
colSpan	테이블의 colspan 속성 값을 반환하고 변경합니다.
헤더	테이블의 headers 속성 값을 반환하고 변경합니다.
약어	테이블의 abbr 속성 값을 반환하고 변경합니다.
rowSpan	테이블의 rowspan 속성 값을 반환하고 변경합니다.

TableHeader 개체의 예를 살펴보겠습니다.

예시

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   table {
      margin: 2rem auto;
      width: 400px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
<body>
<h1>DOM TableHeader Object Demo</h1>
<table border="2">
<thead>
<tr class="table-header">
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create a TableHeader</button>
<script>
   function get() {
      var th1 = document.createElement("TH");
      var th2 = document.createElement("TH");
      th1.innerHTML = "Name";
      th2.innerHTML = "Language";
      document.querySelector('.table-header').appendChild(th1);
      document.querySelector('.table-header').appendChild(th2);
   }
</script>
</body>
</html>

출력

HTML DOM TableHeader 객체

"TableHeader 만들기를 클릭합니다. ” 버튼을 눌러 TableHeader 객체를 생성합니다.

HTML DOM TableHeader 객체