목차
- <td> 객체 정의 - 테이블 데이터 셀
- <td> 객체 구문
- <td> 객체 예제 - 접근
- <td> 객체 예제 - 생성
- <td> 객체 속성
<td> 객체 정의 - 테이블 데이터 셀
HTML <td> 태그(요소) 의미.
<td> 객체 구문
[접근]
var x = document.getElementById("요소ID");
또는,
var x = document.getElementById("tableID").rows[trINDEX].cells
[생성]
var x = document.createElement("TD");
<td> 객체 예제 - 접근
<style>
table, th, td {border: 1px solid black;}
</style>
<table>
<tr>
<td id="hz">홈짱닷컴</td>
<td>Homzzang.com</td>
</tr>
</table>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz");
x.innerHTML = "코딩 공부";
}
</script>
결과보기
<td> 객체 예제 - 생성
<style>
table, th, td {border: 1px solid black;}
</style>
<table id="hz">
<tr id="hzTr">
</tr>
</table>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("TD");
var t = document.createTextNode("Homzzang.com");
x.appendChild(t);
document.getElementById("hzTr").appendChild(x);
}
</script>
결과보기
<td> 객체 속성
abbr
HTML5 제외.
abbr 속성값 설정/반환.
align
HTML5 제외. 대신 style.textAlign 속성 사용.
데이터 셀에서 내용의 가로 정렬 설정/반환.
axis
HTML5 제외.
관련 데이터 셀의 쉼표로 구분된 목록 설정/반환.
background
HTML5 제외. 대신 style.background 속성 사용.
데이터 셀의 배경이미지 설정하/반환.
bgColor
HTML5 제외. 대신 style.backgroundColor 사용.
테이블의 배경색 설정/반환.
cellIndex
테이블 행의 셀 컬렉션에서 셀 위치 반환.
ch
HTML5 제외.
데이터 셀의 정렬 문자 설정/반환.
chOff
HTML5 제외.
ch 속성의 가로 오프셋을 설정/반환.
colSpan
colspan 속성값 설정/반환.
headers
headers 속성값 설정/반환.
height
HTML5 제외. 대신 style.height 속성 사용.
데이터 셀의 높이 설정/반환.
noWrap
HTML5 제외. 대신 style.whiteSpace 속성 사용.
셀의 내용을 줄 바꿈 할 수 있는지 여부 설정/반환.
rowSpan
rowspan 속성값 설정/반환.
vAlign
HTML5 제외. 대신 style.verticalAlign 사용.
셀 내에서 내용의 수직 정렬 설정/반환.
width
HTML5 제외. 대신 style.width 사용.
데이터 셀의 너비 설정/반환.
※ <td> 객체는 표준 속성/메서드/이벤트 지원.
