[HTML_Objects] JS - <table> 객체 ★ 테이블 (= 표작성 = table태그 = 테이블태그)</table>

목차

1. <table> 객체 정의 - 테이블(= 표)
2. <table> 객체 구문
3. <table> 객체 예제 - 접근
4. <table> 객체 예제 - 생성
5. <table> 객체 집합
6. <table> 객체 속성
7. <table> 객체 메서드

 

<table> 객체 정의 - 테이블(= 표)

 

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

 

 

<table> 객체 구문

 

[접근]

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

 

[생성]

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

 

 

<table> 객체 예제 - 접근

 

<style>

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

</style>

<table id="hz">

  <tr>

    <td>HTML</td>

    <td>CSS</td>

  </tr>

  <tr>

    <td>PHP</td>

    <td>SQL</td>

  </tr>

</table>

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

<script>

function homzzang() {

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

  x.deleteRow(0);

}

</script>

 

결과보기 

 

<table> 객체 예제 - 생성

 

<style>

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

</style>

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

<script>

function homzzang() {

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

  x.setAttribute("id", "hz");

  document.body.appendChild(x);

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

  y.setAttribute("id", "hzTr");

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

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

  var t = document.createTextNode("Homzzang.com");

  z.appendChild(t);

  document.getElementById("hzTr").appendChild(z);

}

</script>

 

결과보기 

 

<table> 객체 집합

 

rows

테이블에 있는 모든 <tr> 요소 집합 반환.

 

tBodies

테이블에 있는 모든 <tbody> 요소 집합 반환. 

 

<table> 객체 속성

 

align

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

주변 텍스트에 따라 테이블 정렬 설정/반환.

 

background

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

테이블의 배경 이미지 설정/반환.

 

bgColor

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

테이블의 배경색 설정/반환.

 

border

사용 비추천. 대신 style.border 사용.

테이블 테두리의 너비 설정/반환.

 

caption

테이블의 <caption> 요소 반환.

 

cellPadding

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

셀 경계와 셀 내용 사이의 간격을 설정/반환.

 

cellSpacing

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

테이블의 셀 간 간격을 설정/반환.

 

frame

HTML5 제외.

표시할 (테이블의) 외부 경계 설정/반환.

 

height

HTML5 제외. 대신 style.height 사용.

테이블의 높이 설정/반환.

 

rules

HTML5 제외.

표에 표시할 (셀 간) 내부 경계 설정/반환.

 

summary

HTML5 제외.

테이블의 데이터 설명 설정/반환.

 

tFoot

테이블의 <tfoot> 요소에 대한 참조 반환.

 

tHead

테이블의 <thead> 요소에 대한 참조 반환.

 

width

HTML5 제외. 대신 style.width 사용.

테이블 너비를 설정/반환. 

 

<table> 객체 메서드

 

createCaption()

빈 <caption> 요소 만들어 테이블에 추가.

 

createTFoot()

빈 <tfoot> 요소 만들어 테이블에 추가.

 

createTHead()

빈 <thead> 요소 만들어 테이블에 추가.

 

deleteCaption()

테이블에서 첫 번째 <caption> 요소 제거.

 

deleteRow()

테이블에서 행 (<tr>) 제거.

 

deleteTFoot()

테이블에서 <tfoot> 요소 제거.

 

deleteTHead()

테이블에서 <thead> 요소 제거.

 

insertRow()

빈 <tr> 요소 작성하여 테이블에 추가.

 

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